HTML 5 Web Workers

什么是 Web Worker?
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
所有主流浏览器均支持 web worker,除了 Internet Explorer。





Document


下面是js代码 outer.js

var i=0;
function timedCount(){
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

web Worker 要在服务器环境运行,另外不能跨域。比如我用iis(没用过iis,可以查看我这篇文章访问的,页面地址是 localhost:81/demo/worker/index.html,而js我却用本机的ip地址10.0.0.192:81/demo/outer.js,这样就会报错。

总结
web worker看起来很美好,但处处是魔鬼。
我们可以做什么:
1.可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
2.可以在worker中通过importScripts(url)加载另外的脚本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest来发送请求
5.可以访问navigator的部分属性
有哪些局限性:
1.不能跨域加载JS
2.worker内代码不能访问DOM
3.各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行
4.不是每个浏览器都支持这个新特性

所以,当我想在web worker请求接口的时候,如果有数据存在localstorage里面,就会因为取不到而报错
如:

var ajax = new XMLHttpRequest();
ajax.open('get','/delivery/export/export_list?token=' + localStorage.loginToken,true);//这里就会报错
ajax.send();
ajax.onreadystatechange = function(){
    if(ajax.readyState == 4){
        if(ajax.status >= 200 && ajax.status <=300 || ajax.status == 304){
            postMessage(ajax.responseText);
        }
    }
}

你可能感兴趣的:(HTML 5 Web Workers)