Front-end performance optimization jquery performance optimization

First, use the appropriate selector

$ ("#id");

1. Using the ID to locate the DOM element is undoubtedly the best way to get high performance, because the jquery bottom will call the Local method document.getElementById () directly, and if this method cannot directly find the element you need, then you can consider calling the find () method, The code is as follows:

$ ("#domo"). Find ("div");

Use the above code to effectively narrow the DOM element you are targeting.

2. Tag Selector performance is also good, it is the second choice for performance optimization.

Second, cache objects

When writing code, we generally like to write:

$ ("#domo p"). Bind ("click",function() {...}); $("#domo P"). CSS ("Color", "green"); $ ("#domo P"). FadeIn (1000);

But the consequence of this writing is that jquery finds the DOM and creates multiple jquery objects during the creation of each selector.

The better way to write is as follows:

1 var$yuki =$ ("#domo P");//Cache Variables2$yuki. Bind ("click",function(){......});3$yuki. CSS ("Color", "green");4$yuki. FadeIn (1000);5 6 //The above code can also be improved, as follows7 8 var$yuki =$ ("#domo p");9$yuki. Bind ("click",function(){Ten     //... One}). css ("Color", "green"). FadeIn (1000);

Third, the DOM operation when the loop

Let's look at a piece of code:

1 var yuki=[...]; // Let's say this is a 100 unique string. 2 var $mylist =$ ("#mylist"); // jquery selection to <ul> elements 3  for (var i=0;i< $mylist. length;i++) {4     $mylist. Append ("<li>" +yuki[i]+ " </li> "); 5 }

The above code, we add each new tag element as a node to the container ID, each time the loop, will be called to $mylist

So the better way is to reduce the DOM operation as much as possible, the code is as follows:

var yuki=[...]; var $mylist =$ ("#mylist"); var result= "";  for (var i=0;i< $mylist. length;i++) {   result+ = "<li>" +yuki[i]+ "</li>";} // we created the entire element string before inserting the DOM Element (UL), which greatly reduced the DOM operation $mylist. HTML (result);

Iv. Event Agents

Each JavaScript event bubbles to the parent node. This can be useful when we need to invoke the same function for multiple elements. For example, we want to bind to a table such behavior: After clicking on TD, the background color is set to red, the code is as follows:

$ ("#myTable TD"). Click (function() {   $ (this). CSS ("Background", "Red");}) 

Suppose there are 100 TD elements, when you use the above method, you bind 100 events, which will bring a very negative performance impact, is there any better way?

Instead of this inefficient element event listener, you simply bind the event to their parent node and then get to the current element of the click through Event.target.

The code is as follows:

1 $ ("#myTable"). Click (function(e) {2    var $clicked =$ (e.target);   E.target snaps to the trigger target element 3    $clicked. CSS ("Background", "Red"); 4 })

Another way is to use on (), the code is as follows:

$ ("#myTable"). On ("Click", "TD",function() {   $ (this). CSS ("Background", "Red");}) 

Front-end performance optimization jquery performance optimization