This is the 13th day of my participation in Gwen Challenge

Rendering flow chart

First, we need to understand the browser rendering process. As shown in figure

You can see that there are several steps.

  1. Parse the HTML and build the DOM tree

  2. Parses the CSS and generates the CSS rule tree

  3. Combine DOM tree and CSS rules to generate render tree

Question 1: What does CSS block?

CSSDoes not blockDOMThe resolution of

It is obvious that DOM parsing and CSS loading are parallel and unrelated.

CSSBlocking page rendering

CSS does not block DOM parsing, but we can see that our render needs to combine CSSOM and DOM. One is indispensable. If CSS is not loaded, csSOM is not generated and render is not generated. There’s no need to talk about rendering.

CSS loading blocks the execution of subsequent JS statements

When a CSS is followed by an embedded JS, the CSS will block subsequent resources from downloading.

Solution: Place the embedded JS in front of the CSS

The browser maintains the order of CSS and JS in HTML. The stylesheet must be loaded and parsed before the embedded JS is executed, and the embedded JS will block the loading of subsequent resources, so CSS blocking occurs

Question 2: What does JS block?

JS blocks DOM parsing, but the browser “peeks” at the DOM and preloads related resources.

Page rendering is triggered when the browser encounters

All browsers block all other activities (such as downloading other resources, rendering content, etc.) while downloading JS. In order to improve the user experience, the new generation of browsers support parallel JS downloading, but JS downloading still blocks other resources (images, CSS files, etc.).

Reason: To prevent JS from modifying the DOM tree and reconstructing the DOM tree, browsers prevent other resources from being downloaded and rendered

Embedded JS blocks all content from being rendered, but external JS only blocks subsequent content from being displayed

Where should embedded JS be placed

  1. At the bottom, it will only block the rendering of all content, but will not block the downloading of resources (js first).

  2. If the embedded JS is in the head, the embedded JS is in the CSS header

  3. Use defer(you can defer execution until the entire document has been parsed, but not download, as soon as the browser encounters a script)

  4. Do not call functions in embedded JS that take longer to execute. If you must, use setTimeout

  5. Dynamic scripting elements use JS to dynamically create almost all of the document content of HTML