Web Workers的使用

自JavaScript诞生以来，还没有办法在浏览器UI线程之外运行代码。Web Workers API改变了这个状况，它引入了一个接口，能使代码运行且不占用浏览器UI线程的时间。因为每个心的Worker都在自己的线程中运行代码，这意味着Woker运行代码不仅不会影响浏览器UI，也不会影其它Worker中运行的代码。

Worker运行环境

由于Web Worker没有绑定UI线程，这也意味着它们不能访问浏览器的许多资源。每个Web Worker都有自己的全局运行环境，其功能只是JavaScript特性的一个子集。Worker运行环境由以下主要几个部分组成:

• navigator对象，包含四个属性:appName、appVersion、user Agent、platform
• locaion （window.与location相同，但此属性只读）
• seft 指向全局worker对象
• 一个import Scripts()方法，用来加载Worker所用到的外部JavaScript文件
• 所有的ECMAScript对象，诸如：Object、Array、Date等
• XMLHttpRequest构造器
• setTimeout() 和setInterval()方法
• close() 立刻停止worker运行

与Worker通讯

Worker 与网页代码通过事件接口进行通讯。网页代码可以 通过 postMessage()方法给Worker传递数据，它接受一个参数，即需要传递给Worker的数据。还有一个用来接收信息的onmessage事件处理器。
通过importScripts()方法加载外部JavaScript文件

实际应用

Web Workers 适用于那些处理纯数据，或者与浏览器UI无关的长时间运行脚本。如以下例子，解析一个超长的JSON字符串，假设至少需要500毫秒才能完成解析。很明显实际太长了，超出了客户端允许JavaScript运行的时间，因为会干扰用户体验，而此任务又难以分解成若干个使用定时器的小人物，因此Worker成为最理想的解决方案。直接上代码：

<script>
    var worker = new Worker("script/jsonparser.js");
    //数据就位时，调用事件处理器
    worker.onmessage = function (event) {
        //JSON结构被回传回来
        var jsonData = event.data;
        console.log(jsonData.productList[0].id);

    }
    var jsonText = '{"cate":"陶瓷","productList":[{"id":1,"name":"xx陶瓷"},{"id":2,"name":"xx陶瓷2"},{"id":3,"name":"xx陶瓷3"}]}';
    worker.postMessage(jsonText);
</script>

jsonparser.js的实现

importScripts("c.js","d.js")
//当JSON数据存在时，该事件处理器会被调用
self.onmessage = function (event) {
    var jsonText = event.data;
    var jsonData = JSON.parse(jsonText);
    self.postMessage(jsonData);
}

解析一个大字符只是Web Workers的任务之一，其它可能受益任务：

• 编码/解码大字符
• 复杂数学运算（图像/视频处理）
• 大数组的排序
  超过100毫秒处理的过程，都应该考虑Worker方案是不是比基于定时器的方案更合适。