帶你瞭解Web Worker - 初識篇

哇~到底什麼是：Web Worker ？

Web Worker 誕生

JavaScript 是單線程語言，也就意味一次性只能作一件事情。一旦遇到計算密集型或高延遲的任務，在結果出來以前整個UI 層對操做會沒有任何反應，這是 UI 線程假死現象。

在這背景下，爲了讓頁面有更好的體驗， W3C 在 HTML5 的規範中提出了 Web Worker的概念，容許瀏覽器經過後臺線程來執行復雜的事物或者邏輯。

隨着電腦計算能力的加強，尤爲是多核 CPU 的出現，因爲 JavaScript 是單線程語言的特性，沒法充分發揮電腦的計算能力。

而 Web Worker 的出現，給 JavaScript 建立了多線程的機會。主線程能夠建立 Worker 線程，將一些任務分配給建立的 Worker 線程運行，此時並不會影響主線程的運行，直到 Worker 線程完成任務，再將結果返回給主線程。

這樣好處是，會形成 UI 線程假死現象的任務被 Worker 線程負擔了，主線程就會很流暢。

Worker 線程一旦新建成功，就會始終運行，不會被主線程上的活動（好比用戶點擊按鈕、提交表單）打斷。這樣有利於隨時響應主線程的通訊。可是，這也形成了 Worker 比較耗費資源，不該該過分使用，並且一旦使用完畢，就應該關閉。

Web Worker 族譜

• 專用 Worker （Dedicated Worker）：自身頁面後臺幫助運算的增強器。

• 共享 Worker（Shared Worker）：多個頁面後臺幫助勻速和共享數據的增強器。

Dedicated Worker V.S Shared Worker

A dedicated worker is only accessible by the script that called it.

A shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes, or even workers.

專用 Worker 只能被建立的腳本訪問，可是共享 Worker 能夠被來源不一樣的腳本共同訪問。

我本身的理解是：前者理解爲自身tab的一個後臺處理器，增強部分功能，多數是高計算的功能，後者理解爲多個tab的一個後臺處理器。

Web Worker 注意項

1. 同源限制：分配給 Worker 線程運行的腳本文件，必須與主線程的腳本文件同源。
2. DOM 限制：Worker 線程所在的上下文做用域，與主線程不同。因此沒法讀取主線程所在網頁的DOM對象，也沒法使用 document 、 window 、parent 這些對象。可是，Worker 線程中有 navigator 和 location 對象。
3. 腳本限制：Worker 線程不能執行alert()和 confirm()方法，但可使用 XMLHttpRequest對象發送AJAX請求。
4. 文件限制：Worker 線程不能訪問本地靜態文件，如：file://my/file/on/my/computer。

下文直接講述實操部分，敬請期待。

注：本系列文章涉及Web Worker 只包含 Dedicated Worker 以及 Shared Worker。