Thread by @Steve8708

How Partytown works thread: 🧵 👇

First, what is Partytown? It's a JS library that lets you offload 3rd party scripts to a web worker to remove the negative performance impact they can have on your site

https://twitter.com/Steve8708/status/1516227273556324354

How do you integrate Partytown? You can easily add it to any site with a small snippet, and then tag any scripts that you want to load in the Web Worker with type="text/partytown" partytown.builder.io/html

Any scripts that you add type="text/partytown" will load by default in a Web Worker, but have full access to global variables

We use JS Proxies to supply main thread globals to the worker thread, by intercepting them and forwarding to the main thread

And here is the magic part: we use a *synchronous* xhr request to block the worker thread to retrieve the needed value from the main thread

And now we can use a Service Worker to intercept the /proxytown request, and async postMessage to the main thread to get the needed value, and return it

And that's it! The end result: you can now seamlessly drop in a whole range of third party scripts to run in a web worker, removing the main thread perf cost of them

You can learn more about Partytown here: github.com/builderio/part…

Bonus - if you are wondering how Partytown handles objects or functions as return values, we can’t send the actual ref back, send back a proxy object pointing to it. When methods are accessed or called, we invoke them on the original and send the value back

Bonus pt 2: a better look at what happens in each thread

https://twitter.com/Steve8708/status/1518627517397016576