Web Workers 調用 API,減輕主執行緒負擔

更新於 發佈於 閱讀時間約 5 分鐘

本篇要解決的問題

這陣子,不知道是不是演算法的關係,看到的文章很常出現「Web Workers」這個詞,查了一下後發現,Web Workers 是一個連 IE10 都支援的功能,看來是歷史悠久牌子老、街頭巷尾都稱讚的 API,就想說來看一下。

看完幾篇教學文,發現應該再早點知道的,可以處理工作上遇到的一些問題。

Web Workers 可以解決的問題,August 想到的有以下:

  • 調用回應時間比較長的 API
  • 在背後收集使用者的行為
  • 想提前載入頁面上其它區塊會需要的資料

總之,就是可以把一些處理時間較長、不必要在頁面一載入就撈取的資料,丟給另一條執行緒去處理,不讓主執行緖有阻塞,進而減少使用者在操作上會有的卡頓感。

本篇會先簡單說明什麼是 Web Workers,接著是使用方法,以及附上 August 最想應用的方式:調用 API 的 Demo。


簡單解釋 Web Workers

本段最後會提供的參考資源,把 Web Workers 都解釋得很清楚了,所以這段的說明,會用 August 的方式來簡單形容。

我們假設瀏覽器是一間便利商店,這間便利商店因為慣老闆的原因(咦?),只有一位員工,這位員工就是 JS 的主執行緒。超商員工是很辛苦的,又要上架商品、又要結帳、又要煮咖啡、又要幫顧客找網購的商品,然後薪水才這麼一點(哎這樣說好嗎?)

通常,「找網購商品」這件事是耗時最久的,因為員工要在一堆的包裹裡找到特定顧客的那件,耗掉的時間有可能會阻礙結帳,讓結帳的人流排到店門口。而這件事就是網頁上最常發生的調用 API,是不是很像?在 API 回應我們特定需要的資料前,我們就只能等,還什麼事情都不能做。

後來,老闆覺得這樣累績負面評價有害公司的名聲(如:讀取時間會影響 SEO 排名),所以他選擇了最快的解決方式:再找一位員工來,讓他在後面協助處理找包裹這件事,如果煮咖啡也覺得久,那就讓他順便處理煮咖啡好了。這位新來的員工,就是這篇在講的 Web Workers。

Web Workers,就是在網頁上除了 JS 主執行緒之外的另一條執行緒。

參考資源:


Web Workers 使用

Web Workers 的使用方式很簡單,整理成下圖:

Web Workers 使用說明

Web Workers 使用說明

網頁的 JS 跟 Web Workers 溝通的方式就是 postMessageonmessage

postMessage 是傳送資料。

onmessage 是接收資料。

我們先看網頁上的主要 JS,我們命名為 main.js。

main.js

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

// 傳送資料
work.postMessage({ name: 'August' });

// 接收 Web Workers 來的資料
worker.onmessage = e => {const data = e.data;console.log(data);}

接著來看 Web Workers 的內容,我們命名為 work.js。

work.js

importScripts('https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.0/axios.min.js');

// 接收資料
self.onmessage = e => {
const data = e.data;
if(data) {
const result = axios.post(...); // 調用 API
self.postMessage(result); // 傳送資料
}
}


是的,你沒看錯,我也沒寫錯,work.js 在 importScript 時,可以引用 CDN,而且寫程式的方式可以用 ES6。

這點因為看的教程上都沒有,是問了 ChatGPT 後,再透過實作去嘗試才知道的。


Web Workers 使用範例:調用 API

最後這段,是 August 寫了一個 Demo,讓 Web Workers 來處理調用 API 的部份,然後回傳給主執行緒,讓網頁上呈現結果。

完整的原始碼已放上 GitHub,不過有一段 August 想列出來,就是 Web Workers 處理 API 的部份。

原本 August 自己寫了一個,結果丟給 ChatGPT 看,想問它還有沒有可以優化的地方,殊不知,它就給了一個加上「限制最大請求數」的方式,覺得這樣子的方式更符合實際需求,就採用了。


Demo、原始碼

本篇的 Demo 跟原始碼,都放上 GitHub,取用前請分享此篇文章,或對 GitHub 專案點個星星,你的小小舉動,對本站都是大大的鼓勵。

Demo:https://letswritetw.github.io/letswrite-web-workers/

原始碼:https://github.com/letswritetw/letswrite-web-workers

留言
avatar-img
留言分享你的想法!
avatar-img
Let's Write 的沙龍
9會員
19內容數
沙龍到底是…做什麼用的勒?
Let's Write 的沙龍的其他內容
2024/08/24
了解如何在 GitLab 中設置和使用 CodiumAI PR-Agent 進行 AI Code Review,自動檢查和改進程式碼。本文提供詳細步驟,包括環境設置、提交必要檔案,以及如何使用 OpenAI API Key 進行配置。
Thumbnail
2024/08/24
了解如何在 GitLab 中設置和使用 CodiumAI PR-Agent 進行 AI Code Review,自動檢查和改進程式碼。本文提供詳細步驟,包括環境設置、提交必要檔案,以及如何使用 OpenAI API Key 進行配置。
Thumbnail
2024/08/07
了解如何使用 Cloudflare Workers AI 與 Whisper 建立免費開源的語音辨識功能。本文詳細說明註冊步驟、部署流程及程式碼修改,讓你輕鬆將語音轉換成文字。
Thumbnail
2024/08/07
了解如何使用 Cloudflare Workers AI 與 Whisper 建立免費開源的語音辨識功能。本文詳細說明註冊步驟、部署流程及程式碼修改,讓你輕鬆將語音轉換成文字。
Thumbnail
2024/06/05
學習如何使用 Tensorflow.js 的 COCO-SSD 模型在網頁上進行圖片物件辨識,包括基本使用方法、進階應用及實作範例,輕鬆辨識圖片中的人數和物件。
Thumbnail
2024/06/05
學習如何使用 Tensorflow.js 的 COCO-SSD 模型在網頁上進行圖片物件辨識,包括基本使用方法、進階應用及實作範例,輕鬆辨識圖片中的人數和物件。
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
某單位志工服務時數記錄在檔案內,需匯入衛福部志工系統,但由於志工多、檔案多,進行人工計算耗時費工且常累計算錯。故提此法改善,提高效率。文章內容包含了作業流程、作業說明、實例說明、改善前後、展開運用和設計編寫。
Thumbnail
某單位志工服務時數記錄在檔案內,需匯入衛福部志工系統,但由於志工多、檔案多,進行人工計算耗時費工且常累計算錯。故提此法改善,提高效率。文章內容包含了作業流程、作業說明、實例說明、改善前後、展開運用和設計編寫。
Thumbnail
(這篇不是教你如何寫程式,也不是教你怎麼使用Chatgpt) 你有沒有想過,一樣是8小時,為什麼同事總可以處理很多事情?而你每天都要加班,結果還總是不盡人意呢?過去你可能會合理化說,是因為自己經驗不足、工作方法有待加強,或是時間管理不佳。依據我自己的觀察,高效與無效跟思維能力有關。
Thumbnail
(這篇不是教你如何寫程式,也不是教你怎麼使用Chatgpt) 你有沒有想過,一樣是8小時,為什麼同事總可以處理很多事情?而你每天都要加班,結果還總是不盡人意呢?過去你可能會合理化說,是因為自己經驗不足、工作方法有待加強,或是時間管理不佳。依據我自己的觀察,高效與無效跟思維能力有關。
Thumbnail
前陣子引起新創圈熱烈討論的是,某家公司驚人地運用ChatGPT,成功優化人資的計薪流程,並簡化人資編制3人。這是現實中的創新案例。而你知道嗎?你也可以成為工作中的「流程殺手」,優化人資流程,提高效率,不需要依賴程式碼或AI。只需要一個簡單的方法。
Thumbnail
前陣子引起新創圈熱烈討論的是,某家公司驚人地運用ChatGPT,成功優化人資的計薪流程,並簡化人資編制3人。這是現實中的創新案例。而你知道嗎?你也可以成為工作中的「流程殺手」,優化人資流程,提高效率,不需要依賴程式碼或AI。只需要一個簡單的方法。
Thumbnail
提高工作效率,不僅能帶著輕鬆愉悅的心情下班,也會更有動力及自信面對明日的挑戰,不妨就從明天開始,將這些小撇步融入到生活之中。 任職於外資企業的電商人,職位是Account Manager,主要是幫助賣家經營店鋪,同時幫助電商平台招募更多優質的賣家。顯而易見,大甲方是平台,小甲方是賣家,工作的時效性很
Thumbnail
提高工作效率,不僅能帶著輕鬆愉悅的心情下班,也會更有動力及自信面對明日的挑戰,不妨就從明天開始,將這些小撇步融入到生活之中。 任職於外資企業的電商人,職位是Account Manager,主要是幫助賣家經營店鋪,同時幫助電商平台招募更多優質的賣家。顯而易見,大甲方是平台,小甲方是賣家,工作的時效性很
Thumbnail
「每個工作者,不論是個人還是團隊,都應該把自己當作是管理多個生產線的工廠。」上回寫《如何把工作快狠準搞定?洞悉流程才是關鍵》,意外獲得滿多迴響,決定寫個續篇,來補充一些當時寫完之後想加入的內容。 其中一個想補充的是針對下面這段話: 然後,擴及到去洞悉其他任務、其他工作者、其他內外部組織的工作流程。
Thumbnail
「每個工作者,不論是個人還是團隊,都應該把自己當作是管理多個生產線的工廠。」上回寫《如何把工作快狠準搞定?洞悉流程才是關鍵》,意外獲得滿多迴響,決定寫個續篇,來補充一些當時寫完之後想加入的內容。 其中一個想補充的是針對下面這段話: 然後,擴及到去洞悉其他任務、其他工作者、其他內外部組織的工作流程。
Thumbnail
前言 會寫這一篇,其實是自從離開上一份工作後,從群組中(當然是退掉大部分工作群組了),看到暫時接手的同仁處理事情的狀況,而有感而發。 時間久了,也變得相當擅長。 打雜 各種狀況的說詞 比如: 群組中的客服:客人無法正常下載App,這樣怎麼辦? 就這樣,簡單、快速的處理這個雜事! 記帳 結語
Thumbnail
前言 會寫這一篇,其實是自從離開上一份工作後,從群組中(當然是退掉大部分工作群組了),看到暫時接手的同仁處理事情的狀況,而有感而發。 時間久了,也變得相當擅長。 打雜 各種狀況的說詞 比如: 群組中的客服:客人無法正常下載App,這樣怎麼辦? 就這樣,簡單、快速的處理這個雜事! 記帳 結語
Thumbnail
在群眾集資平台擔任平台專員(客戶成功專員)時,不斷在優化「專案管理執行效率」、「大量服務客戶的公版流程」,過程中也在思考自身實際的貢獻與職場價值,因此想透過這篇整理我觀察到的專案數據優化、客戶輔導細節。
Thumbnail
在群眾集資平台擔任平台專員(客戶成功專員)時,不斷在優化「專案管理執行效率」、「大量服務客戶的公版流程」,過程中也在思考自身實際的貢獻與職場價值,因此想透過這篇整理我觀察到的專案數據優化、客戶輔導細節。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News