DOM programming:
Every visit to DOM javascript must produce consumption, so as to reduce DOM manipulation.
such as:
1. DOM access to content stored into a variable, to modify the contents of the DOM into a variable, each time to avoid access DOM.
for(1,<100,i++){
document.getElementById("content").innerHTML +='a';
}
Each time you add a host accesses a DOM, to visit 100 times, running slow. These directly into a variable, the last access time DOM:
for(i,<100,i++){
text +="a" }
document.getElementById("content").innerHTML = text;
DOM content is read out of the store into a variable, lest every time to read. Such as length, layout information such as:
coll = document.getElementByTagName("a").length;
2. reducing redraw rearrangement:
"After you download the browser HTML, CSS, JS generates two trees, tree DOM tree and rendering, DOM attribute when certain changes occur, will lead to rearrangements redraw:
Rearrangement: browser reconstruct the render tree. Redraw: the browser will render tree rearranged rendered to the screen.
Rearrangement has led to: add or remove a visible DOM element 3. 2. The position changing element to change the element size
4. The content change window size change the browser. "
1. merge all changes with cssText:
bodystyle=document.body.style;
bodystyle.color = red ; bodystyle.height = 1000px ; bodystyle.width = 100%
To modify these three properties need to be redrawn three times rearrangement, rearrangement with cssText with only redraw time:
bodystyle.cssText = 'color:red; height:1000px; width:100% ' ;
2. Let the elements from the document flow:
Let elements from the document flow, bulk-edit them, and then bring back elements of the document. Document flow from three methods: hidden elements, fragments of the document, and then modify the copy replacement.
1. Hide the elements: because the situation leading to rearrangement: Add or remove visible DOM element. Therefore, only the need to change the region display, modify them to not hide rearrangement.
2. document fragment: create and update a document fragment in addition to the document, and then attach it to the original list. When a clip attached to the node, the child node is actually added segment itself, rather than fragments.
"When the request is a DocumentFragment node into the document tree, not inserted DocumentFragment itself, but its all descendants of nodes that are inserted in brackets node. This feature makes the DocumentFragment became placeholders, temporary storage of those once inserted node of the document. it is also conducive to shear the document, copy and paste operations can reduce the number of page rendering dom, efficiency will be improved
significantly. " ----------------
copyright Disclaimer: this article is the original article CSDN bloggers "Xiao Zhu", and follow CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
Original link: https: //blog.csdn.net/qiao13633426513/article/details/80243058
3. Modify the copy; uses replacechild property. Create a backup node needs to be modified, and then modify the copy, once the operation is completed to replace the old node with a new node.