自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 毫秒的处理,都应当考虑工人线程方案是不是比基于定时器的方案更合适。当然,还要基
于浏览器是否支持工人线程。