web Worker：

web Worker是運行在后臺的javascript，不會影響性能，常用于高耗費CPU的任務，必須部署到線上才可以正常使用，這里有三個方法比較重要，需要注意：

postMessage(),發送消息，指的是在創建的后臺web works文件中發送消息，供主頁中onmessage()事件接收，此事件的對象將包含要發送過來的值。

terminate()，用來停止web worker,使用方法：在Worker對象調用即可。

onmessage(),使用web worker后，要new 創建Worker對象，如new Worker(worker.js),onmessage是這個對象的一個方法，后面的函數中的事件對象則包含所有信息，如下：

其中data屬性即可拿到發送過來的值，具體使用步驟如下：

test.js文件中的web Worker代碼：

// 1.創建一個名為test.js的worker文件，放到test.html相同目錄下:var sum = 0; //聲明全局變量，下面計時器中sum才能完成不斷自加：setInterval(function() {sum++;postMessage(sum); //2.將sum發送給worker對象}, 1000);

html文件中javascript代碼：

<script>// 獲取DOM元素，供下面操作：var spans = document.querySelector('span');var start = document.querySelector('.start');var stops = document.querySelector('.stop');var workers; //3.聲明全局變量，供后面接收worker對象；若聲明為局部變量，后面stop事件中workers.terminate()將不能給undefined設置此方法// 4.定義一個執行創建worker對象并接收消息的函數：function startSum() {workers = new Worker('test.js'); // 創建一個web Worker對象，括號中傳入web Worker文件的路徑，注意實際開發中因做兼容處理，某些瀏覽器不支持此屬性時，因返回相關提示// 使用onmessage方法將發送的消息接收到此作用域：workers.onmessage = function(event) {var datas = event.data; // 將接收到的數據賦值給變量datasspans.innerText = datas; // 將datas設置給spans元素};};// 5.定義一個關閉web worker的函數：function stopSum() {workers.terminate();//停止workers};// 當點擊stops時執行stopSum()函數停止workers：stops.onclick = function() {stopSum();};// 當點擊開始時執行startSum()函數開始workers：start.onclick = function() {startSum();};</script>

特別提醒：案例必須部署到服務器上才可以正常運行，本地打開會報類似的錯誤：Uncaught DOMException: Failed to construct ‘Worker’: Script at ‘file:///C:/Users/17121/Desktop/test/test.js’ cannot be accessed from origin ‘null’.

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的web Worker简介、web Worker报错分析、作用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。