web worker的用法及應用場景（轉）

時間 2019-11-16

標籤 web worker 用法應用場景欄目 HTML 简体版

原文原文鏈接

首先簡單介紹一下什麼是web worker。咱們都知道在瀏覽器中javascript的執行是單線程的，頁面上的javascript在執行時會阻塞瀏覽器的響應，這很是影響用戶體驗，因此ajax應運而生了。ajax的出現使得頁面在等待服務器響應的這段時間內再也不發生阻塞，可是這仍然沒有改變代碼單線程執行的本質，這也意味着咱們依舊不能把耗費時間的複雜運算放在頁面上執行。而web worker的出現彌補了這個缺點。javascript

頁面上單線程執行的javascript是主線程（咱們一般寫的javascript都在主線程中執行），new出來的web worker對象爲子線程，只有主線程中的代碼執行時會致使阻塞，子線程則不會，這表示部分耗費時間的複雜運算徹底能夠從後臺挪到前臺來完成。html

web worker的定義就再也不這裏贅述了，對web worker還不瞭解的同窗請戳這裏。java

下面給出一個簡單的web worker例子來驗證一會兒線程的執行是否對頁面有影響：web

index.html代碼：ajax

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<input type="text" value=""/>
<script>
var w;
function startWorker () {
if (typeof(Worker) !== "undefined") {
if (typeof(w) === "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}瀏覽器

function stopWorker () {
w.terminate();
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
demo_workers.js代碼：緩存

function timedCount () {
for (var i = 0; i < 10000000000; i++) {
if (i % 100000 === 0) {
postMessage(i);
}
}
}性能優化

timedCount();
1
2
3
4
5
6
7
8
9
點擊Start Worker按鈕啓動web worker，能夠看到web worker開始工做，且在web worker正常工做時，咱們仍然能夠在input輸入框中輸入信息，這表示頁面並無由於web worker的運行而被阻塞：服務器

另外要注意一點，web worker雖然是新啓動的子線程，運行不會阻塞頁面，但與主線程的交互會，以上面的代碼爲例，若是在web worker的for循環裏面直接調用postMessage，仍然會感到頁面的操做不夠流暢（緣由是主線程須要一直不停地處理子線程post過來的消息）。websocket

web worker的介紹至此結束，接下來聊一聊web worker的應用場景。目前能夠百度到的關於web worker的文章內容大部分都是從MDN複製過來的，極少有介紹在實際項目中是如何使用web worker的，固然，按筆者的理解有兩方面的緣由：

web worker的兼容性問題，主流瀏覽器對web worker的兼容性還不夠高（好比Safari ，IE就更不用說了）；
在項目中引入web worker並不能帶來質的改變（從這一點來講，websocket就不同，引入websocker後基本能夠替換掉項目裏全部的輪詢，達到性能優化的目的，但正常的項目決不可能設計成讓前臺來處理複雜的業務邏輯）。
固然，這也不表示web worker毫無用武之地，好比下面幾個場景：

大數據的處理：

這裏所說的大數據處理，並非指數據量很是大，而是要從計算量來看，一般用時不能控制在毫秒級內的運算均可以考慮放在web worker中執行。

高頻的用戶交互：

高頻的用戶交互適用於根據用戶的輸入習慣、歷史記錄以及緩存等信息來協助用戶完成輸入的糾錯、校訂功能等相似場景，用戶頻繁輸入的響應處理一樣能夠考慮放在web worker中執行。

最後聲明一點，瞭解後臺的同窗千萬不要認爲web worker等同於後臺意義的多線程，web worker如今有了多線程的形（有了多線程的用法），但還不具有多線程的神（不具有線程通訊、鎖等後臺線程的基本特性），web worker的本質是支持咱們把數據刷新與頁面渲染兩個動做拆開執行（不使用web worker的話這兩個動做在主線程中是線性執行的）。--------------------- 做者：討厭走開啦來源：CSDN 原文：https://blog.csdn.net/lqlqlq007/article/details/79824122 版權聲明：本文爲博主原創文章，轉載請附上博文連接！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。