The impact of JavaScript loading, parsing, and execution on browser rendering

The way JavaScript is loaded, is always to use script on the page to declare, and dynamic loading of these methods, and dynamic loading, in many JS libraries can be very good to deal with, so as not to block the loading of other resources, and its parallel loading down. Such dynamic asynchronous loading methods are listed as follows: Ajax, DOM Element Insert, Iframe, document.write, defer, and so on. These can be very good processing JS in the loading time does not block the problem of resource loading, but the execution of JS will still block the browser rendering. Perhaps this is the cost of having to pay, there are some ways to alleviate JS in the execution of the browser when the rendering of the delay caused by the impact of it?

First, let's analyze the behavior of the entire page and JavaScript from the perspective of the UI Thread, UI Queue, UI upate. The browser is loading the HTML to the last rendered process, the whole is a UI thread process, the UI thread is a browser response queue, and the UI queue is the browser's behavior queue, including UI Update,javascript execution behavior. In the process of page loading, UI Update, JS loading, JS parsing, JS execution, etc. are stored in the queue. Both the UI Thread and the UI Queue are in order. The page at the beginning did not encounter JS loading and execution, is a UI update process, once encountered JS, will wait for JS loading, parsing, execution, and then start UI update, such a corresponding order.

Then when the JS loading is asynchronous, this time, JS loading and parsing will not be in the UI queue execution queue, but wait until the JS loading, parsing complete, one to execute, when it is added to the UI queue queues, blocking the UI queue in the following behavior (UI Update) is executed. This is the beginning of the execution period of the JS will always block the page rendering, that is, UI Update. However, this dynamic loading method with normal in the page using the script tag to load when the advantage is: JS loading, parsing behavior Independent, do not affect the browser UI Update, know that the execution period is blocked. This speeds up the rendering and presentation of the page to a great extent.

So how can JS's execution have a smaller impact on UI update? Using the HTML5 worker mechanism, the complex JS execution to the worker to execute, the worker is a separate JS execution environment, the environment does not have the concept of window, DOM, just to deal with complex operations, Then the processed results are sent through the PostMessage method to the browser, the worker and the page through the PostMessage method to achieve the data exchange with the browser. In this way, after the complex operation is given to the worker, the JS code executed in the page will be greatly reduced to a minimum of one onmessage event to minimize the JS execution time of the page.

Cups or defer, async, workers can not be fully compatible with the current popular browser, looking forward to the browser unification of the day

The impact of JavaScript loading, parsing, and execution on browser rendering