webworker的背景
JavaScript是單線程的票摇,所以當我們需要在同一個頁面背后做某些事情的時候怎么辦拘鞋?通常的做法是使用settimeout,但是html5給我們提供了一個方便的方法 webworker(工作線程)
但是使用它有一些限制:
Web Worker無法訪問DOM節(jié)點矢门;
Web Worker無法訪問全局變量或是全局函數(shù)盆色;
Web Worker無法調(diào)用alert()或者confirm之類的函數(shù);
Web Worker無法訪問window祟剔、document之類的瀏覽器全局變量隔躲;
我們可以使用它做一些比較耗時的處理
<!DOCTYPE html>
<head>
<title>worker</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script>
function init(){
//創(chuàng)建一個Worker對象,并向它傳遞將在新線程中執(zhí)行的腳本url
var worker = new Worker('worker.js');
//接收worker傳遞過來的數(shù)據(jù)
worker.onmessage = function(event){
document.getElementById('result').innerHTML+=event.data+"<br/>" ;
};
};
</script>
</head>
<body onload = "init()">
<div id="result"></div>
</body>
</html>
work.js
var i = 0;
function timedCount(){
for(var j = 0, sum = 0; j < 100; j++){
for(var i = 0; i < 100000000; i++){
sum+=i;
};
};
//將得到的sum發(fā)送回主線程
postMessage(sum);
};
//將執(zhí)行timedCount前的時間物延,通過postMessage發(fā)送回主線程
postMessage('Before computing, '+new Date());
timedCount();
//結(jié)束timedCount后宣旱,將結(jié)束時間發(fā)送回主線程
postMessage('After computing, ' +new Date());
上面代碼執(zhí)行的流程是:創(chuàng)建的worker對象,并用onmessage方法接收worker.js里面postMessage傳遞過來的數(shù)據(jù)(event.data)叛薯,并將數(shù)據(jù)追加到div#result中浑吟。
執(zhí)行結(jié)果如下