High-performance JavaScript learning notes (2)-Japan

I say the day is even more, then .... Start with the buffer layout information today!

-------------------2016-7-22 21:09:12---------------------------

14, reduce the number of query layout information, the query will be assigned to the local variables to participate in the calculation.

As an example, you can write in a timeout when you continue to pan at the bottom right of the element mesh:

1     var current = myelement.offsetleft; 2     current++; 3     MyElement.style.left = current + ' px '; 4     MyElement.style.top = current  + ' px '; 5     if (Current >) {6         // Stop Animation 7     }

Reject the following wording, each move will query the offset, causing the browser to refresh the render queue, very time-consuming

1     MyElement.style.left = myelement.offsetleft + ' px '; 2     MyElement.style.top =  myelement.offsetleft + ' px '; 3     if (Myelement.offsetleft >) {4         // Stop Animation 5     }

15, a large number of elements use: After hover, page performance will be reduced, especially in IE8. Therefore, it is strongly recommended that in large data tables, reduce the mouse movement on the table, reduce the display of highlighted lines, using the highlight is a slow process CPU utilization will increase to 80%-90%, to avoid the use of this effect.

16. Event Hosting

When it comes to event hosting, let's start by looking at the bubbling mechanism:

DOM2 event-defined events include three stages: ① event capture phase ② in Target stage ③ event bubbling phase

Photo Citation Source: http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

As the experimental results can be known, when we click on the inner, the capture and bubbling results are the same as the law;

Therefore, because each element has one or more event handles associated with it, it may affect performance, after all, the connection of each handle is a cost, so we use event-managed technology to hook a handle on a wrapper element to handle all occurrences of the child element.

Let's take the following DOM structure as an example:

If there is a UL, there are a lot of Li:

1     <div>2         <ul id= "Ullist" >3             <li id= "item1" ></li>4             <li id= "item2" ></li>5             <li id= "Item3" ></li>6             <li id= "item4 "></li>7             <li id=" ITEM5 "></li>8         </ul>9     </div>

When an li is clicked, the corresponding processing event needs to be triggered. Our usual notation is to add the OnClick event listener for each li.

1 functionAddlistenersli (liNode) {2Linode.onclick =functionClickHandler () {}3 }4 5Window.onload =function(){6     varUlnode = document.getElementById ("Ullist");7     varLinodes = Ulnode.getelementbytagname ("li");8      for(vari=0, L = linodes.length; I < L; i++){9 Addlisteners4li (Linodes[i]);Ten     }    One}

If Li is large enough, or if the operation of Li is particularly frequent, binding a click event for each Li will have a particular impact on performance, because during this time you need to access and modify more DOM nodes, the binding process of the event occurs in the OnLoad event, and the binding itself is time consuming; The browser needs to keep a record of each handle, which is very memory-intensive. The point is that some bindings are not necessarily used, not 100% of the buttons or links will be points to yo!

Therefore, it is more efficient to use event hosting, and when an event is thrown to a higher parent, we judge and get the event source Li by examining the event's target object (target). The following code can accomplish the effect we want:

1         varOul = document.getElementById (' ullist '));2Oul.addeventlistener (' click ',function(e) {3             varE = e | |window.event;4             vartarget = E.target | |e.srcelement;5 6 Console.log (target.nodename);7             if(Target.nodename = = ' LI '){8                 //Event Real Handlers9 alert (target.id);Ten E.preventdefault (); One e.stoppropagation (); A}Else{ -Alert (456); -             } the  -});

Too late, sleep, tomorrow to continue, there is a problem, please advise!

High-performance JavaScript learning notes (2)-Japan