web Worker：

web Worker是運(yùn)行在后臺(tái)的javascript，不會(huì)影響性能，常用于高耗費(fèi)CPU的任務(wù)，必須部署到線上才可以正常使用，這里有三個(gè)方法比較重要，需要注意：

postMessage(),發(fā)送消息，指的是在創(chuàng)建的后臺(tái)web works文件中發(fā)送消息，供主頁(yè)中onmessage()事件接收，此事件的對(duì)象將包含要發(fā)送過(guò)來(lái)的值。

terminate()，用來(lái)停止web worker,使用方法：在Worker對(duì)象調(diào)用即可。

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

其中data屬性即可拿到發(fā)送過(guò)來(lái)的值，具體使用步驟如下：

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

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

html文件中javascript代碼：

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

特別提醒：案例必須部署到服務(wù)器上才可以正常運(yùn)行，本地打開(kāi)會(huì)報(bào)類似的錯(cuò)誤：Uncaught DOMException: Failed to construct ‘Worker’: Script at ‘file:///C:/Users/17121/Desktop/test/test.js’ cannot be accessed from origin ‘null’.

提示：本文圖片等素材來(lái)源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者 刪除。
筆者：苦海

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。