Web Worker 的消息有多快？
How fast are Web Worker's messages?
我想知道与 Web Worker 之间的传输是否会成为瓶颈。
我们应该 post 在触发任何类型的事件时发送消息，还是应该注意并尽可能限制两者之间的通信？
让我们举个例子。如果我有一个动态构建的巨大数组（例如，来自手势识别器的 mousemove 或 touchmove 的接触点数组），迭代传输数据是否更有效——即发送每个元素一旦我们收到它并让 worker 将它们存储在它的一侧 – 或者将它们存储在主线程上并在最后一次发送所有数据更好，特别是当一个人不能使用可传输对象时？
它们与 cpu 核心一样快，即 运行 它。话虽如此，进程之间的通信总是会产生一些开销，因此批处理可能会给您带来一些额外的性能。我个人可能会使用计时器每 25 毫秒发送一次鼠标位置或位置历史记录。
您应该问自己的问题是：您需要多久更新一次？每秒 1 次更新是否足够？ 100？ 1000？在什么时候你只是燃烧 cpu 周期而没有附加值。
嗯，你可以在Uint16Array1中缓冲数据。然后您可以使用一些小技巧 移动 数据而不是复制。有关介绍，请参阅 this demo on MDN。
1: 对于小于 16x16 米的屏幕应该足够了，像素密度为每毫米 0.25 像素，我相信这是世界上大多数屏幕
1。有多快？
首先针对你的问题，让我们测试一下网络工作者的速度。
我创建了这个测试片段，试图测量工人的实际速度。但是 attempts 在这里很重要。真的，我发现只有可靠的时间测量方法才会 影响 时间，就像我们在现代物理学理论中所经历的那样。
代码绝对可以告诉我们缓冲是个好主意。第一个文本框设置 total 要发送的数据量。第二个设置用于划分数据的样本数。您很快就会发现样本的开销是显着的。复选框允许您选择是否传输数据。正如预期的那样，这对于更大的数据量开始变得重要。
请原谅乱七八糟的代码，在写激动人心的测试片段时，我不能强迫自己表现。
我创建了这个 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:
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。缓冲区伪 class
这是我用来缓冲和发送数据的。 class 是用所需的最大缓冲区长度创建的。然后它存储数据（在本例中为指针位置）并分发给 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 class 已初始化，因此您可以更改缓冲区长度：
var buffer = new MousePointerBuffer(worker, 400);
在线83，可以注释掉transfer命令来模拟正常的复制操作。在我看来，在这种情况下差异真的微不足道：
, [this.buffer.buffer] // Comment this line out to see
// How fast is it without transfer
我想知道与 Web Worker 之间的传输是否会成为瓶颈。 我们应该 post 在触发任何类型的事件时发送消息，还是应该注意并尽可能限制两者之间的通信？
让我们举个例子。如果我有一个动态构建的巨大数组（例如，来自手势识别器的 mousemove 或 touchmove 的接触点数组），迭代传输数据是否更有效——即发送每个元素一旦我们收到它并让 worker 将它们存储在它的一侧 – 或者将它们存储在主线程上并在最后一次发送所有数据更好，特别是当一个人不能使用可传输对象时？
它们与 cpu 核心一样快，即 运行 它。话虽如此，进程之间的通信总是会产生一些开销，因此批处理可能会给您带来一些额外的性能。我个人可能会使用计时器每 25 毫秒发送一次鼠标位置或位置历史记录。
您应该问自己的问题是：您需要多久更新一次？每秒 1 次更新是否足够？ 100？ 1000？在什么时候你只是燃烧 cpu 周期而没有附加值。
嗯，你可以在Uint16Array1中缓冲数据。然后您可以使用一些小技巧 移动 数据而不是复制。有关介绍，请参阅 this demo on MDN。
1: 对于小于 16x16 米的屏幕应该足够了，像素密度为每毫米 0.25 像素，我相信这是世界上大多数屏幕
1。有多快？
首先针对你的问题，让我们测试一下网络工作者的速度。
我创建了这个测试片段，试图测量工人的实际速度。但是 attempts 在这里很重要。真的，我发现只有可靠的时间测量方法才会 影响 时间，就像我们在现代物理学理论中所经历的那样。
代码绝对可以告诉我们缓冲是个好主意。第一个文本框设置 total 要发送的数据量。第二个设置用于划分数据的样本数。您很快就会发现样本的开销是显着的。复选框允许您选择是否传输数据。正如预期的那样，这对于更大的数据量开始变得重要。
请原谅乱七八糟的代码，在写激动人心的测试片段时，我不能强迫自己表现。 我创建了这个 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:
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。缓冲区伪 class
这是我用来缓冲和发送数据的。 class 是用所需的最大缓冲区长度创建的。然后它存储数据（在本例中为指针位置）并分发给 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 class 已初始化，因此您可以更改缓冲区长度：
var buffer = new MousePointerBuffer(worker, 400);
在线83，可以注释掉transfer命令来模拟正常的复制操作。在我看来，在这种情况下差异真的微不足道：
, [this.buffer.buffer] // Comment this line out to see
// How fast is it without transfer