High-performance JS Note 3--dom programming

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.