Web performance optimization--reducing DOM Operations (III)

• Reduce the number of DOM
• Reduce DOM Operations
• Bulk processing of DOM operations
• Batch process style modifications
• Try not to use the Tabel layout
• Try not to use CSS expressions
• String with array join
• CSS Selector optimization

1. Reducing the number of DOM

The lower the number of DOM when HTML is generating the DOM tree, the faster the HTML renders

2. Reduce DOM operations

Every time you manipulate the DOM, you bring repaint and REFOLW.

3. Bulk processing of DOM operations:

Removes the DOM Tree from the element, modifies it, and then puts it back, so it will only be called once repaint or reflow

4. Batch Modify Style

Change classname, or use CSS (), principle and batch processing JS the same

5. Try not to use the Tabel layout

An element in the Tabel is changed, and the entire tabel is reflow.

If it is not, you can set Tabel-layout:auto or tabel-layout:fixed, let the Tabel one line of rendering, limit the rendering range

6. Try not to use CSS expressions

Reflow is triggered once per calculation

7.string joins with array join

Using "+" in JS to stitch strings is less efficient, because each run will open up new memory and generate new string variables, and then assign the stitched string to the new variable. Using arrays is a bit more efficient.

8.css Selector Optimization

Because CSS is parsed from right to left, according to this rule, try to make the right style unique

Web performance optimization--reducing DOM Operations (III)