Html5 Worker
Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。
如何使用Worker
主页面
- 通过在主页面的js中创建 Worker实例来创建新线程.
- 通过postMessage(data)启动线程,并传递参数。
- 通过onmessage(data)回调函数接收数据,并在页面呈现。
- 可通过 terminate() 方法终止线程,被终止的Worker对象不能被重启或重用。
//主页面 var worker = new Worker("js/worker.js"); //创建实例同时必须传入需要在新线程中执行的代码路径 worker.postMessage(num); //传递参数并启动线程 worker.onmessage = function(event){ //线程结束之后回调 console.log(event.data); document.getElementById("sum").innerHTML = event.data; }
- worker.js页面
- 通过onmessage(data) 等待响应主页面的调用。
- 实现运算
- 将运算结果通过postMessage(data)发送回主页面,触发主页面onmessage回调
onmessage = function(event){ //响应主页面调用,并通过参数接收主页面传递的数据
var sum = fibonacci(event.data);
console.log(event);
postMessage(sum); //将运算结果发送至主页面,并触发回调
};
检测可用性
检测浏览器是否支持Worker
if(typeof(Worker)!=="undefined"){ //浏览器支持Worker }else{ //浏览器不支持支持Worker }
限制与支持
- 限制
- Web Worker无法访问DOM节点;
- Web Worker无法访问全局变量或是全局函数;
- Web Worker无法调用alert()或者confirm之类的函数;
- Web Worker无法访问window、document之类的浏览器全局变量;
- 支持
- 可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
- 可以在worker中通过importScripts(url)加载另外的脚本文件
- 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
- 可以使用XMLHttpRequest来发送请求
- 可以访问navigator的部分属性
- 限制
案例
- fibonacci 计算
- 仿抢票系统