Web Workers實(shí)戰(zhàn)教程基于HTML Standard規(guī)范用5個(gè)官方Demo跑通單核到多核并行計(jì)算【免費(fèi)下載鏈接】htmlHTML Standard項(xiàng)目地址: https://gitcode.com/gh_mirrors/ht/htmlWeb Workers 是讓網(wǎng)頁(yè)擁有后臺(tái)并行計(jì)算能力的核心 API而 HTML StandardHTML 標(biāo)準(zhǔn)規(guī)范倉(cāng)庫(kù)內(nèi)置了一整套官方 Worker Demo覆蓋單核計(jì)算、多核并行、模塊化工人、共享工人和加密庫(kù)等 5 大場(chǎng)景。本教程基于 HTML Standard 規(guī)范中的 demos/workers/ 目錄帶你從零基礎(chǔ)跑通 5 個(gè)官方示例理解單核到多核并行計(jì)算的完整思路。一、為什么需要 Web Workers網(wǎng)頁(yè)的 JavaScript 默認(rèn)跑在主線程上一旦某個(gè)耗時(shí)的循環(huán)開始執(zhí)行頁(yè)面就會(huì)卡住、點(diǎn)擊無(wú)響應(yīng)。Web Workers 的解決思路很直接——把重計(jì)算挪到一個(gè)獨(dú)立的后臺(tái)線程執(zhí)行頁(yè)面 UI 保持流暢計(jì)算完成后 Worker 通過postMessage把結(jié)果發(fā)回主線程更新界面。整個(gè)通信模型就是輸入 → 后臺(tái)處理 → 輸出的數(shù)據(jù)流 記住兩個(gè)核心方法主線程用new Worker(xxx.js)創(chuàng)建工人、用worker.postMessage()發(fā)消息Worker 內(nèi)部用postMessage()回傳結(jié)果、用onmessage接收消息。二、官方 5 個(gè) Demo 全景速覽 ?HTML Standard 倉(cāng)庫(kù)的 demos/workers/ 目錄下有 5 個(gè)由淺入深的示例Demo路徑核心知識(shí)點(diǎn)① 單核素?cái)?shù)demos/workers/primes/最簡(jiǎn) Workeronmessage回傳結(jié)果② 多核并行demos/workers/multicore/一個(gè) Worker 再開 10 個(gè) Worker③ 模塊化工人demos/workers/modules/type: moduleimport 導(dǎo)入過濾模塊④ 多視圖共享demos/workers/multiviewer/SharedWorker 多窗口共享數(shù)據(jù)⑤ 加密庫(kù)demos/workers/crypto/MessageChannel 點(diǎn)對(duì)點(diǎn)專用通道三、Demo 1單核素?cái)?shù)搜索primespage.html 是學(xué)習(xí) Web Workers 的最佳起點(diǎn)頁(yè)面只有一行關(guān)鍵代碼var worker new Worker(worker.js);Worker 端的 worker.js 是一個(gè)死循環(huán)不斷尋找下一個(gè)素?cái)?shù)每找到一個(gè)就postMessage(n)發(fā)回頁(yè)面頁(yè)面實(shí)時(shí)把當(dāng)前最大素?cái)?shù)顯示在output里。?關(guān)鍵收獲Worker 線程與主線程完全隔離不能直接訪問 DOM一切交流都靠消息這是 Worker 編程的第一心智模型。四、Demo 2多核并行計(jì)算multicore單核不夠快worker.js 演示了Worker 里的 Worker它一口氣創(chuàng)建num_workers 10個(gè)子工人把 1000 萬(wàn)項(xiàng)計(jì)算任務(wù)均勻切塊分給每個(gè)子工人并行執(zhí)行。每個(gè)子工人 core.js 的套路非常標(biāo)準(zhǔn)onmessage分兩步收到任務(wù)的起始值start和結(jié)束值end執(zhí)行完計(jì)算后postMessage(result)交回結(jié)果并close()關(guān)閉自身主 Worker 用pending_workers計(jì)數(shù)器收集所有結(jié)果湊齊 10 份才向頁(yè)面匯報(bào)最終答案。?關(guān)鍵收獲這就是最經(jīng)典的任務(wù)分片task partitioning并行計(jì)算模式——切任務(wù)、分工人、匯結(jié)果性能可隨核數(shù)線性提升。五、Demo 3模塊化 Worker 與圖像濾鏡modules傳統(tǒng) Worker 是一個(gè)大文件而 page.html 展示了更工程化的寫法const worker new Worker(worker.js, { type: module });加上{ type: module }后worker.js 就能用 ES 模塊語(yǔ)法import * as filters from ./filters.js引入濾鏡庫(kù)。filters.js 里導(dǎo)出grayscale灰度和brighten提亮 20%兩個(gè)像素處理函數(shù)Worker 拿到圖像數(shù)據(jù)、應(yīng)用濾鏡后還用postMessage(imageData, [imageData.data.buffer])把內(nèi)存緩沖區(qū)轉(zhuǎn)移transfer回主線程——零拷貝飛快官方 Demo 的候選圖像就包括這張倉(cāng)庫(kù)里的 robots.jpeg 示例圖?關(guān)鍵收獲模塊 Worker 轉(zhuǎn)移對(duì)象Transferable是現(xiàn)代前端圖像處理、點(diǎn)云渲染等重場(chǎng)景的標(biāo)準(zhǔn)配置。六、Demo 4SharedWorker 多窗口共享multiviewer普通 Worker 是一人一份而 SharedWorker 能讓多個(gè)頁(yè)面共享同一個(gè)后臺(tái)線程。page.html 每次點(diǎn)擊按鈕就打開一個(gè) viewer 窗口所有窗口都連接到同一個(gè) worker.js 里的迷宮地圖數(shù)據(jù)。它的通信模型多了一層port主頁(yè)面用new SharedWorker(test.js)后必須通過worker.port.onmessage收消息注意不是worker.onmessageWorker 端則監(jiān)聽onconnect事件、從event.ports[0]取到通信端口。同一套思路的最小示例在 shared/001/test.js 里只有 3 行。?關(guān)鍵收獲多標(biāo)簽頁(yè)狀態(tài)同步、協(xié)作光標(biāo)、跨窗口聊天——SharedWorker 是天然的選擇。七、Demo 5加密庫(kù)與 MessageChannelcrypto最后一個(gè) Demo 展示點(diǎn)對(duì)點(diǎn)專用通道。page.html 把一個(gè)加解密庫(kù) libcrypto-v1.js 放進(jìn) Worker每次加密/解密都通過new MessageChannel()開辟一條臨時(shí)私密通道port2轉(zhuǎn)交給 Workerport1留在主線程密鑰生成、加密、解密都在后臺(tái)線程完成頁(yè)面只負(fù)責(zé)收發(fā)消息任務(wù)完成后port.close()關(guān)閉通道干凈利落。?關(guān)鍵收獲MessageChannel 讓哪個(gè)線程只和誰(shuí)說話變得可控是構(gòu)建并發(fā)安全應(yīng)用的關(guān)鍵件。八、總結(jié)如何選型你的 Worker你的需求推薦方案參考 Demo頁(yè)面卡頓想挪走重計(jì)算普通Workerprimes數(shù)據(jù)量大需要榨干多核Worker 池 任務(wù)分片multicore代碼復(fù)雜想模塊化組織type: modulemodules多個(gè)頁(yè)面/窗口共享狀態(tài)SharedWorkermultiviewer需要點(diǎn)對(duì)點(diǎn)私密通信MessageChannelcryptoWeb Workers 的 API 其實(shí)很小真正的門檻在于并發(fā)思維。HTML Standard 倉(cāng)庫(kù)這 5 個(gè)官方 Demo 由簡(jiǎn)到繁正好構(gòu)成一條完整學(xué)習(xí)路徑建議按順序在本地瀏覽器需通過 http 服務(wù)器訪問Worker 不支持 file 協(xié)議逐一跑起來(lái)配合 DevTools 的 Worker 調(diào)試面板單核到多核的并行計(jì)算能力就到手了 【免費(fèi)下載鏈接】htmlHTML Standard項(xiàng)目地址: https://gitcode.com/gh_mirrors/ht/html創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考