Will CSS loading block DOM?

This article mainly shows you "CSS loading will block DOM", the content is simple and easy to understand, organized clearly, I hope to help you solve doubts, let Xiaobian lead you to study and learn "CSS loading will block DOM" this article bar.

Does CSS load block DOM?

Let's draw a conclusion first.

CSS does not block DOM parsing, but it blocks DOM rendering

CSS blocks JS execution, but does not block JS file downloads

CSSOM's role

The first is the ability to manipulate stylesheets for JavaScript

The second is to provide basic style information for composition of layout trees

This CSSOM is embodied in DOM as document.styleSheets

From the browser rendering process mentioned earlier, we can see that:

DOM and CSSOM are usually built in parallel, so CSS loading does not block DOM parsing

The render tree is dependent on both the DOM tree and the CSSOM tree, so it must wait until both are loaded to start building renderings, so CSS loading blocks DOM rendering.

Since JavaScript can manipulate DOM and CSS, if you render the interface while modifying these element properties (i.e., JavaScript thread and UI thread), the elements obtained before and after the rendering thread may not be consistent. So in order to prevent unexpected rendering results, the browser sets the GUI rendering thread and JavaScript thread to be mutually exclusive.

JS needs to wait for CSS to download, why? CSS blocks DOM execution

If the content of a JS script is to get element styles, it must depend on CSS. Because the browser cannot perceive what JS wants to do inside, in order to avoid style acquisition, we have to wait for all the previous styles to be downloaded before executing JS. However, JS files and CSS files are downloaded in parallel, CSS files will be loaded and executed before later JS files are executed, so CSS will block the execution of later JS files.

Avoid white screens and improve CSS loading speed

Use CDN (CDN will select the nearest node with cached content to provide resources for you according to your network status, so it can reduce load time)

Compressing CSS

Rational use of cache

Reduce http requests and merge CSS files

The above is "CSS loading will block DOM" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!