Effectively improve the efficiency of Javascript DOM operations

Bkjia.com document DOM performance bottleneckThe bottleneck of DOM operations is screen re-painting. Reducing the number of redraws may increase the efficiency of DOM operations.

Reduce re-painting to improve efficiency concentrate DOM operations at once as much as possible

Example: the efficiency of using temporary objects is poor.

Reference content is as follows: For (var I = 0; I <items. length; I ++) {var item = document. createElement ("li"); item. appendChild (document. createTextNode ("Option" + I); list. appendChild (item);} better performance

Reference content is as follows: Var fragment = document. createDocumentFragment (); for (var I = 0; I <items. length; I ++) {var item = document. createElement ("li"); item. appendChild (document. createTextNode ("Option" + I); fragment. appendChild (item);} list. appendChild (fragment );

Setting the DOM object to display: none is less efficient.

Reference content is as follows: For (var I = 0; I <items. length; I ++) {var item = document. createElement ("li"); item. appendChild (document. createTextNode ("Option" + I); list. appendChild (item);} better performance list. style. display = "none"; for (var I = 0; I <items. length; I ++) {var item = document. createElement ("li"); item. appendChild (document. createTextNode ("Option" + I); list. appendChild (item);} list. style. display = ""; Use classname to replace the element with poor performance for multiple settings of the style. style. backgroundColor = "blue"; element. style. color = "red"; element. style. fontSize = "12em"; better performance. newStyle {background-color: blue; color: red; font-size: 12em;} element. className = "newStyle"; the cache DOM object has poor performance. document. getElementById ("myDiv "). style. left = document. getElementById ("myDiv "). offsetLeft + document. getElementById ("myDiv "). offsetWidth + "px"; var myDiv = document. getElementById ("myDiv"); myDiv. style. left = myDiv. offsetLeft + myDiv. offsetWidth + "px ";