High Efficiency HTTP page optimization Rule one "JS manipulation of the DOM"

efficient HTTP page optimization rule one
Many people think that JS efficiency is too slow, do not want to use JS to achieve a relatively difficult program logic. What I want to say here is that the efficiency of JS is not slow, slow is DOM, if you manipulate the DOM, your JS efficiency will increase nearly thousands of thousand (this is not an exaggeration of the number).

1. Adding DOM in bulk: Using the way to modify innerHTML

try to use the way you modify innerHTML instead of appendchild, because using innerHTML is less expensive, faster, and more memory-safe.

One thing to note is that when added in InnerHTML mode, do not add in the loop using InnerHTML + =, which will slow down the speed, but should be cached in the middle of the array, after the end of the loop call xx.innerhtml = Array.join ("), or at least saved to a string and then inserted into the innerHTML.

for the user list a piece is optimized in this way, and the loading speed is increased by one more times.

2. Single Add DOM: How to use DOM append.

here is the case for loading a new node into a constantly changing node, and for content-stable nodes, there is no problem. But for nodes with dynamic content, it is possible to add child nodes to the DOM append .

This is because DOM append does not affect other nodes, and if you modify the innerHTML property, all child nodes of the parent node are stripped from the DOM tree, and the child node DOM tree is redrawn according to the new innerHTML value; All events registered to the original child node will also be invalidated.

in summary, if the InnerHTML + = code appears on a node with dynamic content, you should consider whether there is a problem.

3. Create a DOM node: create it in createelement mode

creating a DOM node in createelement mode has a very important detail: you should append to the DOM tree immediately after executing the createelement code; If the assignment of this orphaned node before it is loaded into the DOM tree, its properties and innerhtml operations will cause the DOM fragment memory to not be reclaimed. This humble detail, once encountered a large number of dom additions and deletions, will cause a memory disaster.

4. Delete DOM node: Use innerhtml= ' empty string '

before deleting a DOM node, be sure to delete the event that is registered on that node, whether it is an event registered in observe or attachevent mode, which will result in memory that cannot be reclaimed.

also, between RemoveChild and Innerhtml= ', try to choose the latter. Because the result of monitoring in the sieve (Memory leak monitoring tool) is that the DOM node cannot be effectively freed with RemoveChild .

5. Create an event listener

the existing JS libraries use observe to create event listeners that isolate circular references between DOM objects and event handlers, so you should try to create event snooping in this way.

6. Monitoring dynamic Elements

Dom events are bubbled up by default, and events that occur in child nodes can be handled by the parent node. The target/srcelement of event is still the deepest child node that produces events. This allows the event to be registered on the parent node in cases where the content is dynamically increasing and the child nodes need the same event handler, so there is no need to register the event listener for each child node.

at the same time, this avoids the creation of memory that cannot be reclaimed. Even if you register an event with prototype observe and call stopobserving before deleting a node, you will generate a small amount of memory that cannot be reclaimed, so you should register the event listener for DOM nodes as little as possible .

So, when it comes to registering events in the loop, it's time for us to consider the event mechanism.

Transferred from: http://www.educity.cn/wenda/55375.html

High Efficiency HTTP page optimization Rule one "JS manipulation of the DOM"