Web Worker 的消息有多快？
Posted
技术标签:
【中文标题】Web Worker 的消息有多快？【英文标题】：How fast are Web Worker's messages? 【发布时间】：2015-10-21 08:23:03 【问题描述】：我想知道与网络工作者之间的传输是否会成为瓶颈。 我们应该在触发任何类型的事件时发布消息，还是应该小心并尽量限制两者之间的通信？
让我们举个例子。如果我有一个动态构造的巨大数组（例如，来自mousemove 或touchmove 的接触点数组，用于手势识别器），迭代传输数据是否更有效 - 即一旦我们发送每个元素接收它并让工作人员将它们存储在自己的一边——或者最好将它们存储在主线程上并在最后一次发送所有数据，特别是当人们无法使用可传输对象时？
【问题讨论】：
我刚刚意识到我实际上并没有真正回答最初的问题 - 有多快。拉杜博格丹是对的。我可能会纠正他非常快。缓慢的是单次传输的开销，因为我可以使用我添加到答案中的性能测试脚本来验证。 说实话，我在你的帖子后面最后一句末尾添加了最后一点。所以这是我的错，不是你的。对此感到抱歉。 @QuentinRoy 我上次编辑答案时添加的基准表明传输/复制之间的差异可以忽略不计。但真正重要的是缓冲 - 尝试以 1、10 或 100 个块发送 100Mb，您会看到速度下降的幅度有多大。 【参考方案1】：你可以缓存Uint16Array1中的数据。然后，您可以做一个小技巧并移动数据而不是复制。请参阅 this demo on MDN 了解简介。
1：对于小于 16x16 米、像素密度为每毫米 0.25 像素的屏幕应该足够了，我相信这是世界上大多数屏幕
1。有多快？
首先回答你的问题，让我们测试一下网络工作者的速度。
我创建了这个测试 sn-p 来尝试测量工人的实际速度。但是尝试在这里很重要。确实，我发现只有测量时间的可靠方法才会影响时间，就像我们在现代物理学理论中所经历的那样。
代码绝对可以告诉我们的是缓冲是个好主意。第一个文本框设置要发送的总数据量。 Second 设置用于划分数据的样本数。您很快就会发现样本的开销是显着的。复选框允许您选择是否传输数据。正如预期的那样，随着数据量的增加，这开始变得重要。
请原谅凌乱的代码，在编写激动人心的测试 sn-ps 时，我不能强迫自己表现。 我创建了这个 tjes
function WorkerFN()
console.log('WORKER: Worker ready for data.');
// Amount of data expected
var expectedData = 0;
// Amount of data received
var receivedData = 0;
self.onmessage = function(e)
var type = e.data.type;
if(type=="data")
receivedData+=e.data.data.byteLength;
self.postMessage(type: "timeResponse", timeStart: e.data.time, timeHere: performance.now(), bytes: e.data.data.byteLength, all:expectedData<=receivedData);
else if(type=="expectData")
if(receivedData>0 && receivedData<expectedData)
console.warn("There is transmission in progress already!");
console.log("Expecting ", e.data.bytes, " bytes of data.");
expectedData = e.data.bytes;
receivedData = 0;
var worker = new Worker(URL.createObjectURL(new Blob(["("+WorkerFN.toString()+")()"], type: 'text/javascript')));
/** SPEED CALCULATION IN THIS BLOCK **/
var results =
transfered: 0,
timeIntegral: 0 //Total time between sending data and receiving confirmation
// I just love getters and setters. They are so irresistably confusing :)
// ... little bit like women. You think you're just changing a value and whoops - a function triggers
Object.defineProperty(results, "speed", get: function()
if(this.timeIntegral>0)
return (this.transfered/this.timeIntegral)*1000;
else
return this.transfered==0?0:Infinity;
);
// Worker sends times he received the messages with data, we can compare them with sent time
worker.addEventListener("message", function(e)
var type = e.data.type;
if(type=="timeResponse")
results.transfered+=e.data.bytes;
results.timeIntegral+=e.data.timeHere-e.data.timeStart;
// Display finish message if allowed
if(e.data.all)
status("Done. Approx speed: "+humanFileSize(Math.round(results.speed/100)/10, true)+"/s");
addRecentResult();
);
/** GUI CRAP HERE **/
// Firefox caches disabled values after page reload, which makes testing a pain
$(".disableIfWorking").attr("disabled", false);
$("#start_measure").click(startMeasure);
$("#bytes").on("input", function()
$("#readableBytes").text(humanFileSize(this.value, true));
);
$("#readableBytes").text(humanFileSize($("#bytes").val()*1||0, true));
function addRecentResult()
var bytes = $("#bytes").val()*1;
var chunks = $("#chunks").val()*1;
var bpch = Math.ceil(bytes/chunks);
var string = '<tr><td class="transfer '+($("#transfer")[0].checked)+'"> </td><td class="speed">'+humanFileSize(results.speed, true)+'/s</td><td class="bytes">'+humanFileSize(bytes, true)+'</td><td class="bpch">'+humanFileSize(bpch, true)+'</td><td class="time">'+results.timeIntegral+'</td></tr>';
if($("#results td.transfer").length==0)
$("#results").append(string);
else
$(string).insertBefore($($("#results td.transfer")[0].parentNode));
function status(text, className)
$("#status_value").text(text);
if(typeof className=="string")
$("#status")[0].className = className;
else
$("#status")[0].className = "";
window.addEventListener("error",function(e)
status(e.message, "error");
// Enable buttons again
$(".disableIfWorking").attr("disabled", false);
);
function startMeasure()
if(Number.isNaN(1*$("#bytes").val()) || Number.isNaN(1*$("#chunks").val()))
return status("Fill the damn fields!", "error");
$(".disableIfWorking").attr("disabled", "disabled");
DataFabricator(1*$("#bytes").val(), 1*$("#chunks").val(), sendData);
/** SENDING DATA HERE **/
function sendData(dataArray, bytes, bytesPerChunk, transfer, currentOffset)
// Initialisation before async recursion
if(typeof currentOffset!="number")
worker.postMessage(type:"expectData", bytes: bytesPerChunk*dataArray.length);
// Reset results
results.timeIntegral = 0;
results.transfered = 0;
results.finish = false;
setTimeout(sendData, 500, dataArray, bytes, bytesPerChunk, $("#transfer")[0].checked, 0);
else
var param1 =
type:"data",
time: performance.now(),
data: dataArray[currentOffset]
;
// I decided it's optimal to write code twice and use if
if(transfer)
worker.postMessage(param1, [dataArray[currentOffset]]);
else
worker.postMessage(param1);
// Allow GC
dataArray[currentOffset] = undefined;
// Increment offset
currentOffset++;
// Continue or re-enable controls
if(currentOffset<dataArray.length)
// Update status
status("Sending data... "+Math.round((currentOffset/dataArray.length)*100)+"% at "+humanFileSize(Math.round(results.speed/100)/10, true)+"/s");
setTimeout(sendData, 100, dataArray, bytes, bytesPerChunk, transfer, currentOffset);
else
//status("Done. Approx speed: "+humanFileSize(Math.round(results.speed/100)/10, true)+"/s");
$(".disableIfWorking").attr("disabled", false);
results.finish = true;
/** CREATING DATA HERE **/
function DataFabricator(bytes, chunks, callback)
var loop;
var args = [
chunks, // How many chunks to create
bytes, // How many bytes to transfer total
Math.ceil(bytes/chunks), // How many bytes per chunk, byt min 1 byte per chunk
0, // Which offset of current chunk are we filling
[], // Array of existing chunks
null, // Currently created chunk
];
// Yeah this is so damn evil it randomly turns bytes in your memory to 666
// ... yes I said BYTES
(loop=function(chunks, bytes, bytesPerChunk, chunkOffset, chunkArray, currentChunk)
var time = performance.now();
// Runs for max 40ms
while(performance.now()-time<40)
if(currentChunk==null)
currentChunk = new Uint8Array(bytesPerChunk);
chunkOffset = 0;
chunkArray.push(currentChunk.buffer);
if(chunkOffset>=currentChunk.length)
// This means the array is full
if(chunkArray.length>=chunks)
break;
else
currentChunk = null;
// Back to the top
continue;
currentChunk[chunkOffset] = Math.floor(Math.random()*256);
// No need to change every value in array
chunkOffset+=Math.floor(bytesPerChunk/5)||1;
// Calculate progress in bytes
var progress = (chunkArray.length-1)*bytesPerChunk+chunkOffset;
status("Generating data - "+(Math.round((progress/(bytesPerChunk*chunks))*1000)/10)+"%");
if(chunkArray.length<chunks || chunkOffset<currentChunk.length)
// NOTE: MODIFYING arguments IS PERFORMANCE KILLER!
Array.prototype.unshift.call(arguments, loop, 5);
setTimeout.apply(null, arguments);
else
callback(chunkArray, bytes, bytesPerChunk);
Array.splice.call(arguments, 0);
).apply(this, args);
/** HELPER FUNCTIONS **/
// Thanks: http://***.com/a/14919494/607407
function humanFileSize(bytes, si)
var thresh = si ? 1000 : 1024;
if(Math.abs(bytes) < thresh)
return bytes + ' B';
var units = si
? ['kB','MB','GB','TB','PB','EB','ZB','YB']
: ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
var u = -1;
do
bytes /= thresh;
++u;
while(Math.abs(bytes) >= thresh && u < units.length - 1);
return bytes.toFixed(1)+' '+units[u];
* margin:0;padding:0
#start_measure
border: 1px solid black;
background-color:orange;
button#start_measure[disabled]
border: 1px solid #333;
font-style: italic;
background-color:#AAA;
width: 100%;
.buttontd
text-align: center;
#status
margin-top: 3px;
border: 1px solid black;
#status.error
color: yellow;
font-weight: bold;
background-color: #FF3214;
#status.error div.status_text
text-decoration: underline;
background-color: red;
#status_value
display: inline-block;
border-left: 1px dotted black;
padding-left: 1em;
div.status_text
display: inline-block;
background-color: #EEE;
#results
width: 100%
#results th
padding: 3px;
border-top:1px solid black;
#results td, #results th
border-right: 1px dotted black;
#results td::first-child, #results th::first-child
border-left: 1px dotted black;
#results td.transfer.false
background-color: red;
#results td.transfer.true
background-color: green;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>Bytes to send total: </td><td><input class="disableIfWorking" id="bytes" type="text" pattern="\d*" placeholder="1024"/></td><td id="readableBytes"></td></tr>
<tr><td>Divide in chunks: </td><td><input class="disableIfWorking" id="chunks" type="text" pattern="\d*" placeholder="number of chunks"/></td><td></td></tr>
<tr><td>Use transfer: </td><td> <input class="disableIfWorking" id="transfer" type="checkbox" checked /></td><td></td></tr>
<tr><td colspan="2" class="buttontd"><button id="start_measure" class="disableIfWorking">Start measuring speed</button></td><td></td></tr>
</table>
<div id="status"><div class="status_text">Status </div><span id="status_value">idle</span></div>
<h2>Recent results:</h2>
<table id="results" cellpading="0" cellspacing="0">
<tr><th>transfer</th><th>Speed</th><th>Volume</th><th>Per chunk</th><th>Time (only transfer)</th></tr>
</table>2。缓冲
我将继续使用鼠标指针示例，因为它很容易模拟。我们将编写一个使用 web worker 计算鼠标指针路径距离的程序。
我们要做的是真正的老式缓冲。我们制作了一个固定大小的数组（只有那些允许转移到工作人员）并在记住我们填充的最后一点的同时填充它。当我们结束时，我们可以发送数组并创建另一个。
// Creating a buffer
this.buffer = new Uint16Array(256);
this.bufferOffset = 0;
那么我们可以很容易地保存坐标，只要我们不让bufferOffset溢出buffer：
if(this.bufferOffset>=this.buffer.length)
this.sendAndResetBuffer();
this.buffer[this.bufferOffset++] = X;
this.buffer[this.bufferOffset++] = Y;
3。传输数据
你已经在 MDN 上看到过这个例子（对吧...？），所以只是快速回顾一下：
worker.postMessage(myTypedArray.buffer, [myTypedArray.buffer]);
// The buffer must be empty now!
console.assert(myTypedArray.buffer.byteLength==0)
4。缓冲区伪类
这是我用来缓冲和发送数据的。该类是使用所需的最大缓冲区长度创建的。然后它存储数据（在本例中为指针位置）并分派给 Worker。
/** MousePointerBuffer saves mouse locations and when it's buffer is full,
sends them as array to the web worker.
* worker - valid worker object ready to accept messages
* buffer_size - size of the buffer, in BYTES, not numbers or points
**/
function MousePointerBuffer(worker, buffer_size)
this.worker = worker;
if(buffer_size%4!=0)
throw new Error("MousePointerBuffer requires complement of 4 bytes number, because 1 mouse point is 2 shorts which is 4 bytes!");
this.buffer_size = buffer_size/2;
// Make buffer lazy
this.buffer = null;
this.bufferOffset = 0;
// This will print the aproximate time taken to send data + all of the overheads
worker.addEventListener("message", function(e)
if(e.data.type=="timer")
console.log("Approximate time: ", e.data.time-this.lastSentTime);
.bind(this));
MousePointerBuffer.prototype.makeBuffer = function()
if(this.buffer!=null)
// Buffer created and not full
if(this.bufferOffset<this.buffer_size)
return;
// Buffer full, send it then re-create
else
this.sendBuffer();
this.buffer = new Uint16Array(this.buffer_size);
this.bufferOffset = 0;
/** Sends current buffer, even if not full. Data is sent as array
[ArrayBuffer buffer, Number bufferLength] where buffer length means
occupied bytes. **/
MousePointerBuffer.prototype.sendBuffer = function()
this.lastSentTime = performance.now();
console.log("Sending ",this.buffer.buffer.byteLength," bytes at: ",this.lastSentTime);
this.worker.postMessage([this.buffer.buffer, this.bufferOffset]
, [this.buffer.buffer] // Comment this line out to see
// How fast is it without transfer
);
// See? Bytes are gone.
console.log("Bytes in buffer after sending: ",this.buffer.buffer.byteLength);
this.buffer = null;
this.bufferOffset = 0;
/* Creates event callback for mouse move events. Callback is stored in
.listener property for later removal **/
MousePointerBuffer.prototype.startRecording = function()
// The || expression alows to use cached listener from the past
this.listener = this.listener||this.recordPointerEvent.bind(this);
window.addEventListener("mousemove", this.listener);
/* Can be used to stop any time, doesn't send buffer though! **/
MousePointerBuffer.prototype.stopRecording = function()
window.removeEventListener("mousemove", this.listener);
MousePointerBuffer.prototype.recordPointerEvent = function(event)
// This is probably not very efficient but makes code shorter
// Of course 90% time that function call just returns immediatelly
this.makeBuffer();
// Save numbers - remember that ++ first returns then increments
this.buffer[this.bufferOffset++] = event.clientX;
this.buffer[this.bufferOffset++] = event.clientY;
4。实例
function WorkerFN()
console.log('WORKER: Worker ready for data.');
// Variable to store mouse pointer path distance
var dist = 0;
// Last coordinates from last iteration - filled by first iteration
var last_x = null,
last_y = null;
// Sums pythagorian distances between points
function calcPath(array, lastPoint)
var i=0;
// If first iteration, first point is the inital one
if(last_x==null||last_y==null)
last_x = array[0];
last_y = array[1];
// So first point is already skipped
i+=2;
// We're iterating by 2 so redyce final length by 1
var l=lastPoint-1
// Now loop trough points and calculate distances
for(; i<l; i+=2)
console.log(dist,last_x, last_y);
dist+=Math.sqrt((last_x-array[i]) * (last_x-array[i])+
(last_y-array[i+1])*(last_y-array[i+1])
);
last_x = array[i];
last_y = array[i+1];
// Tell the browser about the distance
self.postMessage(type:"dist", dist: dist);
self.onmessage = function(e)
if(e.data instanceof Array)
self.postMessage(type:'timer', time:performance.now());
setTimeout(calcPath, 0, new Uint16Array(e.data[0]), e.data[1]);
else if(e.data.type=="reset")
self.postMessage(type:"dist", dist: dist=0);
var worker = new Worker(URL.createObjectURL(new Blob(["("+WorkerFN.toString()+")()"], type: 'text/javascript')));
/** MousePointerBuffer saves mouse locations and when it's buffer is full,
sends them as array to the web worker.
* worker - valid worker object ready to accept messages
* buffer_size - size of the buffer, in BYTES, not numbers or points
**/
function MousePointerBuffer(worker, buffer_size)
this.worker = worker;
if(buffer_size%4!=0)
throw new Error("MousePointerBuffer requires complement of 4 bytes number, because 1 mouse point is 2 shorts which is 4 bytes!");
this.buffer_size = buffer_size/2;
// Make buffer lazy
this.buffer = null;
this.bufferOffset = 0;
// This will print the aproximate time taken to send data + all of the overheads
worker.addEventListener("message", function(e)
if(e.data.type=="timer")
console.log("Approximate time: ", e.data.time-this.lastSentTime);
.bind(this));
MousePointerBuffer.prototype.makeBuffer = function()
if(this.buffer!=null)
// Buffer created and not full
if(this.bufferOffset<this.buffer_size)
return;
// Buffer full, send it then re-create
else
this.sendBuffer();
this.buffer = new Uint16Array(this.buffer_size);
this.bufferOffset = 0;
/** Sends current buffer, even if not full. Data is sent as array
[ArrayBuffer buffer, Number bufferLength] where buffer length means
occupied bytes. **/
MousePointerBuffer.prototype.sendBuffer = function()
this.lastSentTime = performance.now();
console.log("Sending ",this.buffer.buffer.byteLength," bytes at: ",this.lastSentTime);
this.worker.postMessage([this.buffer.buffer, this.bufferOffset]
, [this.buffer.buffer] // Comment this line out to see
// How fast is it without transfer
);
// See? Bytes are gone.
console.log("Bytes in buffer after sending: ",this.buffer.buffer.byteLength);
this.buffer = null;
this.bufferOffset = 0;
/* Creates event callback for mouse move events. Callback is stored in
.listener property for later removal **/
MousePointerBuffer.prototype.startRecording = function()
// The || expression alows to use cached listener from the past
this.listener = this.listener||this.recordPointerEvent.bind(this);
window.addEventListener("mousemove", this.listener);
/* Can be used to stop any time, doesn't send buffer though! **/
MousePointerBuffer.prototype.stopRecording = function()
window.removeEventListener("mousemove", this.listener);
MousePointerBuffer.prototype.recordPointerEvent = function(event)
// This is probably not very efficient but makes code shorter
// Of course 90% time that function call just returns immediatelly
this.makeBuffer();
// Save numbers - remember that ++ first returns then increments
this.buffer[this.bufferOffset++] = event.clientX;
this.buffer[this.bufferOffset++] = event.clientY;
var buffer = new MousePointerBuffer(worker, 400);
buffer.startRecording();
// Cache text node reffernce here
var textNode = document.getElementById("px").childNodes[0];
worker.addEventListener("message", function(e)
if(e.data.type=="dist")
textNode.data=Math.round(e.data.dist);
);
// The reset button
document.getElementById("reset").addEventListener("click", function()
worker.postMessage(type:"reset");
buffer.buffer = new Uint16Array(buffer.buffer_size);
buffer.bufferOffset = 0;
);* margin:0;padding:0;
#px
font-family: "Courier new", monospace;
min-width:100px;
display: inline-block;
text-align: right;
#square
width: 200px;
height: 200px;
border: 1px dashed red;
display:table-cell;
text-align: center;
vertical-align: middle;
Distance traveled: <span id="px">0</span> pixels<br />
<button id="reset">Reset</button>
Try this, if you hve steady hand, you will make it 800px around:
<div id="square">200x200 pixels</div>
This demo is printing into normal browser console, so take a look there.4.1 demo中的相关行
在线110类被初始化，所以可以改变缓冲区长度：
var buffer = new MousePointerBuffer(worker, 400);
在83行，可以注释掉transfer命令来模拟正常的复制操作。在我看来，在这种情况下差异真的微不足道：
, [this.buffer.buffer] // Comment this line out to see
// How fast is it without transfer
【讨论】：
【参考方案2】：它们与运行它的 cpu 内核一样快。话虽如此，进程之间的通信总是会产生一些开销，因此批处理它可能会为您带来一些额外的性能。就我个人而言，我可能会使用计时器每 25 毫秒发送一次鼠标位置或位置历史记录。
您应该问自己的问题是：您需要多久更新一次？每秒更新 1 次就够了吗？ 100？ 1000？什么时候你只是在消耗 CPU 周期而没有任何附加值。
【讨论】：
我什至还不知道更新。例如，假设处理将仅在最后发生。在那之前，所有发送的消息都只是关于存储数据。 我知道例如，如果您不能使用可转移对象，您至少必须考虑复制所有可能已经不那么微不足道的数据的时间。 那么考虑到我猜如果没有真正的传输时间，最好是迭代发送数据？也许你甚至不需要缓冲它。 进程之间总会有一些传输时间，所以缓冲仍然是个好主意。如果你真的需要所有的数据，不要只用固定的缓冲区大小或固定的传输间隔发送它们。 @QuentinRoy 在阅读您的问题时，我没有注意到您不能使用可转移对象，因此我发布了一个答案，确实 使用了可转移对象。我花了这么多时间在它上面有点令人沮丧。你确定不能使用可移植接口吗？以上是关于Web Worker 的消息有多快？的主要内容，如果未能解决你的问题，请参考以下文章