什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
所有主流浏览器均支持 web worker，除了 Internet Explorer。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content" id="content"></div>
<input type="button" value="start" onclick="startWorker()">
<input type="button" value="end" onclick="stopWorker()">
</body>
<script type="text/javascript">
var w;
function startWorker(){
if(typeof(Worker)!=="undefined"){//判断是否支持
// Yes! Web worker support!
// Some code.....
if(typeof(w)=="undefined"){
// w=new Worker("http://10.0.0.192:81/demo/outer.js");//报错
w=new Worker("../outer.js");
}
w.onmessage = function (event) {
document.getElementById("content").innerHTML=event.data;
};
}else{
// Sorry! No Web Worker support..
}
}
function stopWorker(){
w.terminate();
}
</script>
</html>
下面是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);
}
}
}
网友评论