Web Workers 网页工人线程

 

自JavaScript 诞生以来，还没有办法在浏览器 UI线程之外运行代码。网页工人线程API 改变了这种状

况，它引入一个接口，使代码运行而不占用浏览器UI线程的时间。作为最初的HTML 5 的一部分，网页

工人线程API 已经分离出去成为独立的规范（http://www.w3.org/TR/workers/ ）。

 

网页工人线程对网页应用来说是一个潜在的巨大性能提升，因为新的工人线程在自己的线程中运行

JavaScript。这意味着，工人线程中的代码运行不仅不会影响浏览器 UI，而且也不会影响其它工人线程中

运行的代码。

由于网页工人线程不绑定 UI线程，这也意味着它们将不能访问许多浏览器资源。工人线程的运行环境由下列部分组成：

一个浏览器对象，只包含四个属性：appName, appVersion, userAgent, 和platform 

一个location 对象（和window里的一样，只是所有属性都是只读的）

一个self 对象指向全局工人线程对象

一个importScripts()方法，使工人线程可以加载外部JavaScript 文件

所有ECMAScript对象，诸如 Object，Array，Data ，等等

XMLHttpRequest 构造器 

setTimeout() 和setInterval() 方法

close() 方法可立即停止工人线程 

 

 

因为网页工人线程有不同的全局运行环境，你不能在 JavaScript 代码中创建。事实上，你需要创建一个

完全独立的JavaScript 文件，包含那些在工人线程中运行的代码。要创建网页工人线程，你必须传入这个

JavaScript 文件的 URL ： 

 

var worker = new Worker("code.js"); 

 此代码一旦执行，将为指定文件创建一个新线程和一个新的工人线程运行环境。此文件被异步下载，直

 

到下载并运行完之后才启动工人线程。

工人线程和网页代码通过postMessage和onmessage事件接口进行交互。例如：

 

var worker = new Worker("code.js"); 
worker.onmessage = function(event){ 
   alert(event.data); 
}; 
worker.postMessage("Nicholas"); 

 

 

 

  //inside code.js 
self.onmessage = function(event){ 
   self.postMessage("Hello, " + event.data + "!"); 
};  

 

 

 

当工人线程通过 importScripts()方法加载外部 JavaScript 文件，它接收一个或多个 URL 参数，指出要加

的JavaScript 文件网址。工人线程以阻塞方式调用 importScripts()，直到所有文件加载完成并执行之后，

本才继续运行。由于工人线程在UI线程之外运行，这种阻塞不会影响UI响应。例如： 

 

//inside code.js 
importScripts("file1.js", "file2.js"); 
self.onmessage = function(event){ 
   self.postMessage("Hello, " + event.data + "!"); 
}; 

 

 

 

网页工人线程适合于那些纯数据的，或者与浏览器 UI没关系的长运行脚本。例如：

解析一个大字符串

编/解码一个大字符串

复杂数字运算

给一个大数组排序

......

 

 

任何超过 100 毫秒的处理，都应当考虑工人线程方案是不是比基于定时器的方案更合适。当然，还要基

于浏览器是否支持工人线程。