Welcome to my personal blog to share front-end techniques, interview questions, interview techniques and more

The introduction of

When it comes to page rendering, the most important thing is the key render path

Usually when you write a page, all you need to do is write HTML, Css, JavaScript and it will look pretty on the screen, but how does the browser use our code to render pixels on the screen? The Critical Rendering Path is a set of steps that browsers go through to convert HTML, Css, and JavaScript to the actual pixels displayed on the screen.

The process by which a browser renders a page

From the point of view of time, the browser requests, loads, renders a page, the time spent in the following five items

  • The DNS query
  • A TCP connection
  • HTTP request and response
  • Server response
  • Client-side rendering

This article discusses the fifth part, the browser rendering of content

  1. Process HTML to generate a DOM tree
  2. Process Css to generate a CssDOM tree
  3. Combine the two trees into a Render tree
  4. Render tree layout calculation
  5. Draw each node in the Render tree to the screen

If the DOM or CssDOM is modified, this process needs to be repeated in order to figure out which pixels will be re-rendered on the screen.

Detailed analysis of

  1. The browser parses the OBTAINED HTML code into a DOM tree. Each tag in the HTML is a node in the DOM tree. The root node is the document object we commonly use
  2. The browser parses all styles (mainly Css and the browser’s default style Settings) into a style structure. In the process of parsing, it removes styles that are not recognized by the browser and generates a CssDOM tree
  3. DOM tree and CssDOM Tree are merged into render Tree, where each node has its own style and the Render Tree does not contain hidden nodes (e.gdisplay: noneAnd unstyled nodes<head>Nodes), because these nodes are not used for rendering and do not affect rendering.Note:visibility: hiddenHidden elements will still be included in the Render Tree becausevisibility: hiddenIt will affect the layout and take up space
  4. After the render Tree is built, the layout is calculated according to the style. The output result of the layout stage is called “box-model”. The box model accurately represents the position and size of each element in the window, and all relative units of measure are translated into absolute pixel positions on the screen (according to Css2 standards, Render each node of the tree are called box), box all attributes: width, height, margin, padding, left, border…
  5. Rendering this information into every real pixel on the screen is called “rendering,” or “rasterization.”

Render block

Modern browsers always load resources in parallel.

When the HTML parser is blocked by a script, the parser stops building the DOM but still recognizes the resources behind the script and preloads them.

  1. By default, Css is treated as a resource that blocks rendering, which means that the browser will not render any processed content until the CssDOM is built
  2. JavaScript can read and modify not only DOM properties, but also CssDOM properties

Browsers delay JavaScript execution and DOM building when there are blocking Css resources

  1. When the browser encounters a script tag, DOM build is paused until the script completes execution
  2. JavaScript can query and modify DOM and CssDOM
  3. When CssDOM is built, JavaScript execution is paused until CssDOM is ready

The location of the script tag is important, and the actual use should place resources at the bottom of the page

Defer and async

Note: Both async and defer properties are invalid for inline-script

defer

The defer attribute represents the delayed execution of the imported JavaScript; the HTML does not stop parsing when the code loads, and the two processes are parallel. When the entire DOM has been parsed and deferred -script has loaded, the JavaScript code in deferred -script is executed.

The execution result is placed after the HTML tag has been parsed

async

Async is asynchronous loading of JavaScript. The HTML does not stop parsing when the code loads, and the two processes are parallel. When async-script is loaded, the JavaScript code in async-script is immediately executed.

The result of execution may be before or after the HTML tag parsing is complete

Dynamically Creating labels

Scripts created with document.createElement(‘script’) are asynchronous by default

console.log(document.createElement("script").async); //true
Copy the code

Redraw rearrangement

Rearrangement and redrawing can affect performance

  1. We calculate their exact position and size in the current device. This is exactly what happens in the layout phase, also known as “reflow” in English, when part (or all) of the Render Tree needs to be rebuilt due to the size, layout, hiding, etc of the elements. It also backflows (actually I think it’s simpler to call it relayout). Each page needs to be refluxed at least once, the first time the page loads.
  2. ** When some elements in the Render Tree need to update attributes that only affect the appearance, style of the element, not the layout, e.gbackground-color, is called redraw

Method that triggers a rearrangement

The following properties and methods need to return the latest layout information and recalculate the render tree, causing backflow and triggering a rearrangement to return the correct value. It is recommended that they be combined to reduce the number of backflows. These attributes include: offsetTop, offsetLeft, offsetWidth, offsetHeight; ScrollTop, scrollLeft, scrollWidth, scrollHeight; ClientTop, clientLeft, clientWidth, clientHeight; GetComputedStyle (), currentStyle ()

Improving web performance means reducing the frequency and cost of “rearranging” and “redrawing” and triggering re-rendering as little as possible.

DOM changes and style changes trigger rerendering. However, browsers have been smart enough to put all the changes together in a single queue and do it all at once, avoiding multiple rerenders.

Optimization method

Theoretical optimization method

  1. Multiple reads (or writes) of the DOM should be placed together without a write inserted between two reads
  2. Operate the DOM offline. Such as using hidden elementsdocument.createDocumentFragment().cloneNode()
  3. Add the class name when modifying the style, or add it once todom.style.cssTextfine

Hope to read this article you have help, have inspiration, if there is not enough, welcome to criticize the exchange!

Welcome to my personal blog to share front-end techniques, interview questions, interview techniques and more

Hard to sort out for a long time, but also hope to manually praise encouragement ~

‘Extract’ is not simply “paste -> copy”, but eye to, hand to, heart to beat down every word.

Blog statement: all reprinted articles and pictures are only used for the author’s own collection and study purposes. If requested or deemed appropriate, attribution and source will be given. If you do not want a work to be re-used, please inform the site in time, the site will be deleted in time.