The profile

  1. The nature of browser rendering;
  2. Introduce backflowreflowAnd re-paintrepaint;
  3. How to optimize performance;

Browser rendering

For an ordinary web page, the browser needs to build DOM (Document Object Model) and CSSOM (CSS Object Model) trees before rendering.

DOM

Where do DOM trees come from? Let’s assume that a web page consists of some text and an image:

The browser will pass through:

  • Conversion: The browser reads the raw bytes of HTML from disk or the network and converts them into characters based on the specified encoding of the file.
  • Tokenization: The browser converts strings to various tokens specified by the W3C standard, such as “”,” “, and other strings in Angle brackets. Each token has a special meaning and a set of rules.
  • Lexical analysis: Tokens are transformed into “objects” that define their properties and rules.
  • DOM construction: Since HTML tags define relationships between different tags (some tags are contained within other tags), the objects created are linked within a tree data structure that also captures parent-child relationships defined in the tags: The HTML object is a parent of the body object, the body is a parent of the Paragraph object, and so on.

The final output of this process is the document Object Model (DOM) of our normal page, which the browser will use for subsequent processing of the page.

Each time a browser processes an HTML tag, it takes time to complete each of these steps, and more time to complete a page with a lot of HTML processing.

CSSOM

As with HTML, the browser engine needs to translate the CSS rules it receives into something the browser can understand and process.

CSS bytes are converted into characters, then tokens and nodes, and finally linked into a tree structure called the CSS Object model (CSSOM). Building a CSSOM tree is a performance-intensive process.

Finally, the CSSOM tree and DOM tree are combined into a render tree, which calculates the layout of each visible element and then outputs it to the rendering process, eventually rendering the pixels to the screen.

backflowreflowAnd re-paintrepaint

Reflow is sometimes translated as rearrangement.

Redraw: to repaint an area.

Understanding backflow is a little more complicated. We add and delete DOM nodes, change the size of an element, change the layout of the page, and change the structure of the DOM tree. The DOM tree is closely linked to the render tree, and once the DOM tree is built, the render tree will render the page again.

Redraw: If you change the style of the DOM (such as the element’s visibility, color, background-color, etc.) without affecting the layout of the page, the browser will draw a new style for the element without recalculating its position and size. This process is called redrawing.

Backflow: When an operation on the DOM results in a DOM size change (such as changing the width, height, or top of an element), the browser needs to recalculate the element’s attributes and then draw the calculated result. This process is called backflow.

Common operations that cause backflow:

  • First page loading
  • Browser window size changed
  • Element size or position changes
  • Element content changes
  • Element font size changes
  • Add and delete DOM elements
  • Query or invoke certain property methods

Conclusion:

  1. Backflow often costs a large proportion of drawing;
  2. Reflux must redraw, redraw does not necessarily reflux.

Modern Browser Optimization

Because frequent DOM or CSSOM changes are inherently performance-intensive, most modern browsers are optimized for them. For example, a series of actions will be put into the queue mechanism to update the layout in batches, and at least one browser refresh frame of 16ms (i.e., refresh rate of most display screens is 60Hz, and one refresh interval is 1000ms/60) will clear the queue (throttling optimization ~).

However, when obtaining information such as layout size, to ensure the accuracy of data, the browser will also force the queue empty, triggering backflow and redrawing, regardless of whether there is any operation in the queue that will affect the return value of these attributes or methods. (IE does not guarantee these optimizations)

  • offsetTop,offsetLeft,offsetWidth,offsetHeight
  • scrollTop,scrollLeft,scrollWidth,scrollHeight
  • clientTop,clientLeft,clientWidth,clientHeight
  • width,height
  • getComputedStyle()
  • getBoundingClientRect()

Optimize reflux and redraw

  • Avoid the use ofCSSThe expression;
  • usetransformalternativetop;
  • CSS3 hardware acceleration (GPU acceleration);
  • Offline manipulation of DOM: Taking elements out of the document flow and then modifying them will only result in redrawing, not backflow.
    • display:none: Temporarily takes elements out of the document flow, batch them and then put them back in. There will only be one reflux;
    • createDocumentFragment: Create a document fragment to put the content into the document at once;
  • As far as possible inDOMThe end of the tree changesclass: Reduce the range of reflux;
  • Apply the animation effect topositionProperties forabsolute 或 fixedOn the elements, avoid affecting the layout of other elements, so that only a redraw, not reflux;
  • JS avoids frequent reads of properties that cause backflow/redraw: you can cache them in variables if you need to use them frequently.

Pay attention to our