HTML5 Web Worker

Web Worker is a JavaScript multithreading solution provided by HTML5. we can put some compute intensive codes into Web Worker and it will not hang the user interface.

1. How to use Web Worker

Web Worker's basic mechanism is to use Worker to load a JavaScript file to create a new thread in JavaScript's main thread. It will not block other thread's execution and will provide a data exchange interface between main thread and new thread : postMessage() and onmessage.

Let's look at an example:

//worker.js
onmessage =function (evt){
  var d = evt.data;//Get sent data with evt.data
  postMessage( d );//Send message to the main thread
}

HTML Page : test.html

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <script type="text/javascript">
//WEB Main Thread
var worker =new Worker("worker.js"); //Create a Worker thread and put an URL to load the script
 worker.postMessage("hello world");     //Send data to worker
 worker.onmessage =function(evt){     //Receive data from worker
   console.log(evt.data);              //Output data sent by worker
 }
 script>
 head>
 <body>body>
html>

Open test.html page with Chrome, the console will output "hello world" if it executes successfully.

We can find Web Worker's execution can be viewed as :

WEB main thread:

1. Through worker=new Worker(url) to load a JS file to create a new worker and return a worker instance;

2. Send data to worker with worker.postMessage(data)

3. Bind worker.onmessage to receive data from worker

4. We can use worker.terminate() to terminate the execution of a worker.

worker new thread:

1. Send data to main thread with postMessage(data)

2. Bind onmessage to receive data from main thread.

2. What can Worker do

After knowing how to use Web Worker, then what problems can it solve for us? We can take fibonacci array as an example.

In math, fibonacci array is defined as recursive: F0=0,F1=1,Fn=F(n-1)+F(n-2) ï¼ˆn>=2ï¼Œn∈N*ï¼‰. Use normal JavaScript, it's :

var fibonacci =function(n) {
    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
//fibonacci(36)

When n is 39, the execution time is 19097 ms in Chrome, if n is 40, the browser will prompt that the script is long running.

Because JavaScript is single threaded, when calculate the fibonacci, it cannot execute other scripts, UI rendering thread will also hang. With Web Worker, we can put the calculation into a new thread to avoid the hang of UI.

//fibonacci.js
var fibonacci =function(n) {
    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
onmessage =function(event) {
    var n = parseInt(event.data, 10);
    postMessage(fibonacci(n));
};

HTML Page, fibonacci.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>web worker fibonaccititle>
<script type="text/javascript">
  onload =function(){
      var worker =new Worker('fibonacci.js');  
      worker.addEventListener('message', function(event) {
        var timer2 = (new Date()).valueOf();
           console.log( 'ç»“æžœï¼š'+event.data, 'æ—¶é—´:'+ timer2, 'ç”¨æ—¶ï¼š'+ ( timer2  - timer ) );
      }, false);
      var timer = (new Date()).valueOf();
      console.log('å¼€å§‹è®¡ç®—ï¼š40','æ—¶é—´:'+ timer );
      setTimeout(function(){
          console.log('å®šæ—¶å™¨å‡½æ•°åœ¨è®¡ç®—æ•°åˆ—æ—¶æ‰§è¡Œäº†', 'æ—¶é—´:'+ (new Date()).valueOf() );
      },1000);
      worker.postMessage(40);
      console.log('æˆ‘åœ¨è®¡ç®—æ•°åˆ—çš„æ—¶å€™æ‰§è¡Œäº†', 'æ—¶é—´:'+ (new Date()).valueOf() );
  }  
  script>
head>
<body>
body>
html>

Open fibonacci.html in Chrome, the output will be:

å¼€å§‹è®¡ç®—ï¼š40 æ—¶é—´:1316508212705
æˆ‘åœ¨è®¡ç®—æ•°åˆ—çš„æ—¶å€™æ‰§è¡Œäº† æ—¶é—´:1316508212734
å®šæ—¶å™¨å‡½æ•°åœ¨è®¡ç®—æ•°åˆ—æ—¶æ‰§è¡Œäº† æ—¶é—´:1316508213735
ç»“æžœï¼š102334155 æ—¶é—´:1316508262820 ç”¨æ—¶ï¼š50115

This example explains that when the worker executes the fibonacci array calculation, it will not affect the execution of main thread, it will execute in its own thread and return the result to the main thread after completion of calculation.

3. Other uses of Worker

We now know that Worker will create a new thread by accepting a URL, then can we use web worker to do some jsonp like requests? We know that jsonp is to load json data by adding script tags, while script elements are blocking when loading and executing. We can use web worker here.

The following example will load some 169.42 KB JSON data.

// /aj/webWorker/core.js
function $E(id) {
    return document.getElementById(id);
}
onload =function() {
    //é€šè¿‡web workeråŠ è½½
    $E('workerLoad').onclick =function() {
        var url ='http://js.wcdn.cn/aj/mblog/face2';
        var d = (new Date()).valueOf();
        var worker =new Worker(url);
        worker.onmessage =function(obj) {
            console.log('web worker: '+ ((new Date()).valueOf() - d));
        };
    };
    //é€šè¿‡jsonpåŠ è½½
    $E('jsonpLoad').onclick =function() {
        var url ='http://js.wcdn.cn/aj/mblog/face1';
        var d = (new Date()).valueOf();
        STK.core.io.scriptLoader({
            method:'post',
            url : url,
            onComplete : function() {
                console.log('jsonp: '+ ((new Date()).valueOf() - d));
            }
        });
    };
    //é€šè¿‡ajaxåŠ è½½
    $E('ajaxLoad').onclick =function() {
        var url ='http://js.wcdn.cn/aj/mblog/face';
        var d = (new Date()).valueOf();
        STK.core.io.ajax({
            url : url,
            onComplete : function(json) {
                console.log('ajax: '+ ((new Date()).valueOf() - d));
            }
        });
    };
};

HTML page: /aj/webWorker/worker.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Worker example: load datatitle>
<script src="http://js.t.sinajs.cn/STK/js/gaea.1.14.js" type="text/javascript">script>
<script type="text/javascript" src="http://js.wcdn.cn/aj/webWorker/core.js">script>
head>
<body>
    <input type="button" id="workerLoad" value="web workeråŠ è½½">input>
    <input type="button" id="jsonpLoad" value="jsonpåŠ è½½">input>
    <input type="button" id="ajaxLoad" value="ajaxåŠ è½½">input>
body>
html>