postMessage(message, [transferList]);

// 創(chuàng)建一個(gè)Worker
const worker = new Worker('myWorker.js');

// 創(chuàng)建一個(gè)大型ArrayBuffer
const buffer = new ArrayBuffer(1024 * 1024 * 32); // 32MB

// 填充一些數(shù)據(jù)
const view = new Uint8Array(buffer);
for (let i = 0; i < view.length; i++) {
  view[i] = i % 256;
}

console.log('發(fā)送前buffer的字節(jié)長(zhǎng)度:', buffer.byteLength); // 正常顯示字節(jié)長(zhǎng)度

// 發(fā)送buffer給Worker并轉(zhuǎn)移所有權(quán)
worker.postMessage({ data: buffer }, [buffer]);

// 此時(shí)嘗試訪問(wèn)原始buffer
console.log('發(fā)送后buffer的字節(jié)長(zhǎng)度:', buffer.byteLength); // 輸出0，表示已被轉(zhuǎn)移

self.onmessage = function(event) {
  const receivedBuffer = event.data.data;
  
  console.log('Worker收到的buffer字節(jié)長(zhǎng)度:', receivedBuffer.byteLength);
  
  // 在Worker中處理數(shù)據(jù)
  const view = new Uint8Array(receivedBuffer);
  let sum = 0;
  for (let i = 0; i < 100; i++) {
    sum += view[i];
  }
  
  console.log('前100個(gè)字節(jié)的總和:', sum);
  
  // 可以將處理結(jié)果傳回主線程
  const resultBuffer = new ArrayBuffer(4);
  new Uint32Array(resultBuffer)[0] = sum;
  
  // 同樣可以轉(zhuǎn)移回去
  self.postMessage({ result: resultBuffer }, [resultBuffer]);
};

// 在主線程中
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 在canvas上繪制內(nèi)容...

// 創(chuàng)建一個(gè)ImageBitmap
createImageBitmap(canvas).then(bitmap => {
  // 將ImageBitmap轉(zhuǎn)移到Worker
  worker.postMessage({ image: bitmap }, [bitmap]);
});

// 在Worker中
self.onmessage = function(event) {
  const bitmap = event.data.image;
  
  // 在Worker中處理圖像
  const offscreen = new OffscreenCanvas(bitmap.width, bitmap.height);
  const ctx = offscreen.getContext('2d');
  ctx.drawImage(bitmap, 0, 0);
  
  // 應(yīng)用一些處理...
  ctx.filter = 'grayscale(100%)';
  ctx.drawImage(bitmap, 0, 0);
  
  // 將結(jié)果轉(zhuǎn)回主線程
  offscreen.convertToBlob().then(blob => {
    self.postMessage({ processedImage: blob });
  });
};

// 測(cè)試函數(shù)
function testTransfer() {
  return new Promise(resolve => {
    const worker = new Worker('perfTest.js');
    const buffer = new ArrayBuffer(1024 * 1024 * 100); // 100MB
    
    const startTime = performance.now();
    
    worker.onmessage = function() {
      const endTime = performance.now();
      worker.terminate();
      resolve(endTime - startTime);
    };
    
    worker.postMessage({ data: buffer }, [buffer]);
  });
}

function testCopy() {
  return new Promise(resolve => {
    const worker = new Worker('perfTest.js');
    const buffer = new ArrayBuffer(1024 * 1024 * 100); // 100MB
    
    const startTime = performance.now();
    
    worker.onmessage = function() {
      const endTime = performance.now();
      worker.terminate();
      resolve(endTime - startTime);
    };
    
    // 不使用transfer list，導(dǎo)致復(fù)制
    worker.postMessage({ data: buffer });
  });
}

// perfTest.js 內(nèi)容
self.onmessage = function() {
  // 簡(jiǎn)單地確認(rèn)收到
  self.postMessage('done');
};

// 執(zhí)行測(cè)試
async function runTest() {
  console.log('測(cè)試復(fù)制方式:', await testCopy(), 'ms');
  console.log('測(cè)試轉(zhuǎn)移方式:', await testTransfer(), 'ms');
}

runTest();

// 處理視頻幀
async function processVideoFrame(videoElement) {
  const bitmap = await createImageBitmap(videoElement);
  
  // 轉(zhuǎn)移到Worker進(jìn)行處理
  videoWorker.postMessage({ frame: bitmap }, [bitmap]);
}

// Worker中
self.onmessage = async function(event) {
  const frame = event.data.frame;
  // 進(jìn)行復(fù)雜的視頻處理...
};

// 分配內(nèi)存并轉(zhuǎn)移給WebAssembly
const memory = new WebAssembly.Memory({ initial: 10, maximum: 100 });
const buffer = memory.buffer;

worker.postMessage({ 
  memory: buffer,
  // 其他WASM相關(guān)配置
}, [buffer]);

async function processLargeFile(file) {
  const arrayBuffer = await file.arrayBuffer();
  
  fileWorker.postMessage({
    fileName: file.name,
    fileType: file.type,
    fileData: arrayBuffer
  }, [arrayBuffer]);
}