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

Contents

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 中執行，並允許你的程式碼在主執行緒上執行。如果兩者捆綁在一起，我們就已經輸掉了這場戰鬥。

🍵參考文章