HTML5 Web Worker

Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。

WebWorker 可以做什么

• 可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信
• 可以在worker中通过importScripts(url)加载另外的脚本文件
• 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
• 可以使用XMLHttpRequest来发送请求
• 可以访问navigator的部分属性
• close()结束线程
• navigator对象
  • 可以使用localStorage和sessionStorage
  • XMLHttpRequest可以在线程中使用Ajax
• 预先抓取和/或缓存数据以便稍后使用
• 突出显示代码语法或其他实时文本格式
• 拼写检查程序
• 分析视频或音频数据
• 背景 I/O 或网络服务轮询
• 处理较大数组或超大 JSON 响应
• <canvas>中的图片过滤
• 更新本地网络数据库中的多行内容

局限性

• 不能跨域加载JS
• worker内代码不能访问DOM
• 各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中不行
• 不是每个浏览器都支持这个新特性

WebWorker 使用

• Worker创建 var worker = new Worker('task.js')
• Worker启动 worker.postMessage()
• Worker事件 worker.addEventListener('message'/'error', function(e) {e.data;}, false);

加载外部脚本

importScripts('script1.js');
importScripts('script2.js');
// 或
importScripts('script1.js', 'script2.js');

子Worker (参考链接)

• 子Worker必须托管在与父网页相同的来源中。
• 子Worker中的 URI 应相对于父Worker的位置进行解析（与主网页不同）。
• 在主网页和Worker之间传递的消息是复制而不是共享的。

内嵌Worker

即时创建 Worker 脚本，或者在不创建单独 Worker 文件的情况下创建独立网页

// Prefixed in Webkit, Chrome 12, and FF6: window.WebKitBlobBuilder, window.MozBlobBuilder
var bb = new BlobBuilder();
bb.append("onmessage = function(e) { postMessage('msg from worker'); }");

// Obtain a blob URL reference to our worker 'file'.
// Note: window.webkitURL.createObjectURL() in Chrome 10+.
var blobURL = window.URL.createObjectURL(bb.getBlob());

var worker = new Worker(blobURL);
worker.onmessage = function(e) {
  // e.data == 'msg from worker'
};
worker.postMessage(); // Start the worker.

Blob 网址

对window.URL.createObjectURL() 的调用十分奇妙。此方法创建了一个简单的网址字符串，该字符串可用于 DOM File 或 Blob 对象中存储的参考数据。例如：blob:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1

Blob 网址是唯一的，且只要应用存在，该网址就会一直有效（例如直到卸载 document 为止）。如果您要创建很多 Blob 网址，最好发布不再需要的参考资料。您可以通过将 Blob 网址传递给 window.URL.revokeObjectURL() 来明确发布该网址：
window.URL.revokeObjectURL(blobURL); // window.webkitURL.createObjectURL() in Chrome 10+.

使用 WebWorker 技巧

示例只涉及 XMLHttpRequest 和计算；不是很大也不复杂。如果您让 worker 处理更复杂的任务，比如处理大量计算，它将会是一个功能强大的特性。在将这个很酷的技术运用到您的项目之前，了解一些使用技巧。

• 在 workers 中不能访问 DOM(非线程安全) window document parent
• 为了安全，workers 不能直接对 HTML 进行操作。同一 DOM 上的多线程操作可能会引发线程安全问题。优势是您不再担忧 worker 实现中的多线程安全问题。
  这在开发 worker 时有一些局限性，您不能在 worker 中调用 alert()，这是一个非常流行的调试 JavaScript 代码的方法。您也不能调用 document.getElementById()，因为它只能检索和返回变量（可能是字符串、数组、JSON 对象，等等）。
• worker 中可用的对象
• 尽管 worker 不能访问 window 对象，但可以直接访问 navigator。您也可以在 navigator 对象中访问 appName appVersion platform 和 userAgent。
• location 对象可以以 只读方式访问。您可以在 location 对象中获取 hostname 和 port。
  在 worker 中也支持 XMLHttpRequest。有了这一特性，您就可以将大量感兴趣的扩展添加到 worker 中。

此外还有：

• importScripts() 方法（导入外部脚本文件, 在同一个域上访问）
• JavaScript 对象，比如 Object Array Date Math 和 String
• setTimeout() clearTimeout() 和 setInterval() clearInterval()方法
• 应用缓存
• 生成其他Web Worker
• postMessage 中携带的数据类型
  • postMessage 的使用十分频繁，因为它是主 JavaScript 线程的主要方法，用于和 workers 交互。然而，现在 postMessage 中携带的数据类型仅限于本地 JavaScript 类型，比如，Array Date Math String JSON 等等。结构复杂的自定义 JavaScript 对象不能被很好地支持。

WebWorker 安全

postMessage在HTML5中被引入，用来解决跨域或者跨线程数据交互的问题。但是如果messaging可以接收任何来源的信息，此页面有可能会被攻击；另外postMessage不通过服务器，如果不经过验证和过滤，可能成为XSS注入点。

• 使用postMessage时需要验证来源可信；
• 不要使用innerHTML，现代浏览器提供了textContent属性，可以帮助对HTML标签进行过滤，或者你可以自行编写过滤的逻辑和函数。

参考

• Web Worker 的基本信息