javascript - How fast are Web Worker's messages?

Question

I wondered if transmission to or from a web worker can be a bottleneck. Should we post message just as we trigger any kind of events, or should we take care and try to limit as much as possible the communication between the two ?

Let's have an example. If I have a huge array that is dynamically constructed (e.g. an array of contact points coming from mousemove or touchmove for a gesture recogniser), is it more efficient to transfer the data iteratively – i.e. send each element as soon as we receive it and let the worker store them on its side – or is it better to store them on the main thread and send all the data at once at the end, in particular when one cannot use a transferable object?

Answer 1

Well you can buffer the data in Uint16Array¹. You can then do a little trick and move the data instead of copying. See this demo on MDN for an introduction.

^{1: should be enough for screens smaller than 16x16 meters at pixel density 0.25 pixels per milimeter, which I believe is most screens on the world}

1. How fast?

First to your question, let's test the web workers speed.

I created this test snippet that attempts to measure actual speed of workers. But attempts is important here. Truly I figured out that only reliable way of measuring the time will affect the time, much like what we experience in modern physic theories.

What the code definitely can tell us is that buffering is a good idea. First textbox sets the total amount of data to be sent. Second sets the number of samples to divide the data in. You'll soon find out that overhead with samples is notable. Checkbox allows you to chose whether to transfer data or not. This starts to matter with bigger amount of data, just as anticipated.

Please forgive the messy code, I can't force myself to behave when writing exciting test snippets. I created this 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://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&