Read Javascript high-performance programming key notes, javascript high-performance

Read Javascript high-performance programming key notes, javascript high-performance

First point

// Efficient and concise // Low Energy Dissipation children // childNodeschildElementCount // childNodes. lengthfirstElementChild // firstChildlastEelmentChild // lastChildnextElementSibling // response // previousSibling

Second: efficient application of Selector

<Div id = "footer_bottom"> <a href = "/AboutUS. aspx "> helping customers </a> <a href ="/ContactUs. aspx "> Contact Us </a> <a href ="/about/ad. aspx "> advertisement service </a> <a href ="/about/job. aspx "> Talent Service </a>©2006-2016 <a href = "http://www.bkjia.com/"> help house </a> </div>

Var certificate R1 = document. querySelectorAll ("# footer_bottom a"); // simple and efficient var partition r2 = docuement. getElementById ("footer_bottom "). getElementsByTagName ("a"); // complicated and inefficient // return <a href = "/AboutUS. aspx "> helper house </a>, <a href ="/ContactUs. aspx "> Contact Us </a>, <a href ="/about/ad. aspx "> advertisement service </a>, <a href ="/about/job. aspx "> Talent Service </a>, // select the first subnode var a = document. querySelector ("# footer_bottom a"); // return <a href = "/AboutUS. aspx "> helper house </a> // select multiple nodes var divs = document. querySelectorAll ("div. footer, div. main, div. header ");

Note: Most browsers support the preceding attributes. IE6, 7, and 8 only support the children attribute.

Reduce DOM re-rendering and formatting (three methods)

1. Hide the elements to be processed, process them, and display

2. How to Create File fragments (recommended) document. createDocumentFragment ();

3. clone a copy of the element to be processed, operate on the copy, and replace the original

The following is a supplement to the help house editor

Store cyclic objects

Before use:

var str = "nanananana";for (var n = 0; n < str.length; n++) {}

After use:

　var str = "nanananana",strLgth = str.length;for (var n = 0; n < strLgth ; n++) {}

Loop consumes a lot of performance. It stores cyclic objects to reduce the calculation of objects in each loop.

Minimize backflow and re-painting

Before use:

var coored = document.getElementById("ctgHotelTab");document.getElementById("ctgHotelTab").style.top = coored.offsetTop + 35 + "px";

After use:

var coored = document.getElementById("ctgHotelTab"),offetTop = coored.offsetTop + 35;document.getElementById("ctgHotelTab").style.top = offetTop + "px";