What is Partytown Library?
This means that they are not critical to the functioning of your app. So even if they are running a little bit throttled or a little slower, it wouldn’t matter. But it would be great if they don’t run at the main thread at all. Now let me just back this up real quick. What do I need by that?
Web Workers –
So whatever calculations, whatever stuff you do in this web worker thread, you can do it. Then whenever you want to communicate it to the UI for updating or you doing anything with the DOM specifically, you would have to communicate those changes up the chain. So far, so good. If you understand this, you are ready for Partytown. So now let’s just go ahead and try to understand what exactly Partytown does?
What exactly Partytown does?
So what Partytown does is that then it can essentially take up all of these scripts whichever you say, then it can move the execution of all these scripts from the main thread to a web worker which might seem like an obvious thing to do before this as well, right? Why Partydown exists and why you know this makes so much sense now. Now what Partytown does is something really weird alongside running all these scripts on the web worker. Let’s understand what it does.
Now technically speaking, there is no problem in running a script in a UI thread versus a web worker. The only problem is when the script needs synchronous access to the DOM, this could be a window. (something), this could be a document. (something), and so on. And remember that because you are running this in a web worker, this window, documents, these things are not available. Even if you want to get access to them, you have to cross this asynchronous bridge. And of course, if this is asynchronous then you have to patch this code that is running inside the libraries. That’s not an option, right? Because these libraries are hosted somewhere else and it’s very difficult to patch a specific use case, and if I’m trying something like a document.getElementByID or document.title for example, then I expect this value to immediately return something.
Now, this is, of course, disastrous on the main thread, on the UI thread, because if you do something like this then in this duration let us say this takes 10 seconds to happen, none of the things would work. Clicks, user inputs, scroll stuff like that all stop working for the next 10 seconds. But over here what these guys did is that they actually created a synchronous bridge within the library itself. Let me explain to you what happens.
But this is the way the whole architecture of Partytown works, which is amazing. Because thinking about this part where you make an XML request and then intercept it with the service worker and then make an async request where the network request is synchronous.
It’s still very early days for Partytown but this can have a significant increase in performance if you use a lot of third-party scripts on your website. Of course, it’s an oversimplification. It involves a little bit more work in setting up the course policies and stuff like that for your whole infra to work properly, but if you are able to implement this as a developer it could save a lot of time which your users spend on the main thread. It can make your applications much snappier, responsive especially, for those startups and companies who have the requirement to push everything inside of every single marketing library of your website.
So yeah this is for today’s article. I hope you get something new to learn from this one. I you do, do tell me in the comment section.