1.1 Problem Analysis

This question examines the concepts of optimization and focus in HTML

1.2 Explanation of core issues

How the browser works

  1. Construct DOM Tree (parse): Rendering engine parses HTML document, first converts tags into DOM nodes (including jS-generated tags) in DOM Tree to generate Content Tree/DOM Tree.
  2. Construct tree: Parses the corresponding CSS style file information (including jS-generated styles and CSS files), and these file information and HTML visible instructions (e.g<b></b>Each NODE in the Render Tree has its own style, and the render Tree does not contain hidden nodes (display: None, head). Because these nodes are not used for rendering
  3. Reflow/Layout: Recursively calls from the root node to calculate the size, position, etc of each element, giving the exact coordinates of where each node should appear on the screen
  4. Paint /repaint: Traverse the render tree, using the UI layer to draw each node.

Repaint or redraw:

Once the box position, size, and other properties, such as color and font size, have been determined, the browser draws the primary colors according to their characteristics and renders the content on the page. Redraw is the behavior of the browser triggered by a change in the appearance of an element. The browser redraws the element based on its new attributes to give it a new appearance. Conditions that trigger a redraw: changes the appearance attributes of an element. Color = background-color Note: Table and its internal elements may require multiple computations to determine the attribute values of its nodes in the rendered tree, which takes twice as long as the equivalent element. This is one of the reasons we try to avoid using tables to lay out our pages.

Backflow (refactoring/rearranging /reflow) :

When part (or all) of the render tree needs to be rebuilt due to changes in the element’s size, layout, hiding, etc., this is called backflow. ** Each page needs to be refluxed at least once, when the page loads.

Relationship between redraw and reflux:

During backflow, the browser invalidates the affected part of the render tree and reconstructs that part of the render tree. When backflow is complete, the browser redraws the affected part to the screen, a process called redraw. So, backflow must cause redraw, but redraw does not necessarily cause backflow.

Conditions that trigger backflow: Any change in page layout and geometry can trigger backflow, such as:

  1. Page render initialization :(unavoidable)
  2. Add or remove visible DOM elements;
  3. Changing the position of an element, or using animation;
  4. Element size changes – size, margins, borders;
  5. The browser window size changes (when the resize event occurs);
  6. Padding changes, such as text changes or image size changes caused by the width and height of the calculated value;
  7. Read some element attributes (the offsetLeft/Top/Height/Width, clientTop/Left/Width/Height,

scrollTop/Left/Width/Height, width/height, getComputedStyle(), currentStyle(IE))

The cost of redrawing and rearranging: time consuming, resulting in a slow browser.

1.3 Problem Extension

Optimization:

  1. Browser optimizations: The browser maintains a queue, places all operations that cause backflow and redraw in this queue, and when the number of operations in the queue reaches a certain number or interval, the browser flushes the queue and performs a batch. This will turn multiple backflow and redraw into a single backflow redraw.

  2. Optimizations to watch out for: We want to reduce redraw and backflow to reduce rendering tree operations, so we can incorporate multiple DOM and style changes. And reduce the need for style styles.

    Display: none; display: none; display: none; Set the element to display: None; Then the page layout and other operations; Set the element to display: block; This causes only two redraws and backflow; (3) Use cloneNode(True or False) and replaceChild technology to cause a backflow and redraw; (4) Set the position attribute to absoute or Fixed. The element is removed from the document flow and its changes do not affect other elements; (5) If multiple DOM nodes need to be created, you can use the DocumentFragment to add the Document once after creation;Copy the code

1.4 Use in combination with projects

For example, this idea suggests not looping while rendering

var fragment = document.createDocumentFragement();
for(let i=0; i<100; i++){var li = document.createElement('li');
	li.innerHTML = 'apple' + i;
	fragment.appendChild(li);
}
document.getElementById('fruit').appendChild(fragment);
Copy the code