什么是 Web Worker建丧？
當(dāng)在 HTML 頁(yè)面中執(zhí)行腳本時(shí)波势，頁(yè)面的狀態(tài)是不可響應(yīng)的，直到腳本已完成拴曲。
web worker 是運(yùn)行在后臺(tái)的 JavaScript迄埃，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能蕉汪。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊者疤、選取內(nèi)容等等叠赦，而此時(shí) web worker 在后臺(tái)運(yùn)行。
所有主流瀏覽器均支持 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");//報(bào)錯(cuò)
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 要在服務(wù)器環(huán)境運(yùn)行暂吉，另外不能跨域慕的。比如我用iis(沒用過iis，可以查看我這篇文章訪問的风题，頁(yè)面地址是 localhost:81/demo/worker/index.html，而js我卻用本機(jī)的ip地址10.0.0.192:81/demo/outer.js骡楼，這樣就會(huì)報(bào)錯(cuò)稽鞭。
總結(jié)
web worker看起來很美好，但處處是魔鬼篮条。
我們可以做什么：
1.可以加載一個(gè)JS進(jìn)行大量的復(fù)雜計(jì)算而不掛起主進(jìn)程吩抓，并通過postMessage疹娶，onmessage進(jìn)行通信
2.可以在worker中通過importScripts(url)加載另外的腳本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest來發(fā)送請(qǐng)求
5.可以訪問navigator的部分屬性
有哪些局限性：
1.不能跨域加載JS
2.worker內(nèi)代碼不能訪問DOM
3.各個(gè)瀏覽器對(duì)Worker的實(shí)現(xiàn)不大一致，例如FF里允許worker中創(chuàng)建新的worker,而Chrome中就不行
4.不是每個(gè)瀏覽器都支持這個(gè)新特性
所以钳垮，當(dāng)我想在web worker請(qǐng)求接口的時(shí)候额港，如果有數(shù)據(jù)存在localstorage里面移斩，就會(huì)因?yàn)槿〔坏蕉鴪?bào)錯(cuò)
如：
var ajax = new XMLHttpRequest();
ajax.open('get','/delivery/export/export_list?token=' + localStorage.loginToken,true);//這里就會(huì)報(bào)錯(cuò)
ajax.send();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status >= 200 && ajax.status <=300 || ajax.status == 304){
postMessage(ajax.responseText);
}
}
}
