0. 前言
在一個(gè)頁(yè)面中，會(huì)有許多的耗時(shí)操作，這些耗時(shí)操作會(huì)影響界面的流暢度，可能會(huì)出現(xiàn)卡頓的情況，那么，什么是耗時(shí)操作呢？就是一些耗費(fèi)時(shí)間的操作，比如你的for循環(huán)，創(chuàng)建節(jié)點(diǎn)等，當(dāng)然，我說的不是你就只創(chuàng)建一個(gè)節(jié)點(diǎn)，就創(chuàng)建一個(gè)節(jié)點(diǎn)，耗費(fèi)不了多少時(shí)間，可是，你要?jiǎng)?chuàng)建很多呢？
那我們可以把你所耗時(shí)的那些操作，放在子線程里，等它運(yùn)行完畢，回調(diào)到主線程，相當(dāng)于異步操作，讓子線程的操作進(jìn)行著，主線程該干嘛干嘛去。
1. 簡(jiǎn)介
Web Worker的基本原理就是在當(dāng)前 javascript 的主線程中，使用 Worker 類加載一個(gè) javascript 文件來(lái)開辟一個(gè)新的線程，也可以說成子線程，起到互不阻塞執(zhí)行的效果。
2. 改進(jìn)前代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="box" value="點(diǎn)擊我" />
<h1 id="num"></h1>
<script type="text/javascript">
//在子線程 模擬一個(gè)耗時(shí)操作
for (var i = 0; i < 1000000000; i++) {
}
num.innerHTML = i;
box.onclick = function () {
alert("哈哈哈哈哈哈");
}
</script>
</body>
</html>
改版前那個(gè)for循環(huán)耗時(shí)操作，還是要耗費(fèi)時(shí)間的，而且我在連續(xù)點(diǎn)擊，會(huì)彈出很多次，在for循環(huán)結(jié)束后，你點(diǎn)擊了幾次，就會(huì)彈出幾次，以為它被for循環(huán)阻塞住了做成了影響。
3. 改進(jìn)后代碼
主線程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="box" value="點(diǎn)擊我" />
<input type="button" value="停止子線程的耗時(shí)操作" id="stop1" />
<h1 id="num"></h1>
<script type="text/javascript">
//創(chuàng)建一個(gè)worker對(duì)象（創(chuàng)建一個(gè)子線程）
var webworker;
if (typeof Worker != "undefined") {
//參數(shù)是耗時(shí)操作
webworker = new Worker("./webworker.js");
//監(jiān)聽子線程中運(yùn)行的耗時(shí)操作，如果運(yùn)行完畢，
//回調(diào)到這里（主線程）更新UI代碼
webworker.onmessage = function (e) {
num.innerHTML = e.data;
}
} else {
throw new Error ("不支持Worker對(duì)象");
}
box.onclick = function () {
alert("哈哈哈哈哈哈");
}
stop1.onclick = function () {
webworker.terminate();
}
</script>
</body>
</html>
子線程
(function () {
//在子線程 模擬一個(gè)耗時(shí)操作
for (var i = 0; i < 1000000000; i++) {
}
//耗時(shí)操作完畢后，調(diào)用postMessage方法回到主線程，
//并且把數(shù)據(jù)傳回去
postMessage(i);
})();
我把耗時(shí)操作放在另一個(gè)文件里，然后，我主線程該干嘛干嘛，這樣兩者也不會(huì)造成阻塞，流暢度也很好，解決了耗時(shí)操作可能會(huì)造成的阻塞影響。
4. 結(jié)束語(yǔ)
快過新年了，大家都在買著回家的票，而我今天剛買到回家到票，聽說唐山今天下雪了，是不是有句話“瑞雪兆豐年”，哈哈，提前祝大家新年快樂哈，看到的記得給我點(diǎn)贊，發(fā)紅包?。。?！
