JS中webworker的作用與實(shí)操示例詳解
為什么需要webworker
JavaScript 需要引入 Web Worker 的核心原因源自其單線程模型的局限性。以下是關(guān)鍵原因及技術(shù)價(jià)值分析：
一、突破單線程阻塞瓶頸
1.JS 單線程的本質(zhì)
JavaScript 設(shè)計(jì)之初基于單線程模型，主線程需同時(shí)處理 UI 渲染、事件響應(yīng)、邏輯計(jì)算等任務(wù)。若執(zhí)行耗時(shí)操作（如大數(shù)據(jù)計(jì)算），會導(dǎo)致頁面卡頓甚至無響應(yīng)，用戶體驗(yàn)急劇下降。Web 2.Worker 的解決方案
創(chuàng)建獨(dú)立的后臺線程運(yùn)行腳本，將復(fù)雜任務(wù)剝離主線程，避免阻塞關(guān)鍵渲染流程
二、釋放多核 CPU 性能潛力
1.并行計(jì)算能力
Web Worker 允許創(chuàng)建多個(gè)子線程，將任務(wù)分片并行處理（如圖像濾鏡、科學(xué)計(jì)算），充分利用多核 CPU 硬件資源，顯著提升處理效率
2.資源分配優(yōu)化
主線程專注 UI 交互與渲染，Worker 線程處理計(jì)算密集型任務(wù)，實(shí)現(xiàn)計(jì)算資源合理分配
三、增強(qiáng)應(yīng)用穩(wěn)定性與體驗(yàn)
1.崩潰隔離機(jī)制
Worker 線程運(yùn)行在獨(dú)立環(huán)境中，即使子線程崩潰或報(bào)錯(cuò)，也不會影響主線程及其他 Worker 的穩(wěn)定性
2.流暢的用戶交互保障
例如實(shí)時(shí)金融圖表渲染場景，主線程僅負(fù)責(zé)接收結(jié)果并渲染，確保用戶操作無延遲
webworker的原理
Web Worker 是 JavaScript 實(shí)現(xiàn)多線程的核心機(jī)制，其原理涉及底層線程模型、通信機(jī)制和環(huán)境隔離等多個(gè)關(guān)鍵技術(shù)點(diǎn)。
核心工作機(jī)制詳解
1. 獨(dú)立線程模型
- Web Worker 在獨(dú)立操作系統(tǒng)線程中運(yùn)行（非主線程）
- 瀏覽器為每個(gè) Worker 分配：
- 獨(dú)立內(nèi)存堆?？臻g
- 專屬 JavaScript 執(zhí)行環(huán)境
- 隔離的全局上下文 (
self代替window)
2. 線程間通信機(jī)制
// 主線程
const worker = new Worker('worker.js');
worker.postMessage(data); // 發(fā)送數(shù)據(jù)
// Worker 線程 (worker.js)
self.onmessage = (e) => {
const result = process(e.data); self.postMessage(result); // 返回結(jié)果
}3. 事件循環(huán)隔離
| 特性 | 主線程 | Web Worker |
|---|---|---|
| 事件循環(huán) | UI渲染+JS執(zhí)行 | 純JS執(zhí)行環(huán)境 |
| 阻塞影響 | 導(dǎo)致頁面凍結(jié) | 僅影響自身線程 |
| 任務(wù)優(yōu)先級 | 高(UI響應(yīng)優(yōu)先) | 低(計(jì)算任務(wù)優(yōu)先) |
4. 資源訪問限制
Web Worker 無法訪問：
- DOM API (
document,window) - 父頁面變量/函數(shù)
- 部分BOM API (
alert,localStorage)
但可以訪問：
XMLHttpRequest/FetchsetTimeout/setIntervalWebSocketsIndexedDB
5. 線程生命周期管理
// 創(chuàng)建Worker
const worker = new Worker('worker.js');
// 終止Worker (立即停止)
worker.terminate();
// Worker內(nèi)部自終止
self.close();- 創(chuàng)建開銷：約5-20ms (取決于瀏覽器)
- 內(nèi)存獨(dú)立：Worker崩潰不影響主線程
- 自動(dòng)回收：頁面關(guān)閉時(shí)自動(dòng)銷毀
底層實(shí)現(xiàn)差異（瀏覽器引擎）
| 瀏覽器引擎 | 線程模型實(shí)現(xiàn) | 特點(diǎn) |
|---|---|---|
| Chromium | Blink渲染引擎 + V8隔離實(shí)例 | 每個(gè)Worker獨(dú)立V8實(shí)例 |
| Firefox | SpiderMonkey獨(dú)立上下文 | 共享JIT編譯器但隔離堆棧 |
| Safari | JavaScriptCore獨(dú)立虛擬機(jī) | 精細(xì)內(nèi)存管理 |
性能優(yōu)化要點(diǎn)
- 線程復(fù)用：避免頻繁創(chuàng)建/銷毀 (線程池模式)
- 批量通信：合并多次消息傳遞
- 高效數(shù)據(jù)結(jié)構(gòu)：優(yōu)先使用TypedArray
- 負(fù)載均衡：根據(jù)CPU核心數(shù)動(dòng)態(tài)分配任務(wù)
- 超時(shí)控制：防止僵尸線程
Web Worker 通過線程隔離和高效通信機(jī)制，在保持JavaScript單線程編程模型的同時(shí)，實(shí)現(xiàn)了真正的并行計(jì)算能力，成為現(xiàn)代Web應(yīng)用性能優(yōu)化的關(guān)鍵基礎(chǔ)設(shè)施。
webworker典型應(yīng)用場景
| 場景類型 | 實(shí)例 | 技術(shù)價(jià)值 |
|---|---|---|
| 大數(shù)據(jù)處理 | 實(shí)時(shí)日志分析/金融統(tǒng)計(jì) | 避免遍歷海量數(shù)據(jù)阻塞 UI27 |
| 音視頻處理 | 4K 視頻解碼/Canvas 濾鏡 | 分離計(jì)算與渲染流程17 |
| 高頻交互優(yōu)化 | 游戲物理引擎/傳感器數(shù)據(jù)處理 | 減少主線程壓力25 |
| 預(yù)加載與緩存 | SPA 資源預(yù)載入 | 結(jié)合 Service Worker 提升加載速度 |
webworker實(shí)操
寫在前面：為什么主線程執(zhí)行大量的同步運(yùn)算會導(dǎo)致頁面卡頓？
瀏覽器默認(rèn)會有一個(gè)刷新頻率，這和個(gè)人電腦的默認(rèn)刷新率有關(guān)，一般默認(rèn)為60HZ，也就是瀏覽器頁面會一秒鐘刷新60次，計(jì)算下來差不多每16ms就要刷新一次，才能保證頁面上所有的樣式和布局以及DOM節(jié)點(diǎn)信息是最新的，如果主線程此時(shí)運(yùn)行大量運(yùn)算，超過16ms，就會造成渲染阻塞。這就是需要用webworker分?jǐn)傊骶€程大量運(yùn)算的原因，至于每個(gè)webworker運(yùn)行多久不需要我們擔(dān)心，因?yàn)樗谄渌€程上，每個(gè)worker都是一個(gè)新線程，它不在js主線程上，它的運(yùn)行不會阻塞頁面渲染。
細(xì)節(jié)點(diǎn)補(bǔ)充：
1.如何查看自己電腦上的實(shí)際cpu核數(shù)與邏輯處理器核數(shù)
任務(wù)管理器>性能面板>內(nèi)核數(shù)與邏輯處理器數(shù)(一般邏輯處理器數(shù)會比真實(shí)內(nèi)核數(shù)要多)
2.電腦屏幕刷新率查看：
設(shè)置>系統(tǒng)>屏幕>高級顯示器設(shè)置>刷新率
因?yàn)閣ebworker屬于web API，所以必須要運(yùn)行在瀏覽器環(huán)境下，需要通過live-server插件運(yùn)行示例html或者將相關(guān)代碼放置在一個(gè)vue或react模板工程中執(zhí)行
index.html內(nèi)容
<!doctype html>
<html lang="en">
<body>
<div id="app"></div>
<!-- 啟用webworker效果 -->
<script src="fiberMain.js"></script>
<!-- 不啟用webworker效果 -->
<!-- <script src="fiberWithout.js"></script> -->
</body>
</html>fiberMain.js
// 主線程代碼，引用fiberWorker.js作為worker線程執(zhí)行代碼，實(shí)現(xiàn)大量cpu密集型運(yùn)算從主線程中拆分至worker線程中。
const startTime = Date.now();
// 動(dòng)態(tài)啟用本機(jī)電腦上的cpu邏輯處理器核數(shù)并發(fā)執(zhí)行多個(gè)線程
const workCount = navigator.hardwareConcurrency || 4;
const fiberArr = Array(50).fill().map((_, index)=> 30 + index);
// 創(chuàng)建多個(gè)worker示例
const workers = Array(workCount).fill().map(() => new Worker('./fiberWorker.js'))
const chunkSize = Math.ceil(fiberArr.length / workCount);
// 任務(wù)切片分配給各個(gè)worker
workers.forEach((worker, i) => {
const start = i * chunkSize;
const chunk = fiberArr.slice(start, start + chunkSize);
worker.postMessage({chunk, id : i});
worker.onmessage = (e) => {
// 每個(gè)worker運(yùn)算結(jié)束后worker的單獨(dú)耗時(shí)
console.log('每一個(gè)worker計(jì)算結(jié)果結(jié)束完成后經(jīng)過的毫秒數(shù)：：', (Date.now() - startTime));
}
worker.onerror = function (err) {
console.error(err)
}
})
// 主線程代碼執(zhí)行到這里的耗時(shí)
console.log('主線程同步代碼執(zhí)行完成后的耗時(shí)毫秒數(shù):::', (Date.now() - startTime))fiberWorker.js worker線程所要執(zhí)行的邏輯代碼，需要和fibermain.js搭配使用
// worker計(jì)算邏輯，斐波那契遞歸數(shù)列計(jì)算
self.onmessage = (e) => {
const res = e.data.chunk.map(n => fibonacci(n))
self.postMessage({res, id: e.data.id})
}
// 斐波那契計(jì)算函數(shù)（模擬耗時(shí)操作）
function fibonacci(n) {
if (n <= 1) return n; // 基線條件：fib(0)=0, fib(1)=1
return fibonacci(n - 1) + fibonacci(n - 2); // 遞歸調(diào)用
}fiberWithout.js
// 無worker線程，大量的遞歸運(yùn)算直接運(yùn)行在主線程中的寫法，主線程同步執(zhí)行大量運(yùn)算導(dǎo)致耗時(shí)很長，大概2000ms，會嚴(yán)重阻塞每16ms就要執(zhí)行一次的頁面渲染，導(dǎo)致頁面和用戶交互異?？D。
// 不用worker，主線程單線程計(jì)算
const startTime = Date.now();
const fiberArr = Array(22).fill().map((_, index)=> 20 + index);
function fibonacci(n) {
return n <= 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
}
const res = fiberArr.map(n => fibonacci(n));
console.log('同步計(jì)算的最終結(jié)果：：', res);
console.log('主線程同步計(jì)算的耗時(shí)毫秒數(shù)：：：', (Date.now() - startTime));fiberWithout.js 代碼在主線程上運(yùn)行相同的斐波那契數(shù)列計(jì)算邏輯耗時(shí)2013ms
fiberMain.js 配合 fiberWorker.js 在主線程上運(yùn)行相關(guān)代碼大大縮短同步代碼等待執(zhí)行時(shí)間，因?yàn)榘汛罅康腸pu密集型(遞歸回調(diào))運(yùn)算放置在了多個(gè)worker中運(yùn)算，所以主線程的同步代碼執(zhí)行很快，耗時(shí)2ms，但是這并不意味這worker內(nèi)單個(gè)線程中的運(yùn)算很快速，實(shí)際每個(gè)worker運(yùn)算耗時(shí)加著線程間的通信，單個(gè)worker最長執(zhí)行總耗時(shí)2064ms。
為什么要啟用worker，因?yàn)閖s主線程是單線程，js執(zhí)行與頁面渲染全在主線程上執(zhí)行，js同步代碼執(zhí)行過長會導(dǎo)致渲染阻塞，導(dǎo)致頁面卡頓，如果把上面的運(yùn)算邏輯放在主線程中執(zhí)行(也就是fiberWithout.js這種寫法)，那么會導(dǎo)致頁面有2000多ms的渲染阻塞，因?yàn)閖s主線程需要每16ms就要運(yùn)行一次頁面渲染邏輯。所以會導(dǎo)致頁面卡頓，造成頁面渲染不及時(shí)以及用戶交互得不到及時(shí)響應(yīng)。
把大量的運(yùn)算分散到多個(gè)worker中，相當(dāng)于把主線程的大量運(yùn)算分?jǐn)偟搅似渌€程中，縮減主線程同步代碼至2ms，不會造成頁面卡頓。至于每個(gè)worker運(yùn)行2000ms那不是我們關(guān)心的重點(diǎn)，worker就是用來分?jǐn)傊骶€程的運(yùn)算負(fù)擔(dān)的，防止頁面卡頓。
webworker技術(shù)限制與注意事項(xiàng)
1.無法操作 DOM
Worker 線程無法訪問 window、document 等對象，需通過 postMessage 與主線程通信
2.通信成本控制
頻繁跨線程傳遞大數(shù)據(jù)（如圖像二進(jìn)制流）可能抵消性能優(yōu)勢，需采用 Transferable Objects 優(yōu)化
// 高效傳遞 ArrayBuffer worker.postMessage(buffer, [buffer]);
總結(jié)
到此這篇關(guān)于JS中webworker的作用與實(shí)操的文章就介紹到這了,更多相關(guān)JS webworker詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在前端中Proj4.js使用簡單介紹及進(jìn)階應(yīng)用
這篇文章主要介紹了在前端中Proj4.js使用簡單介紹及進(jìn)階應(yīng)用的相關(guān)資料,Proj4是一個(gè)用于處理JavaScript里的幾何圖形和坐標(biāo)計(jì)算的庫,它提供了多邊形、點(diǎn)、線等幾何對象的計(jì)算功能,需要的朋友可以參考下2025-01-01
利用百度地圖JSAPI生成h7n9禽流感分布圖實(shí)現(xiàn)代碼
本文將詳細(xì)介紹下如何使用百度地圖JSAPI生成的H7N9感染分布圖，有對百度api感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
Number.isInteger()判斷一個(gè)數(shù)值是否為整數(shù)報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Number.isInteger()判斷一個(gè)數(shù)值是否為整數(shù)報(bào)錯(cuò)問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-05-05
這篇文章主要介紹了TS中最常見的聲明合并：接口合并,TS中的聲明合并，指的就是編譯器會針對同名的聲明合并為一個(gè)聲明,合并后的聲明會同時(shí)擁有原先兩個(gè)或多個(gè)聲明的特性,接口的合并也是一樣，它會將雙方的成員放到一個(gè)同名的接口里，更多詳細(xì)內(nèi)容請參考下面文章內(nèi)容2021-12-12
JavaScript通過setTimeout實(shí)時(shí)顯示當(dāng)前時(shí)間的方法
這篇文章主要介紹了JavaScript通過setTimeout實(shí)時(shí)顯示當(dāng)前時(shí)間的方法,涉及javascript操作時(shí)間顯示的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
圖表組件Chart.js是Bootstrap比較好用的組件之一,與一款收費(fèi)的組件highchart類似,效果上來看免費(fèi)與收費(fèi)的產(chǎn)品相差還是有一點(diǎn)點(diǎn)的，不過功能上差不多能滿足我們項(xiàng)目的需要，本文給大家介紹Bootstrap Chart組件使用，需要的朋友參考下吧2016-04-04
javascript中createElement的兩種創(chuàng)建方式
這篇文章主要介紹了javascript中createElement的兩種創(chuàng)建方式,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05
JavaScript?中的字符串操作可能很復(fù)雜，?盡管字符串操作易于掌握，但實(shí)施起來卻具有挑戰(zhàn)性，其中一個(gè)相關(guān)領(lǐng)域是添加新行，這篇文章主要介紹了JavaScript中的行繼續(xù)符操作,需要的朋友可以參考下2023-06-06
JavaScript Dom 綁定事件操作實(shí)例詳解
這篇文章主要介紹了JavaScript Dom 綁定事件操作,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript實(shí)現(xiàn)dom綁定事件的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2019-10-10
在日常開發(fā)中，后端主要提供數(shù)據(jù)以及處理業(yè)務(wù)邏輯，前端主要提供頁面布局以及數(shù)據(jù)展示。本文主要介紹如何實(shí)現(xiàn)一個(gè)簡單獲取IP歸屬地的小程序，感興趣的可以了解一下2022-09-09