Main thread JS
Critical JS – Typically JS that only affects above the fold elements of a page such as Hamburger menu click event, or any other button click to show popup, etc.
Asynchronous JS – The JS that a page needs on ready event or before onload event.
Defer JS – The JS that can be loaded onload that is after all the page content and assets are downloaded.
Worker Thread JS – The JS that we can load lazily and run only on specific events or user interactions such as scroll, click, etc.
Here is how a web page gets rendered. As you can see in the above diagram, when a page request is made:
The network sends a response with HTML, which might take less than 100ms based on the server performance.
Once all CSS resources are collected and ready, the Build CSSOM process gets started. The time taken by this process will depend on the number of CSS files we have on the page. Inline CSS added on the page gets build really quickly as compared to the files requested using HTTP requests i.e. normal CSS stylesheet links.