Javascript 更快的web工作者消息传递

我专门在Chrome中测试了web worker消息，结果显示发送和接收消息的延迟约为50毫秒：

// Sender section

let imageData = mCtx.getImageData(0, 0, w, h);
let bitmapData = await createImageBitmap(imageData);
beforeAddBitmapFrame = performance.now();
videoWorker.postMessage({ action : 'addFrameBitmap', data: bitmapData }, [bitmapData]);


// Receiver section

videoWorker.onmessage = function (e) {
    let blob = e.data.data;
    beforeRenderBlobFrame = performance.now();
    let latency = (beforeRenderBlobFrame - beforeAddBitmapFrame); // 50ms
    if(latency > 10) {
       console.log('=== Max Latency Hit ===')
    }
    renderBlobTest(blob);
};

这基本上是一个循环测试，其中一个映像被发送到web worker，web worker只会将其发送回以计算延迟。这里的50毫秒一开始可能算不上什么，但如果你将它乘以30帧每秒的视频，那么做数学计算，

50毫秒x 30帧=1500毫秒

latency（1.5秒），考虑到这不是网络传输，这是一个很大的问题

如何降低Web worker消息传递的延迟

[更新] 为了进一步测试，我在给定的时间间隔对web worker做了一个简单的“ping”测试

setInterval(function () {
  let pingTime = new Date().getMilliseconds();
  videoWorker.postMessage({ action: 'ping', pingTime : pingTime });
}, 500);

然后呢

if(e.data.pingTime) {
  let pongTime = new Date().getMilliseconds();
  console.log('Got pong: ' + ( pongTime - e.data.pingTime ))
}

---

高于它的类似结果平均约为50毫秒

您感觉到了一个微观基准测试陷阱：

永远不要运行测试的单个实例。 第一次运行总是比较慢，引擎必须预热，在您的情况下，必须生成整个工作线程，并且必须初始化许多其他内容（请参阅延迟第一条消息的内容列表）。
此外，由于一些外部和不相关的事件（后台应用程序决定在此时执行某些操作、垃圾收集器启动、UI事件等），单个测试很容易报告完全错误的结果

const videoWorker=new Worker（generateWorkerURL（））；
让我们开始吧；
常数延迟=[]；
const max_rounds=10；
//接收段
videoWorker.onmessage=函数（e）{
const endTime=performance.now（）；
e、 data.close（）；
常数延迟=（结束时间-开始时间）；
//存储当前延迟
延迟。推送（延迟）；
if（延迟长度<最大轮数）{
性能测试（）；
}
否则{
日志结果（）；
}
};
//初始呼叫
性能测试（）；
//实际测试代码
异步函数performTest（）{
//我们将在每次测试中创建一个新的随机图像
常数w=1920；
常数h=1080；
//制造一些噪音
const data=uint32数组from（{length:w*h}，（）=>Math.random*0xFFFFFF+0xFF000000）；
常量imageData=新的imageData（新的Uint8ClampedArray（data.buffer）），w，h；
让bitmapData=等待createImageBitmap（imageData）；
//开始测量传输所需的时间
startTime=performance.now（）；
videoWorker.postMessage（bitmapData，[bitmapData]）；
}
//所有测试完成后
函数logResults（）{
const total=延迟。reduce（（总计，lat）=>total+lat）；
const avg=总/延迟.length；
log（“平均延迟（ms）”，平均值；
log（“前十个绝对值”，latencies.slice（0,10））；
}
函数generateWorkerURL（）{
const content=`onmessage=e=>postMessage（e.data，[e.data]）；`；
constblob=newblob（[content]，{type:'text/javascript'}）；
返回URL.createObjectURL（blob）；
}

您感觉到了一个微型基准测试陷阱：

永远不要运行测试的单个实例。 第一次运行总是比较慢，引擎必须预热，在您的情况下，必须生成整个工作线程，并且必须初始化许多其他内容（请参阅延迟第一条消息的内容列表）。
此外，由于一些外部和不相关的事件（后台应用程序决定在此时执行某些操作、垃圾收集器启动、UI事件等），单个测试很容易报告完全错误的结果

const videoWorker=new Worker（generateWorkerURL（））；
让我们开始吧；
常数延迟=[]；
const max_rounds=10；
//接收段
videoWorker.onmessage=函数（e）{
const endTime=performance.now（）；
e、 data.close（）；
常数延迟=（结束时间-开始时间）；
//存储当前延迟
延迟。推送（延迟）；
if（延迟长度<最大轮数）{
性能测试（）；
}
否则{
日志结果（）；
}
};
//初始呼叫
性能测试（）；
//实际测试代码
异步函数performTest（）{
//我们将在每次测试中创建一个新的随机图像
常数w=1920；
常数h=1080；
//制造一些噪音
const data=uint32数组from（{length:w*h}，（）=>Math.random*0xFFFFFF+0xFF000000）；
常量imageData=新的imageData（新的Uint8ClampedArray（data.buffer）），w，h；
让bitmapData=等待createImageBitmap（imageData）；
//开始测量传输所需的时间
startTime=performance.now（）；
videoWorker.postMessage（bitmapData，[bitmapData]）；
}
//所有测试完成后
函数logResults（）{
const total=延迟。reduce（（总计，lat）=>total+lat）；
const avg=总/延迟.length；
log（“平均延迟（ms）”，平均值；
log（“前十个绝对值”，latencies.slice（0,10））；
}
函数generateWorkerURL（）{
const content=`onmessage=e=>postMessage（e.data，[e.data]）；`；
constblob=newblob（[content]，{type:'text/javascript'}）；
返回URL.createObjectURL（blob）；
}

在我的测试中，在发送位图之前，会向工作者发送一个init命令，因此这不是第一次调用。此外，我还添加了一个简单的“ping”测试，看看反应是否相似，很明显，有时甚至会出现瞬时107毫秒、185毫秒。我肯定会下降，但并不总是很低。根据这个博客：网络工作者的速度很快，大约1到2毫秒，这绝对是远远不够的。我做了一个单独的测试，事实上，网络工作者可以达到1到2毫秒的通信速度，但前提是脚本中没有其他进程在运行。显然，web工作者响应的速度与主线程中运行的进程数成正比。或者至少是

worker.onmessage

hander被阻塞。当然，处理程序在主线程上运行，如果主线程忙，处理程序将延迟。在我的测试中，在发送位图之前，会向worker发送init命令，因此这不是第一次调用。此外，我还添加了一个简单的“ping”测试，以查看响应是否相似，显然情况确实如此