DOM Programming Optimization for High Performance JavaScript (PART 2)

“This is the 12th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Page rendering

After entering a URL into the browser, the browser will start loading from the top down until the browser gets the HTML file, parsing and rendering as it loads

Two trees are generated in the rendering process: DOM and CSSOM

DOM

Represents the page structure. The element is the first tag and the root of the document tree. The more DOM nodes there are, the longer it takes to build the DOM tree

CSSOM

If CSS is present, CSSOM is generated, and the CSSOM tree comes from link tags, style tags, and inline styles. When the rendering process receives the CSS file, it performs a conversion operation to convert the CSS text into a browser-understood structure styleSheets, which is retrieved by Document. styleSheets and can be printed on the browser console

After capturing the styleSheets structure, all values need to be converted into standardized calculated values that the rendering engine can easily understand.

Render tree

After the DOM tree and CSSOM tree are constructed, the DOM tree and CSSOM tree are merged into a Render tree.

This is when the page elements begin to display

Redraw and rearrange

Reflow

When a DOM change affects the geometry of an element, such as width and height, the browser needs to recalculate the geometry of the element. In the process, it also affects the geometry of other elements. The browser will regenerate the Render tree, a process called rearrangement. Rearrangement is also called reflux

(replain)

When the rearrangement is complete, the browser redraws the affected parts onto the screen, a process called redraw

Therefore, rearrangement necessarily causes redraw, and redraw does not necessarily cause backflow

• Geometric properties: including layout, size and other properties that can be measured by mathematical geometry

• Layout:display,float,position,list,table,flex,columns,grid

• Size:margin,padding,border,width,height

• Appearance attributes: include interface, text and other attributes that can be described by state vectors

• Interface:appearance,outline,background,mask,box-shadow,box-reflect,filter,opacity,clip

• Text:text,font,word

Most browsers optimize the reordering process by queuing changes and executing them because of the computation cost of each reordering, but the frequent operation of nodes still poses a significant performance problem. So you need to reduce and avoid reflux repainting

Reduce rearrangement and redrawing

Style optimization

• Use transform instead of top and left

• Use visibility:hidden to replace display: None

• Minimize the use of tables. Changing the table attribute will directly cause layout rearrangement or redrawing

Batch modify DOM

• Instead of changing the STYLE of the DOM line by line, encapsulate the style property assigned to the DOM in a Style object or switch the class name

// css 

.active {

    padding: 5px;

    border-left: 1px;

    border-right: 2px;

}

// javascript

var el = document.querySelector('.el');

el.className = 'active';
Copy the code

• Copy the original element into a separate node, manipulate the node, and then overwrite the original element

let old = document.querySelector('#mylist'); let clone = old.cloneNode(true); appendNode(clone, data); old.parentNode.replaceChild(clone, old); - using document fragment documentFragment * * * * let fragments = document. CreateDocumentFragment (); appendNode(fragment, data); ul.appendChild(fragment);Copy the code

The element leaves the animation flow

RequestAnimationFrame () replaces setInterval();