HTML5 Hacks - Web Workers - highComp.js

ai-library-init.js

// 3. generate DOM movement
    var i = -1;
    while (i++ < num) {
       characters[i] = new Character(400, 300, i);
       characters[i].start();
       characterMap[characters[i].id] = characters[i];
    }

ai-library-spawn.js

// 1. spawn worker
var worker = new Worker("aiWorker.js");

// 2. set up a listener, to updateCharacter when data returns
worker.onmessage = function(e){
  updateCharacter(e.data);
}

ai-library-timers.js

// 1. create invokeWorker()
var invokeWorker = function(action) {
   worker.postMessage({
      'action': action,
      'characters': characters
   });
};

// 2. start snapshot timers
    var intervals = [];
    intervals[1] = window.setInterval(invokeWorker.curry('rainToBelow'),1000);
    intervals[2] = window.setInterval(invokeWorker.curry('umbrellaToSky'),1000);
    intervals[3] = window.setInterval(invokeWorker.curry('erradicateSlowest'),1000);
}

ai-library.js

// 3. Do Heavy Processing (Array Sorting) and PostMessage back
var Actions = {
	rainToBelow: function(){
		var highest = characters.sort(function(a, b){
			return a.y - b.y
		});
		// ...			
		postMessage(updates);		
	},
	umbrellaToSky: function(){
		// ...	
		postMessage(updates);		
	},
	erradicateSlowest: function(){
		// ...
		postMessage(updates);		
	}	
}

computations-library-spawn.js

// Computations Library Worker Spawn

var message = {"compfn": create2Darray, "row": 1000, "col": 1000} 

var worker = new Worker('computations-library.js');

worker.postMessage(JSON.stringify(message));

worker.addEventListener('message', function(event){
     
   // do something with the computated data

   }, false);

computations-library.js

// Worker Basic API Pattern

var Computations = {
  create2Darray: function (data) {
      //code
      postMessage(computatedData);
  },
  sortRandomArray: function (msg) {
      //code
      postMessage(computatedData);
  }
};

self.addEventListener('message', function(e) {
    var msg = JSON.parse(e.data);
    var computated = Computations[msg.compfn](msg);
    
}, false);

highComp-simple.js

function init() {

  // increase these integers to lock up the browser
  var r = 1000;
  var c = 1000;
  var a = new Array(r);

  for (var i = 0; i < r; i++) {
    a[i] = new Array(c);

      for (var j = 0; j < c; j++) {
        a[i][j] = "[" + i + "," + j + "]";
      }
  }
  document.getElementById('result').textContent = a;
}
	
button.onclick = init;

highComp.js

// Procedural JavaScript that does high computation to lock up the Single Thread
var box;

function goRight() {
  box.style.left = parseInt(box.style.left)+1+'px';
  setTimeout(goRight,2); // call goRight in 200msec
}


function init() {

  // increase these integers to lock up the browser
  var r = 1000;
  var c = 1000;
  var a = new Array(r);

  for (var i = 0; i < r; i++) {
    a[i] = new Array(c);

      for (var j = 0; j < c; j++) {
        a[i][j] = "[" + i + "," + j + "]";
      }
  }
  document.getElementById('result').textContent = a;
		
  box = document.getElementById('box'); // get the "box" object
  box.style.left = '0px'; // set its initial position to 0px
  		
  goRight(); // start animating to the right
}
	
window.onload = init;

spawn.js

// Simple Worker Spawn from Main Thread

var message = {"row": 1000, "col": 1000}

var worker = new Worker('worker.js');

worker.postMessage(JSON.stringify(message));

worker.addEventListener('message', function(event){
     
   // do something with the computated data

   }, false);

worker.js

// Move high Computation to the Worker
self.addEventListener('message', function(e) {
   var msg = JSON.parse(e.data);

   var r = msg.row;
   var c = msg.col;
   var a = new Array(r);

   for (var i = 0; i < r; i++) {
  		a[i] = new Array(c);

    		for (var j = 0; j < c; j++) {
     			a[i][j] = "[" + i + "," + j + "]";
    		}
   }
   postMessage(a);
}, false);