前端的同學應該都知道js是單線程，異步IO的，但是其實他也是可以實現多線程的，只不過還是受制於主線程，不能夠有一些操作dom的行爲，說白了其實就是比較消耗cpu的計算量比較大，話不多說，下面我們可以直接看代碼：
worker.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- web worker是運行在後臺的javascript，不會影響頁面的性能 -->
<p>計數:<output id="result"></output></p>
<button onclick="startWorker()">開始worker</button>
<button onclick="endWorker()">停止worker</button>
<div id='ceshi' onclick="ceshi()">點擊我不會阻塞代碼</div>
<br><br>
<script type="text/javascript">
var w;
function startWorker(){
if(typeof(Worker)!="undefined"){//瀏覽器支持web worker
if(typeof(w)=="undefined"){//w是未定義的,還沒有開始計數
w = new Worker("webworker.js");//創建一個Worker對象,利用Worker的構造函數
}
//onmessage是Worker對象的properties
w.onmessage = function(event){//事件處理函數,用來處理後端的web worker傳遞過來的消息
document.getElementById("result").innerHTML=event.data;
};
}else{
document.getElementById("result").innerHTML="sorry,your browser does not support web workers";
}
}
function endWorker(){
w.terminate();//利用Worker對象的terminated方法,終止
w=undefined;
}
function ceshi(){
console.log(555)
}
</script>
</body>
</html> webworker.js
var i = 0;
function timeCount(){
i = i + 1;
postMessage(i);//postMessage是Worker對象的方法，用於向html頁面回傳一段消息
setTimeout("timeCount()",500);//定時任務
}
timeCount();//加1計數,每500毫秒調用一次 這裏有一點要注意，new Worker(“webworker.js”) 裏面的參數爲另一個文件的路徑，因爲chrome是不支持直接在本地獲取資源的，所以一定要在本地起一個服務，要不然會報跨域的問題，這個當時困擾我了好久啊！！！！！！！