腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

HTML5之多線程(Web Worker)

發(fā)布時(shí)間：2019-01-02 15:46:21 作者：Jartto's blog

我要評(píng)論

這篇文章主要介紹了HTML5之多線程(Web Worker)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

提到 HTML5 總是讓人津津樂(lè)道，太多的特性和有趣的 API 讓人耳目一新。但是很多童鞋還停留在語(yǔ)義化的階段，忽視了 HTML5 的強(qiáng)勁之處。

這節(jié)我們來(lái)探討一下多線程 Web-Worker。

一、明確 JavaScript 是單線程

JavaScript 語(yǔ)言的一大特點(diǎn)就是單線程，也就是說(shuō)，同一個(gè)時(shí)間只能做一件事。

聽(tīng)起來(lái)有些匪夷所思，為什么不設(shè)計(jì)成多線程提高效率呢？我們可以假設(shè)一種場(chǎng)景：

假定 JavaScript 同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè) DOM 節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器應(yīng)該以哪個(gè)線程為準(zhǔn)？

作為瀏覽器腳本語(yǔ)言， JavaScript 的主要用途是與用戶互動(dòng)，以及操作 DOM 。

這決定了它只能是單線程，否則會(huì)帶來(lái)很復(fù)雜的同步問(wèn)題。為了避免復(fù)雜性，從一誕生， JavaScript 就是單線程，這已經(jīng)成了這門語(yǔ)言的核心特征，估計(jì)短期內(nèi)很難改變。

二、新曙光：Web Worker

單線程始終是一個(gè)痛點(diǎn)，為了利用多核 CPU 的計(jì)算能力， HTML5 提出 Web Worker 標(biāo)準(zhǔn)，允許 JavaScript 腳本創(chuàng)建多個(gè)線程。但是子線程完全受主線程控制，且不得操作 DOM 。

所以，這個(gè)新標(biāo)準(zhǔn)并沒(méi)有改變 JavaScript 單線程的本質(zhì)。

Web Workers 是現(xiàn)代瀏覽器提供的一個(gè) JavaScript 多線程解決方案，我們可以找到很多使用場(chǎng)景：

1.我們可以用 Web Worker 做一些大計(jì)算量的操作；

2.可以實(shí)現(xiàn)輪詢，改變某些狀態(tài)；

3.頁(yè)頭消息狀態(tài)更新，比如頁(yè)頭的消息個(gè)數(shù)通知；

4.高頻用戶交互，拼寫(xiě)檢查，譬如：根據(jù)用戶的輸入習(xí)慣、歷史記錄以及緩存等信息來(lái)協(xié)助用戶完成輸入的糾錯(cuò)、校正功能等

5.加密：加密有時(shí)候會(huì)非常地耗時(shí)，特別是如果當(dāng)你需要經(jīng)常加密很多數(shù)據(jù)的時(shí)候（比如，發(fā)往服務(wù)器前加密數(shù)據(jù)）。

6.預(yù)取數(shù)據(jù)：為了優(yōu)化網(wǎng)站或者網(wǎng)絡(luò)應(yīng)用及提升數(shù)據(jù)加載時(shí)間，你可以使用 Workers

來(lái)提前加載部分?jǐn)?shù)據(jù)以備不時(shí)之需。

加密是一個(gè)使用 Web Worker 的絕佳場(chǎng)景，因?yàn)樗⒉恍枰L問(wèn) DOM 或者利用其它魔法，它只是純粹使用算法進(jìn)行計(jì)算而已。隨著大眾對(duì)個(gè)人敏感數(shù)據(jù)的日益重視，信息安全和加密也成為重中之重。這可以從近期的 12306 用戶數(shù)據(jù)泄露事件中體現(xiàn)出來(lái)。

一旦在 Worker 進(jìn)行計(jì)算，它對(duì)于用戶來(lái)說(shuō)是無(wú)縫地且不會(huì)影響到用戶體驗(yàn)。

三、兼容性

四、基本概念

1.首先記得去判斷是否支持

if (window.Worker) {
  ...
}

2.創(chuàng)建一個(gè)新的 worker 很簡(jiǎn)單

const myWorker = new Worker('worker.js');

postMessage() 方法和 onmessage 事件處理函數(shù)是 Workers 的黑魔法。

3. postMessage 用來(lái)發(fā)送消息，而 onmessage 用來(lái)監(jiān)聽(tīng)消息

const worker = new Worker('src/worker.js');
worker.onmessage = e => {
  console.log(e.data);
};
worker.postMessage('你好嗎!');

在主線程中使用時(shí)， onmessage 和 postMessage() 必須掛在 worker 對(duì)象上，而在 worker 中使用時(shí)不用這樣做。原因是，在 worker 內(nèi)部， worker 是有效的全局作用域。

4.異常處理：

worker.onerror = function(error) {
  console.log(error.message);
  throw error;
};

5.終止 worker

worker.terminate();

worker 線程會(huì)被立即殺死，不會(huì)有任何機(jī)會(huì)讓它完成自己的操作或清理工作。

6.在 worker 線程中， workers 也可以調(diào)用自己的 close 方法進(jìn)行關(guān)閉：

close();

五、快速開(kāi)始

為了快速掌握，我們來(lái)做一個(gè)小例子：項(xiàng)目結(jié)構(gòu)如下

├── index.html
└── src
    ├── main.js
    └── worker.js

Html

<html>
<head>
  <title>Web Work Demo</title>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="app"> Hello Jartto! </div>
  <script src="src/main.js"></script>
</body>
</html>

main.js

const worker = new Worker('src/worker.js');
worker.onmessage = e => {
  const message = e.data;
  console.log(`[From Worker]: ${message}`);
  document.getElementById('app').innerHTML = message;
};
worker.postMessage('寫(xiě)的真好!');

Work.js

onmessage = e => {
  const message = e.data;
  console.log(`[From Main]: ${message}`);
  if(message.indexOf('好') > -1) {
    postMessage('謝謝支持');
  }
};

代碼很簡(jiǎn)單，主線程發(fā)送：「寫(xiě)的真好！」

web worker 收到消息，發(fā)現(xiàn)內(nèi)容中含有「好」字，回傳給主線程：「謝謝支持」

六、局限性

1.在 worker 內(nèi)，不能直接操作 DOM 節(jié)點(diǎn)，也不能使用 window 對(duì)象的默認(rèn)方法和屬性。然而我們可以使用大量 window 對(duì)象之下的東西，包括 WebSockets ， IndexedDB 以及 FireFox OS 專用的 Data Store API 等數(shù)據(jù)存儲(chǔ)機(jī)制。

這里舉個(gè)例子，我們修改 main.js ：

const worker = new Worker('src/worker.js');
worker.onmessage = e => {
  const message = e.data;
  console.log(`[From Worker]: ${message}`);
  document.getElementById('app').innerHTML = message;
};
+ worker.onerror = function(error) {
+   console.log(error);
+   worker.terminate();
+ };
worker.postMessage('寫(xiě)的真好!');

再來(lái)修改 work.js

+ alert('jartto');
onmessage = e => {
  const message = e.data;
  console.log(`[From Main]: ${message}`);
  if(message.indexOf('好') > -1) {
    postMessage('謝謝支持');
  }
};

這時(shí)候運(yùn)行就會(huì)報(bào)出：

這是因?yàn)椋?worker.js 執(zhí)行的上下文，與主頁(yè)面 HTML 執(zhí)行時(shí)的上下文并不相同，最頂層的對(duì)象并不是 Window ， woker.js 執(zhí)行的全局上下文，而是 WorkerGlobalScope ，我們具體說(shuō)明。

2. workers 和主線程間的數(shù)據(jù)傳遞通過(guò)這樣的消息機(jī)制進(jìn)行：雙方都使用 postMessage() 方法發(fā)送各自的消息，使用 onmessage 事件處理函數(shù)來(lái)響應(yīng)消息（消息被包含在 Message 事件的 data 屬性中）。

這個(gè)過(guò)程中數(shù)據(jù)并不是被共享而是被復(fù)制。

3.同源限制

分配給 Worker 線程運(yùn)行的腳本文件，必須與主線程的腳本文件同源。

4.文件限制

Worker 線程無(wú)法讀取本地文件，即不能打開(kāi)本機(jī)的文件系統(tǒng) （file://） ，它所加載的腳本，必須來(lái)自服務(wù)器。

5.不允許本地文件

Uncaught SecurityError: Failed to create a worker:
script at '(path)/worker.js'
cannot be accessed from origin 'null'.

Chrome doesn’t let you load web workers when running scripts from a local file.

那如何解決呢？我們可以啟動(dòng)一個(gè)本地服務(wù)器，建議使用 http-server ，簡(jiǎn)單易用。

6.內(nèi)容安全策略

有別于創(chuàng)建它的 document 對(duì)象， worker 有它自己的執(zhí)行上下文。因此普遍來(lái)說(shuō)， worker 并不受限于創(chuàng)建它的 document （或者父級(jí) worker ）的內(nèi)容安全策略。

我們來(lái)舉個(gè)例子，假設(shè)一個(gè) document 有如下頭部聲明：

Content-Security-Policy: script-src 'self'

這個(gè)聲明有一部分作用在于，禁止它內(nèi)部包含的腳本代碼使用 eval() 方法。然而，如果腳本代碼創(chuàng)建了一個(gè) worker ，在 worker 上下文中執(zhí)行的代碼卻是可以使用 eval() 的。

為了給 worker 指定 CSP，必須為發(fā)送 worker 代碼的請(qǐng)求本身加上一個(gè) CSP。

有一個(gè)例外情況，即 worker 腳本的源如果是一個(gè)全局性的唯一的標(biāo)識(shí)符（例如，它的 URL 指定了數(shù)據(jù)模式或者 blob ）， worker 則會(huì)繼承創(chuàng)建它的 document 或者 worker 的 CSP 。

七、擴(kuò)展：WorkerGlobalScope

關(guān)于，我們可以在 MDN 上面找到文檔：

1. self ：

我們可以使用 WorkerGlobalScope 的 self 屬性來(lái)獲取這個(gè)對(duì)象本身的引用。

2. location ：

location 屬性返回當(dāng)線程被創(chuàng)建出來(lái)的時(shí)候與之關(guān)聯(lián)的 WorkerLocation 對(duì)象，它表示用于初始化這個(gè)工作線程的腳步資源的絕對(duì) URL ，即使頁(yè)面被多次重定向后，這個(gè) URL 資源位置也不會(huì)改變。

3. close ：

關(guān)閉當(dāng)前線程，與 terminate 作用類似。

4. caches ：

當(dāng)前上下文得 CacheStorage ，確保離線可用，同時(shí)可以自定義請(qǐng)求的響應(yīng)。

5. console ：

支持 console 語(yǔ)法。

6. importScripts
我們可以通過(guò) importScripts() 方法通過(guò) url 在 worker 中加載庫(kù)函數(shù)。

7. XMLHttpRequest
有了它，才能發(fā)出 Ajax 請(qǐng)求。

8.可以使用：

setTimeout/setInterval
addEventListener/postMessage

還有很多 API 可以使用，這里就不一一舉例了。

八、異常處理

當(dāng) worker 出現(xiàn)運(yùn)行中錯(cuò)誤時(shí)，它的 onerror 事件處理函數(shù)會(huì)被調(diào)用。它會(huì)收到一個(gè)擴(kuò)展了 ErrorEvent 接口的名為 error 的事件。該事件不會(huì)冒泡并且可以被取消。

為了防止觸發(fā)默認(rèn)動(dòng)作，worker 可以調(diào)用錯(cuò)誤事件的 preventDefault() 方法。

錯(cuò)誤事件我們常用如下這三個(gè)關(guān)鍵信息：

Message：可讀性良好的錯(cuò)誤消息；
Filename：發(fā)生錯(cuò)誤的腳本文件名；
Lineno：發(fā)生錯(cuò)誤時(shí)所在腳本文件的行號(hào)；

worker.onerror = function(error) {
  console.log(error.message);
  throw error;
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

Tag：多線程 HTML5

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5之多線程(Web Worker)

相關(guān)文章

最新評(píng)論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容