lambdaspeech :: webworker6

2 | list | login |load

| |

_h1 web workers

_p Following [[the-guide-to-parallel-programming-in-javascript|http://madhugnadig.com/articles/parallel-processing/2017/03/29/the-guide-to-parallel-programming-in-javascript.html]], this page uses two external scripts stored in two wiki pages, [[lib_QS_worker]] and [[lib_MS_worker]], which quickSort and mergeSort a given array (10000 and more...). A third script is added to this page with a very CPU consuming naïve version of Fibonacci:

{pre °°
var FIB = function(n) {

var fibo = function (n) {
    return (n < 2)? 1 : (fibo(n-1) + fibo(n-2))
  };

postMessage( (function(n) {
    var t0 = new Date().getTime();
    var f = fibo(n);
    var t1 = new Date().getTime();
    return "(** in " + (t1-t0) + " milli seconds: **) " + f
  })(n) )

};
°°}

_p The following script creates the three workers and displays results:

{pre °°
var work = function (W,d,id) {
// 1) serialize functions and data
  var json = ["(", W, ")("+JSON.stringify(d)+")".toString()];
// 2) create the worker
  var data = new Blob(json, { type: "text/javascript" });
  var worker = new Worker(URL.createObjectURL(data));
// 3) what to do when receiving result from the worker
  worker.onmessage = function (e) {
    document.getElementById(id).innerHTML = "Result : " + e.data; 
  };
};

var init = function (N) {
  if (!window.Worker) return;
  var URL = window.URL || (window.webkitURL);

// 1) build data:
  var array = [], i = N;
  for (; i > 0; i--) { array.push(Math.round(Math.random()*1000)); }
 
// 2) throw works:
  work(QS, array, 'QS');   // QS, MS, FIB functions build the workers
  work(MS, array, 'MS');   // array and 43 are datas sent to workers
  work(FIB, 43, 'FIB');    // 'QS', 'MS', 'FIB' are outputs' identificators
  // and so on ...
};

setTimeout( init, 10, 1000 )   // array's length is equal to 1000
°°}

_p Open the page's editor to test another value for N, say N = 100000 and more.
_p See also 
_ul [[web-workers-le-monde-parallele-du-javascript|http://sdz.tdct.org/sdz/ml5-web-workers-le-monde-parallele-du-javascript.html]]
_ul [[https://parallel.js.org/|https://parallel.js.org/]]
_ul [[parallel-javascript-with-paralleljs/|https://www.sitepoint.com/parallel-javascript-with-paralleljs/]]
_ul [[what-about-multiple-core-load-management-with-web-workers|https://stackoverflow.com/questions/23621883/what-about-multiple-core-load-management-with-web-workers]]
_ul ...
 
_h2 testing

_h3 1) fibonacci
{pre {@ id="FIB" style="word-wrap: break-word; white-space:pre-wrap;"}wait fibonacci ...}

_h3 2) quickSort
{pre {@ id="QS" style="word-wrap: break-word; white-space:pre-wrap;"}wait quickSort ...}

_h3 3) mergeSort
{pre {@ id="MS" style="word-wrap: break-word; white-space:pre-wrap;"}wait mergeSort ...}

{require lib_QS_worker lib_MS_worker}

{script ;;
var FIB = function(n) {
  var fibo = function (n) {
    return (n < 2)? 1 : (fibo(n-1) + fibo(n-2))
  };

postMessage( (function(n) {
  var t0 = new Date().getTime();
  var f = fibo(n);
  var t1 = new Date().getTime();
  return "(** in " + (t1-t0) + " milli seconds: **) " + f
})(n))
};

}

{script ;;
var work = function (W,d,id) {
  var w = ["(", W, ")("+JSON.stringify(d)+")".toString()];
  var w_data = new Blob(w, { type: "text/javascript" });
  var w_worker = new Worker(URL.createObjectURL(w_data));
  w_worker.onmessage = function (e) { document.getElementById(id).innerHTML = "Result : " + e.data; };
/*
  var i = 0;
  setInterval( function() { 
    document.getElementById(id).innerHTML += " (" + i + ")";
    i++;
  }, 1000)
*/
};

var init = function (N) {
  if (!window.Worker) return false;
  var URL = window.URL || (window.webkitURL);

var array = [], i = N;
  for (; i > 0; i--) { array.push(Math.round(Math.random()*1000)); }
 
  document.getElementById('QS').innerHTML = "wait quickSort...";
  document.getElementById('MS').innerHTML = "wait mergeSort..."; 
  document.getElementById('FIB').innerHTML = "wait fibonacci...";

work(QS, array, 'QS');
  work(MS, array, 'MS');
  work(FIB, 43, 'FIB');
};

setTimeout( init, 10, 1000 ) 
}

{style ;;
pre { box-shadow:0 0 8px #000; padding:5px; background:#eee; }
}