fbpx

Partytown : 將前端資源密集型的第三方 script 從主執行緒中轉移到 web worker 中

Partytown 是一個以逸待勞延遲( lazy ) 的載入程式庫,幫助將資源密集型 script 轉移到 web worker 中,並脫離主執行緒。它的目標是透過將主執行緒專用於你的程式碼,並將第三方 script 解除安裝到 web worker,來幫助加快網站速度。

其理念是,主執行緒應該專用於你的程式碼,任何不需要在關鍵路徑上的 script 都應該被轉移到 web worker。毫無疑問,主執行緒的效能比 web worker 的執行緒效能更重要。

Partytown是如何運作的

傳統上,主執行緒和工作執行緒之間的通訊必須是非同步的。也就是說,兩個執行緒要進行通訊,不能使用阻塞式呼叫( blocking calls)。

Partytown 則不同。它允許從 web worker 執行的程式碼同步訪問 DOM。這樣做的好處是,第三方指令碼可以繼續完全按照它們的編碼方式工作

例如,下面的程式碼在 Web Worker 中如期工作。

const rect = element.getBoundingClientRect();

console.log(rect.x, rect.y)。

你會注意到的第一件事是,這裡沒有 async/await、promise 或 callback。相反,對getBoundingClientRect() 的呼叫是阻塞的,而且返回的 rect 值包含預期的x和y屬性。

Partytown 相依於 Web Workers、Service Workers、JavaScript Proxies,以及它們之間的通訊層。

目前有兩種方法可以在 Web Worker 和主執行緒之間進行同步通訊,那就是結合 Service Workers 的同步 xhr 請求,以及Atomics。

開始使用

Partytown 與大多數 Web 開發程式庫的不同之處主要在於其設定和配置的要求。在最底層,Partytown 可以與普通的 HTML 一起工作,這意味著它不需要成為建構過程的一部分,不需要捆綁器,不需要特定的框架,等等。因為它可以與任何 HTML 頁面整合,這也使得它更容易為幾乎任何生態系統建立包裝元件或外掛,如Shopify、Wordpress、Nextjs、Gatsby等。

與大多數 Web 開發程式庫不同的是,Partytown 不會與你現有網站的 JavaScript 捆綁在一起。相反,它有意要與你的程式碼分開,以便它能在 Web Worker 中執行,並允許你的程式碼在主執行緒上執行。如果兩者捆綁在一起,我們就已經輸掉了這場戰鬥。

🍵參考文章

專案網址

支持 Soft & Share

💥 udemy 從 12/5 ~ 12/7 全站課程最低價 NT330 起

如果您覺得我們提供的內容服務還不錯,歡迎透過對以下產品/服務的購買投資來支持本站的營運走得更遠

如果暫時還不需要以下的付費服務,幫我們把這個網站分享給有需要的朋友,您的小小舉動會對 Soft & Share 有莫大的幫助!感謝您的支持!

🎈如果您點選優惠連結後,還是沒有看到優惠價格,麻煩您將瀏覽器的 cookie 清除 ( 清除 udemy 網站的就可以了 ),然後重新點選優惠連結就可以了

不受 FB 演算法影響,歡迎透過 e-mail 訂閱網站更新

Comments are closed.

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: