自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方案是不是比基于定时器的方案更合适。
网友评论