High-performance JS Note 3--dom programming

I. Accessing and modifying the DOM

Dom and JS are equivalent to two islands, the more the number of access operations, the more tolls to pay, the performance has a great impact.

Reduce the number of times to access the DOM, and leave the operation as far as possible on the JS side.

Second, innerHTML contrast DOM method

1, for the native Dom method and innerHTML comparison, performance is similar.

2, for a large number of operations, for different browsers, performance is not the same, so depending on the browser often used.

3, it is recommended that the use of readability, stability, coding habits to decide which way. innerHTML performance can be greatly improved after the string has been optimized.

Third, operational optimization

1. Node cloning

For example:

var tr = document.createelement ("tr"); var otd = document.createelement ("TD");  for (var i = 1; i<=1000; i++) {    tr.appendchild (Otd.clonenode (false));}

View Code

2. HTML Collection

The methods in document Getelementbyname, Getelementbytag, Getelementbyclassname, and properties images, links, and forms return all collections.

Because the HTML collection remains in contact with the document, every time you need to update the latest information, the process of executing the query is repeated, even if you just get the elements in the collection.

In the same case, traversing an array is significantly faster than an HTML collection.

To access a smaller collection, in many cases the cache length is sufficient. The ToArray () function can be used as a general-purpose set-to-array function, but the conversion takes into account the conversion, which is traversed more than once.

3. Choose the most efficient API

The DOM API provides a variety of ways to choose the most efficient API when used, for example, traversing lookup childnodes is much slower than nextsibling.

4. ELEMENT nodes

Children is much faster than childnodes, childelementcount faster than Childnodes.length.

5. When using selectors, try to merge the operation as much as possible.

such as: Document.queryselectorall ("div.warning, Div.notice")

6. Do not redraw layout changes again, query it. Such as:

Bodystyle.color= ' Red '; tem=computed.backgroundcolor;bodystyle.color= ' white '; tem=  Computed.backgroundimage; // efficient notation bodystyle.color= ' red '; bodystyle.color= ' white '; tem=computed.backgroundcolor; TEM=computed.backgroundimage;

View Code

7. Change the style

It's better to modify the style of a style, style.csstext, or change the classname to be easier to maintain.

8. Batch Modify DOM

When you need to bulk modify the DOM, you can reduce the number of redraw or reflow attempts by using the following steps:

A. Leaving elements out of the document

Hide elements, apply changes, and then re-display.
Create a subtree outside the DOM, and then copy it back to the document.
Copies the original elements to a node that is out of the document, modifies the copy, and replaces the original element.

B. Apply multiple changes to it

C. Bring elements back into the document

9. Cache layout Information

The frequently manipulated element information is saved to the variable and then manipulated.

10. Let elements out of the animation stream

When the size and position of an element changes, a large amount of document repainting is generated. Try to use the absolute positioning of the element to get it out of the document flow.

11, tr:hover Similar effect performance will reduce a lot.

12. Event delegation

Avoids multiple bindings and bubbles of events, blocking the default action.

High-performance JS Note 3--dom programming