前言
有一些前端技術(shù)點(diǎn)，即使以前用過，但沒有自己動手歸納總結(jié)過，許久還是要回過頭來還是需要重新梳理。于是，本文就來梳理一下 Web Worker。
為什么需要 Web Worker
由于JavaScript語言采用的是單線程，同一時(shí)刻只能做一件事，如果有多個(gè)同步計(jì)算任務(wù)執(zhí)行，則在這段同步計(jì)算邏輯執(zhí)行完之前，它下方的代碼不會執(zhí)行，從而造成了阻塞，用戶的交互也可能無響應(yīng)。
但如果把這段同步計(jì)算邏輯放到Web Worker執(zhí)行，在這段邏輯計(jì)算運(yùn)行期間依然可以執(zhí)行它下方的代碼，用戶的操作也可以響應(yīng)了。
Web Worker 是什么
HTML5 提供并規(guī)范了 Web Worker 這樣一套 API，它允許一段 JavaScript 程序運(yùn)行在主線程之外的另外一個(gè)線程（Worker 線程）中。
Web Worker 的作用，就是為 JavaScript 創(chuàng)造多線程環(huán)境，允許主線程創(chuàng)建 Worker 線程，將一些任務(wù)分配給后者運(yùn)行。這樣的好處是，一些計(jì)算密集型或高延遲的任務(wù)，被 Worker 線程負(fù)擔(dān)了，主線程就會很流暢，不會被阻塞或拖慢。
Web Worker 的分類
Web Worker 根據(jù)工作環(huán)境的不同，可分為專用線程 Dedicated Worker和共享線程 Shared Worker。
Dedicated Worker的Worker只能從創(chuàng)建該Woker的腳本中訪問，而SharedWorker則可以被多個(gè)腳本所訪問。
在開發(fā)中如果使用到 Web Worker，目前大部分主要還是使用 Dedicated Worker的場景多，它只能為一個(gè)頁面所使用，本文講的也是這一類；而Shared Worker可以被多個(gè)頁面共享，為跨瀏覽器 tab 共享數(shù)據(jù)提供了一種解決方案。
Web Worker的使用限制
同源限制
分配給 Worker 線程運(yùn)行的腳本文件，必須與主線程的腳本文件同源。
文件限制
Worker 線程無法讀取本地文件（file://），會拒絕使用 file 協(xié)議來創(chuàng)建 Worker實(shí)例，它所加載的腳本，必須來自網(wǎng)絡(luò)。
DOM 操作限制
Worker 線程所在的全局對象，與主線程不一樣，區(qū)別是：
- 無法讀取主線程所在網(wǎng)頁的 DOM 對象
- 無法使用
document、window、parent這些對象
通信限制
Worker 線程和主線程不在同一個(gè)上下文環(huán)境，它們不能直接通信，必須通過消息完成，交互方法是postMessage和onMessage，并且在數(shù)據(jù)傳遞的時(shí)候， Worker 是使用拷貝的方式。文章來源：http://www.zghlxwxcb.cn/news/detail-620227.html
腳本限制
Worker 線程不能執(zhí)行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 對象發(fā)出 AJAX 請求，也可以使用setTimeout/setInterval等API文章來源地址http://www.zghlxwxcb.cn/news/detail-620227.html
基本 API
const worker = new Worker(aURL, options);
-
worker.postMessage: 向 worker 的內(nèi)部作用域發(fā)送一個(gè)消息，消息可由任何 JavaScript 對象組成 -
worker.terminate: 立即終止 worker。該方法并不會等待 worker 去完成它剩
到了這里，關(guān)于梳理 Web Worker 及實(shí)戰(zhàn)場景的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
