html5 worker ajax,HTML5 之 Web Worker

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 响应

中的图片过滤

更新本地网络数据库中的多行内容

局限性

不能跨域加载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标签进行过滤，或者你可以自行编写过滤的逻辑和函数。

参考