如何查找历史线程阻塞原因_学习 Web Worker（js中的“多线程”）
昨天部門例會，討論開發的系統遇到的問題，遇到一個醫保上傳比較耗時的問題，解決方案提到了Web Worker，學習一波。
首先簡單介紹一下什么是web worker。我們都知道在瀏覽器中javascript的執行是單線程的，頁面上的javascript在執行時會阻塞瀏覽器的響應，這非常影響用戶體驗，所以ajax應運而生了。ajax的出現使得頁面在等待服務器響應的這段時間內不再發生阻塞，但是這仍然沒有改變代碼單線程執行的本質，這也意味著我們依舊不能把耗費時間的復雜運算放在頁面上執行。而web worker的出現彌補了這個缺點。
頁面上單線程執行的javascript是主線程（我們通常寫的javascript都在主線程中執行），new出來的web worker對象為子線程，只有主線程中的代碼執行時會導致阻塞，子線程則不會，這表示部分耗費時間的復雜運算完全可以從后臺挪到前臺來完成。
web worker的定義就不再這里贅述了，對web worker還不了解的同學可以在MDN上去了解。
下面給出一個簡單的web worker例子來驗證一下子線程的執行是否對頁面有影響：
index.html代碼：
<!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>demo_workers.js代碼：
function timedCount () {for (var i = 0; i < 10000000000; i++) {if (i % 100000 === 0) {postMessage(i);}} }timedCount();點擊Start Worker按鈕啟動web worker，可以看到web worker開始工作，且在web worker正常工作時，我們仍然可以在input輸入框中輸入信息，這表示頁面并沒有因為web worker的運行而被阻塞：
另外要注意一點，web worker雖然是新啟動的子線程，運行不會阻塞頁面，但與主線程的交互會，以上面的代碼為例，如果在web worker的for循環里面直接調用postMessage，仍然會感到頁面的操作不夠流暢（原因是主線程需要一直不停地處理子線程post過來的消息）。
web worker的介紹至此結束，接下來聊一聊web worker的應用場景。目前可以百度到的關于web worker的文章內容大部分都是從MDN復制過來的，極少有介紹在實際項目中是如何使用web worker的，當然，按筆者的理解有兩方面的原因：
一、web worker的兼容性問題，主流瀏覽器對web worker的兼容性還不夠高（比如Safari ，IE就更不用說了）；
二、在項目中引入web worker并不能帶來質的改變（從這一點來說，websocket就不一樣，引入websocket后基本可以替換掉項目里所有的輪詢，達到性能優化的目的，但正常的項目決不可能設計成讓前臺來處理復雜的業務邏輯）。
當然，這也不表示web worker毫無用武之地，比如下面幾個場景：
大數據的處理：
這里所說的大數據處理，并不是指數據量非常大，而是要從計算量來看，通常用時不能控制在毫秒級內的運算都可以考慮放在web worker中執行。
高頻的用戶交互：
高頻的用戶交互適用于根據用戶的輸入習慣、歷史記錄以及緩存等信息來協助用戶完成輸入的糾錯、校正功能等類似場景，用戶頻繁輸入的響應處理同樣可以考慮放在web worker中執行。
最后聲明一點，了解后臺的同學千萬不要認為web worker等同于后臺意義的多線程，web worker現在有了多線程的形（有了多線程的用法），但還不具備多線程的神（不具備線程通信、鎖等后臺線程的基本特性），web worker的本質是支持我們把數據刷新與頁面渲染兩個動作拆開執行（不使用web worker的話這兩個動作在主線程中是線性執行的）。
作者： 討厭走開啦
鏈接：https://blog.csdn.net/lqlqlq007/article/details/79824122
來源： CSDN
總結
以上是生活随笔為你收集整理的如何查找历史线程阻塞原因_学习 Web Worker（js中的“多线程”）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： P 社推出《燃灯者联盟》游戏，今年将登陆
- 下一篇： 浮点数可以直接相加么?_鸭粪屎可以直接做