WEB Workers提升WEB前端脚本JavaScript的处理性能

你有没有想过在运行大型复杂的JavaScript脚本的时候不会发生浏览器假死？

你有没有想过JavaScript可以在后台运行？

你有没有想过JavaScript函数甚至可以在多个进程中同时运行？


不可能？当你看完本文，也许会让你感觉很兴奋！


什么是Web Workers？

Web Workers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers就可以通过postMessage()向任务池发送任务请求，执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序(通过onmessage进行捕获)。

Web Workers进程能够在不影响用户界面的情况下处理任务，并且，它还可以使用XMLHttpRequest来处理I/O，无论responseXML和channel属性是否为null。

注意：通常，后台进程（包括web workers进程）不能对DOM进行操作。如果希望后台程序处理的结果能够改变DOM，只能通过返回消息给创建者的回调函数进行处理。


浏览器支持：

FireFox3.5(Firefox 3.1 support for DOM workers)
Safari4
支持html5的浏览器


进程安全

Workers接口可以创建真正的系统级别的进程，如果你不小心的话，你的代码很容易引起并发操作效果，这将会很有趣。


在Mozilla下，Workser并发操作常发生在：

1、在做网站下载的时候使用Worker。

2、使用Worker实现处理扩展功能。

创建一个Worker

我们可以很简单地创建一个worker，只要调用Worker(URI)构造函数即可。参数URI，要执行的脚本文件地址。
如果你想获取worker进程的返回值，可以通过它的onmessage属性来绑定一个事件处理程序，如：

var myWorker = new Worker('easyui.js');
myWorker.onmessage = function(event){
    alert('Called back by the worker!');
};

第一行用来创建和运行worker进程，第二行设置worker的onmessage属性用来绑定指定的事件处理程序,当worker私有的postMessage()方法被调用时，这个被绑定的程序就会被触发。


创建一个subworkers

如果原意，你可以创建多个workers。subworkers必须寄宿于同一个父页面下，并且，它的URI必须与parent worker的地址同源。这样可以很好的维持它们的依赖关系。


Timeouts 和 intervals

Workers可以使用timeouts和intervals。这很有用，例如，如果你想让你的worker进程周期性地运行而不是不停的循环下去的话，你就可以使用了。

参见:setTimeout(),clearTimeout(),setInterval(),clearInterval()


终止 worker

如果你需要马上终止一个正在运行中的worker,你可以调用它的terminate()方法：

myWorker.terminate();

这样，一个worker进程就被结束了。


错误捕获 Handling errors

当worker发生运行时错误时，它的onerror事件就会被触发。该事件接收一个error的事件，该事件不会冒泡，并且可以取消。要取消该事件可以使用preventDefault()方法。

此错误事件有3个属性：

message:可读的错误信息

filename:发生错误的脚本文件名称

lineno:发生错误的脚本所在文件的行数


访问navigator对象

Workers可以访问navigator对象，它包含下面可以用来标示浏览器的字符：

appName

appVersion

platform

userAgent


导入脚本和库

Worker进程可以访问全局函数importScripts()，该方法可以将脚本或库导入到它们的作用域中。

此方法可以接受空的参数或多个脚本URI参数，下面这些形式都是合法的：

importScripts();/* imports nothing */
importScripts('foo.js');/* import just "foo.js" */
importScripts('foo.js','bar.js');/* imports two scripts */

Firefox会加载列出的每一个脚本文件，然后运行并初始化。这些脚本中的任何全局对象都可以被worker使用。

注意：脚本下载可能顺序不一样，但，执行的顺序一定是按importScripts中列出的顺序进行，而且是同步的，在所有脚本加载完并运行结束后importScripts才会返回。


演示

这部分，我们将演示如何使用DOM Workers.


在后台执行指令

Workers的一个很有用的方法就是使得你的代码可以在后台运行，而不影响用户界面。下面，我们来演示一下使用worker进行Fibonacci数列的计算。

JavaScript代码：

下面的Javascript代码保存到 fibonacci.js 文件

JScript code

   
   

    
    
    
    

    
    var
    
     results 
    
    =
    
     [];


    
    var
    
     resultReceiver 
    
    =
    
     
    
    function
    
    (event){
    results.push(parseInt(event.data,
    
    10
    
    ));
    
    
    if
    
    (results.length
    
    ==
    
    2
    
    ){
        postMessage(results[
    
    0
    
    ]
    
    +
    
    results[
    
    1
    
    ]);
    }
};


    
    var
    
     errorReceiver 
    
    =
    
     
    
    function
    
    (event){
    
    
    throw
    
     event.data;
};


    
    var
    
     onmessage 
    
    =
    
     
    
    function
    
    (event){
    
    
    var
    
     n 
    
    =
    
     parseInt(event.data,
    
    10
    
    );
    
    
    if
    
    (n
    
    ==
    
    0
    
    ||
    
    n
    
    ==
    
    1
    
    ){
        postMessage(n);
        
    
    return
    
    ;
    }
    
    
    for
    
    (
    
    var
    
     i
    
    =
    
    0
    
    ;i
    
    <=
    
    2
    
    ;i
    
    ++
    
    ){
        
    
    var
    
     worker 
    
    =
    
     
    
    new
    
     Worker(
    
    "
    
    fibonacci.js
    
    "
    
    );
        worker.onmessage 
    
    =
    
     resultReceiver;
        worker.onerror 
    
    =
    
     errorReceiver;
        worker.postMessage(n
    
    -
    
    i);
    }
};

   
   

onmessage函数在worker调用postMessage()时被触发，这时便开始递归。在里边创建新的worker拷贝对每次的计算结果进行迭代。

HTML代码

HTML code

   
   

    
    
    
    

    
    <!
    
    DOCTYPE HTML PUBLIC "-//W3C/DTD HTML4.0 Transitional//EN"
    
    >
    
    

    
    <
    
    html
    
    >
    
    

    
    <
    
    head
    
    >
    
    

    
    <
    
    title
    
    >
    
    Test threads fibonacci
    
    </
    
    title
    
    >
    
    

    
    </
    
    head
    
    >
    
    

    
    <
    
    body
    
    >
    
    
    
    
    <
    
    div 
    
    id
    
    ="result"
    
    >
    
    http://www.v-ec.com/dh20156/article.asp?id=242
    
    </
    
    div
    
    >
    
    
    
    
    <
    
    script 
    
    type
    
    ="text/javascript"
    
    >
    
    
        
    
    var
    
     worker 
    
    =
    
     
    
    new
    
     Worker(
    
    "
    
    fibonacci.js
    
    "
    
    );
        worker.onmessage 
    
    =
    
     
    
    function
    
    (event){
            document.getElementById(
    
    '
    
    result
    
    '
    
    ).innerHTML 
    
    =
    
     event.data;
            dump(
    
    '
    
    Got:
    
    '
    
    +
    
    event.data
    
    +
    
    '
    
    /n
    
    '
    
    );
        };
        worker.onerror 
    
    =
    
     
    
    function
    
    (event){
            dump(
    
    '
    
    Worker error:
    
    '
    
    +
    
    error.message
    
    +
    
    '
    
    /n
    
    '
    
    );
            
    
    throw
    
     error;
        };
        worker.postMessage(
    
    '
    
    5
    
    '
    
    );
    
    
    </
    
    script
    
    >
    
    

    
    </
    
    body
    
    >
    
    

    
    </
    
    html
    
    >
    
    

   
   

在页面中创建了一个ID为result的DIV用来显示计算结果，然后创建worker，设置onmessage事件用来显示计算结果到result，设置onerrer事件用来设置dump错误信息。
最后，发送“5”到worker，开始计算。


在后台操作 WEB I/O

你可以在此查看到一篇关于Using workers in extensions的文章。


在多个workers进程中处理任务

随着多核计算机的普及，在多进程处理复杂的任务也越来越被更多的人使用，在多个workers进程中处理任务的演示不久将会提供给大家。


在workers中创建workers

前面Fibonacci例子的演示中我们看到，在workers中可以创建其他的workers，这使得递归很容易进行。


发送对象给workers

你可以通过postMessage()方法安全地将对象传递到workers或者从中返回对象；这些对象将被自动转换为JSON格式。

var onmessage = function(e){
    postMessage(e.data);
};

注意：在workers中进出的对象不能包含函数和循环引用，因为JSON不支持它们。



See also参见：

WebWorkers

Worker

WorkerGlobalScope

SharedWorker

Web Workers specification

转载请注明出处：http://www.v-ec.com/dh20156/article.asp?id=242

经过WEB前端DHTML精英俱乐部测试发现，Safari4已经可以支持Web Workers，不过貌似还不支持在worker中创建worker，所以，本文中上面的Fibonacci例子测试失败，WEB前端DHTML精英俱乐部重新写了一个实例进行演示：
WEB前端专家DHTML精英俱乐部对Web Workers进行的性能测试！