“This is the fifth day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

Browser Rendering process

Graph TD browser parsing HTML --> DOM tree CSS rule tree CSS rule tree -->render tree dom tree -->render tree layout -->render tree

concept

The dom tree

The browser parses the HTML into a tree of data structures

CSS rules tree

Browsers parse CSS into a tree of data structures.

Render tree

DOM and CSSOM are combined to generate a Render Tree.

Layout (Render tree)

With Render Tree, browsers already know what nodes are in a web page, the CSS definition of each node, and their dependencies to figure out where each node is on the screen.

Painting (Render tree)

According to the calculated rules, through the graphics card, draw the content on the screen.

Reflow

Each element in the DOM structure has its own box model, which requires the browser to evaluate it according to various styles and place the element where it should appear, a process called reflow

Trigger Reflow condition

  • Adding, deleting, or modifying Dom nodes results in Reflow or Repaint
  • When you move the DOM, or when you animate it
  • Resize the window, or scroll it
  • When modifying the default font of a web page

Repaint

Redraw the definition of when the position of all kinds of box, size, and other properties, such as the background color of an element, text color, border color, and so on does not affect it around or internal layout properties, part of the screen to draw, but elements of geometry size does not change, the browser then draw these elements according to their characteristics, The content of the page appears, a process called repaint.

The condition in which blocking occurs

  • When a script tag loads a JS, it loads the JS and does not start rendering until it finishes executing
  • An alert is blocked
  • CSS loading does not block parsing of the DOM tree, but CSS loading does block rendering of the DOM tree

CSS loading also blocks the execution of subsequent JS statements

Conclusion is

Parsing when a link, script, or IMG tag is encountered, the browser sends a request for resources to the server. Loading or executing a script blocks HTML parsing, other download threads, and rendering threads. Once the CSS is loaded, link parses into a CSSOM(cascading style sheet object model, a tree containing only style information). Loading and parsing of CSS does not block parsing of HTML, but it does block rendering. Img loading does not block HTML parsing, but img loading does not Render, and it has to wait for the Render Tree to be generated before rendering with the Render Tree. Images that have not been downloaded will not be rendered until they have been downloaded.

Optimization method

1. Use caching wisely

2. Consider CDN acceleration

3. Reduce the number of HTTP requests

4. Note where to import external CSS and JS files