Web worker的消息有多快?

你可以缓冲Uint16Array ¹中的数据。然后，您可以做一个小技巧，将移动数据，而不是复制。有关介绍，请参阅MDN上的演示。

^{1:对于像素密度为0.25像素/毫米的小于16x16米的屏幕应该足够了，我相信这是世界上大多数屏幕}

<标题> 1。有多快?

首先回答你的问题，让我们测试一下web worker的速度。

我创建了这个测试片段，它试图测量工人的实际速度。但是尝试在这里很重要。真的，我发现只有可靠的测量时间的方法才能影响时间，就像我们在现代物理理论中所经历的那样。

代码明确地告诉我们缓冲是一个好主意。第一个文本框设置要发送的total数据量。第二步设置要划分数据的样本数量。您很快就会发现，使用样本的开销非常大。复选框允许您选择是否传输数据。正如预期的那样，随着数据量的增加，这一点开始变得重要起来。

请原谅混乱的代码，我不能强迫自己在编写令人兴奋的测试片段时表现。我创建了这个

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://stackoverflow.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。缓冲h1>

我们要做的是真正的，老派的缓冲。我们制作一个固定大小的数组(只有那些允许转移到工人)并填充它，同时记住上次填充的点。当我们在结束时，我们可以发送数组并创建另一个。

// 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。生活例子h1> P_8

* {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

它们和运行它的cpu核心一样快。话虽如此，进程之间的通信总是会产生一些开销，因此批处理可能会为您带来一些额外的性能。就我个人而言，我可能会使用计时器每隔25毫秒发送鼠标位置或位置历史。

你应该问自己的问题是:你多久需要更新一次?每秒一次更新是否足够?100年?1000年?在什么情况下，你只是在消耗cpu周期而没有任何附加价值。