fbpx

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

🍵參考文章

專案網址

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

支持 Soft & Share

❤️您應該有留意到,我們的網頁並不會出現干擾人的跳出煩人的廣告或是在內容中嵌入廣告,因為我們發現這樣對閱讀網頁的內容體驗真的是不好!

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

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

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

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

Comments are closed.

Powered by WordPress.com.

Up ↑

%d