The key to improving performance using Web Worker in H5 development lies in communication mode design, which mainly has three communication methods. 1. Basic: Use postMessage to achieve one-way communication. The main thread sends data through worker.postMessage, and the Worker receives it through onmessage, which is suitable for simple task processing; 2. Intermediate: Design a two-way communication and message routing mechanism, enhancing scalability by adding type fields to the message and executing different logic according to the type; 3. Advanced: Use Channel Messaging to establish an independent communication channel, and create ports through MessageChannel to achieve multi-task isolation, which is suitable for modular architecture. In addition, data can be shared between multiple workers through main thread mediation or SharedArrayBuffer, but the former is recommended to ensure clear structure. It should be noted that Worker cannot access the DOM, and there are structured cloning restrictions on data transmission, so high-frequency large amounts of communication should be reduced to optimize performance.

In H5 development, Web Worker is an important tool for improving performance and implementing multi-threaded processing. But to really use it well, the key lies in the design of the communication mode. Worker itself cannot operate the DOM, and all interactions must be completed through messaging. Therefore, mastering several practical communication modes can help you organize logic more efficiently and avoid blocking the main thread.

Basics: Use postMessage for one-way communication

The most basic and most commonly used communication method is postMessage . The main thread sends data to the Worker through worker.postMessage(data) , and the Worker internally listens to onmessage event to receive data. This approach is suitable for simple task triggering and result return.

for example:

 // Main thread const worker = new Worker('worker.js');
worker.postMessage({ cmd: 'start', data: [1,2,3] });

worker.onmessage = function(e) {
  console.log('Worker returns:', e.data);
};

 // worker.js
onmessage = function(e) {
  const result = e.data.data.map(x => x * 2);
  postMessage(result);
};

This method is suitable for lightweight data processing tasks, such as computing, analysis, etc. Note that the data passed into postMessage will be cloned in structure, so it cannot contain functions or circular references.

Intermediate: Designing two-way communication and message routing mechanisms

When the application complexity increases, the simple "send-response" mode is not enough. You need to design a message routing system for Worker so that the main thread can distinguish different request types and support asynchronous callbacks.

A common practice is to add type field to the main message and perform different logic based on this field in Worker:

 // The main thread sends different types of messages worker.postMessage({ type: 'calculate', payload: { a: 10, b: 20 } });
worker.postMessage({ type: 'fetchData', payload: { url: '/api/data' } });

 // worker.js internal onmessage = function(e) {
  switch(e.data.type) {
    case 'calculate':
      const sum = e.data.payload.a e.data.payload.b;
      postMessage({ type: 'calculateResult', payload: sum });
      break;
    case 'fetchData':
      fetch(e.data.payload.url)
        .then(res => res.json())
        .then(data => postMessage({ type: 'fetchDataResult', payload: data }));
      break;
  }
};

This structure is clear and scalable, and is especially suitable for scenarios where multiple different types of tasks are required to be handled simultaneously.

Advanced: Use Channel Messaging to implement more complex communication topology

If you have multiple Workers in your project or need to control the communication path more fine-grained, you can consider using MessageChannel . It allows you to establish independent communication channels between the main thread and the Worker without interfering with each other.

For example, you can create a separate MessagePort for each asynchronous task to avoid messaging between multiple tasks:

 // Main thread const channel = new MessageChannel();
channel.port1.onmessage = function(e) {
  console.log('Received port1 message:', e.data);
};

const worker = new Worker('worker.js');
worker.postMessage({ type: 'taskA' }, [channel.port2]);

 // worker.js
onmessage = function(e) {
  if (e.data.type === 'taskA') {
    const port = e.ports[0];
    port.postMessage('Task A processing is completed');
  }
};

This approach is particularly suitable for building a modular architecture, such as assigning different business logic to different Workers and communicating through ports to form a loosely coupled system.

Tips: Cross-Worker Communication and Shared Data Management

If you have multiple Workers and want them to communicate, you can mediate through the main thread, or use SharedArrayBuffer (be careful of browser compatibility and security policies) to achieve memory sharing.

However, in most cases, the main thread is recommended as the intermediate coordinator:

• Worker A sends a message to the main thread
• The main thread is forwarded to Worker B again

Although this is a layer, the structure is clear and easy to debug and maintain.

?? Notes:

• Global objects such as window and document cannot be accessed in Web Worker
• Data transfers are structured cloned, and deep objects may affect performance
• It is not recommended to frequently transmit large amounts of data, and communication frequency should be minimized.

In general, the communication mode of Web Worker in H5 can gradually evolve from simple to complex according to project requirements. The key is to choose the appropriate communication structure based on the task type, keeping the code clear and responsibilities clear. Basically all that is, the rest is to use it flexibly in combination with actual business.

The above is the detailed content of Advanced H5 Web Worker Communication Patterns. For more information, please follow other related articles on the PHP Chinese website!