Summary of JavaScript Execution Efficiency

Summary of JavaScript execution efficiency Javascript is a very flexible language. We can write various types of code as we like & amp; 26684; different codes & amp; 26684; the code will inevitably lead to different execution efficiency, and many Summary of improving JavaScript execution efficiency will be exposed in the development process.

Javascript is a very flexible language. We can write various types of code as we like. Different types of code will inevitably lead to different execution efficiency, many methods to improve code performance are exposed in the development process, and common and easily avoided problems are sorted out.

Javascript execution efficiency

In Javascript, the scope chain, closure, prototype inheritance, eval and other features bring about various efficiency problems while providing various magical functions. If you use them accidentally, the execution efficiency will be low.

1. Global Import

We will use some global variables (window, document, custom global variables, etc.) in the coding process. Anyone who knows about the javascript scope chain knows that, to access global variables in a local scope, You need to traverse the entire scope chain layer by layer until the top-level scope, and the access efficiency of local variables will be faster and higher, therefore, when some global objects are frequently used in a local scope, they can be imported to a local scope. For example:

 
 

  
  
// 1. input the module as a parameter
  
  
(Function (window, $ ){
  
  
Var xxx = window. xxx;
  
  
$ ("# Xxx1"). xxx ();
  
  
$ ("# Xxx2"). xxx ();
  
  
}) (Window, jQuery );
  
  
 
  
  
// 2. Save it to a local variable
  
  
Function (){
  
  
Var doc = document;
  
  
Var global = window. global;
  
  
}
 
 

2. eval and eval-like problems

We all know that eval can use a string as js Code for execution and processing. It is said that the code executed using eval is more than 100 times slower than the code without eval (I did not test the efficiency, if you are interested, you can test it)

JavaScript code performs operations similar to "pre-compilation" before execution: first, an activity object in the current execution environment is created, and set the variables declared with var to the attributes of the active object. However, the value assigned to these variables is undefined, and the functions defined by the function are also added as the attributes of the active object, and their values are exactly the definitions of functions. However, if you use "eval", the code in "eval" (actually a string) cannot identify its context in advance and cannot be parsed and optimized in advance, you cannot perform the pre-compilation operation. Therefore, its performance will be greatly reduced.

In fact, eval is rarely used now. Here I want to talk about two eval-like scenarios (new Function {}, setTimeout, setInterver)

 
 

  
  
setTimtout("alert(1)",1000); 
  
  
 
  
  
setInterver("alert(1)",1000); 
  
  
 
  
  
(new Function("alert(1)"))(); 
 
 

The execution efficiency of the above several types of code is relatively low. Therefore, it is recommended to pass in the anonymous method directly or reference the method to the setTimeout method.

3. Release variables that are no longer referenced after closure ends.

 
 

  
  
Var f = (function (){
  
  
Var a = {name: "var3 "};
  
  
Var B = ["var1", "var2"];
  
  
Var c = document. getElementByTagName ("li ");
  
  
// *** Other variables
  
  
// *** Some operations
  
  
Var res = function (){
  
  
Alert (a. name );
  
  
}
  
  
Return res;
  
  
})()
 
 

In the above Code, the return value of variable f is the method res returned by the closure composed of an immediate execution function, which retains all variables (a, B, c, etc.) in the closure) therefore, these two variables will remain in the memory space, especially the reference of dom elements will consume a lot of memory, we only use the value of variable a in res. Therefore, we can release other variables before the closure returns.

 
 

  
  
Var f = (function (){
  
  
Var a = {name: "var3 "};
  
  
Var B = ["var1", "var2"];
  
  
Var c = document. getElementByTagName ("li ");
  
  
// *** Other variables
  
  
// *** Some operations
  
  
// Release unused variables before the closure returns
  
  
B = c = null;
  
  
Var res = function (){
  
  
Alert (a. name );
  
  
}
  
  
Return res;
  
  
})()
 
 

Efficiency of Javascript dom operations

In the web development process, the bottleneck of front-end execution efficiency is usually on dom operations. dom operations are performance-consuming, how can we save performance as much as possible during dom operations?

1. Reduce reflow

What is reflow?

When the attributes of a DOM element change (such as color), the browser notifies render to re-depict the corresponding element. This process is called repaint.

If this change involves the layout of elements (such as width), the browser discards the original attributes, recalculates the changes, and passes the results to the render to re-depict the page elements. This process is called reflow.

How to Reduce reflow

1. delete the element from the document, modify the element, and then put it back to the original position (when a large number of reflow operations are performed on an element and its child elements, the effects of the two methods are obvious)

2. Set the display of the element to "none". After modification, change the display to the original value.

3. When modifying multiple style attributes, define the class instead of modifying the style attributes multiple times (recommended by certain)

4. Use documentFragment when adding a large number of elements to the page

For example

 
 

  
  
for(var i=0;i<100:i++){ 
  
  
 var child = docuemnt.createElement("li"); 
  
  
 child.innerHtml = "child"; 
  
  
 document.getElementById("parent").appendChild(child); 
  
  
} 
 
 

The code above will operate the dom multiple times, with low efficiency. You can create documentFragment in the following form, add all elements to the docuemntFragment, and add them to the page without changing the dom structure, only reflow is performed once.

 
 

  
  
var frag = document.createDocumentFragment(); 
  
  
for(var i=0;i<100:i++){ 
  
  
 var child = docuemnt.createElement("li"); 
  
  
 child.innerHtml = "child"; 
  
  
 frag.appendChild(child); 
  
  
} 
  
  
document.getElementById("parent").appendChild(frag); 
 
 

2. Temporary dom status information

When the Code requires multiple accesses to the status information of the element, we can save it to the variable without changing the status, so as to avoid memory overhead caused by multiple accesses to the dom, A typical example is:

 
 

  
  
Var lis = document. getElementByTagName ("li ");
  
  
For (var I = 1; I 
  
  
//***
  
  
}
  
  
The above method will access the dom element in every loop. We can simply optimize the Code as follows:
  
  
Var lis = document. getElementByTagName ("li ");
  
  
For (var I = 1, j = lis. length; I 
  
  
//***
  
  
}
 
 

3. Narrow the selector search range

When searching dom elements, try to avoid traversing page elements in a large area, use a precise selector whenever possible, or specify the context to narrow the search scope. jquery is used as an example.

Use less Fuzzy Matching selector: for example, $ ("[name * = '_ fix']"), use a compound selector such as id and gradually narrow down the range $ ("li. active ")

Specify the context: for example, $ ("# parent. class"), $ (". class", $ el), etc.

4. Use event Delegation

Use Cases: a list with a large number of records, each record needs to be bound with a click event, after clicking the mouse to implement some functions, we usually bind listening events to each record. This will cause a large number of event listeners on the page, which is inefficient.

Basic principle: we all know that events in the dom specification will bubble up, that is, events of any element will bubble up to the top step by step according to the structure of the dom tree without actively blocking event bubbles. Event.tar get (srcElement in IE) points to the event source, so even if we listen to the event on the parent element, we can find the most primitive element that triggers the event, this is the basic principle of delegation. Not much nonsense. example above

 
 

  
  
$("ul li").bind("click",function(){ 
  
  
 alert($(this).attr("data")); 
  
  
}) 
 
 

In fact, the above statement binds all the li elements to the click event to listen to the events of Mouse clicking on each element, so that there will be a large number of event listeners on the page.

Based on the principle of the listener event described above, let's rewrite it.

 
 

  
  
$("ul").bind("click",function(e){ 
  
  
 if(e.target.nodeName.toLowerCase() ==="li"){ 
  
  
 alert($(e.target).attr("data")); 
  
  
 } 
  
  
}) 
 
 

In this way, we can add only one event listener to capture all the events triggered by li and perform corresponding operations.

Of course, we don't have to make judgments on the event source every time, so we can abstract it to the tool class to complete it. The delegate () method in jquery implements this function.

The syntax is $ (selector). delegate (childSelector, event, data, function), for example:

 
 

  
  
$("div").delegate("button","click",function(){ 
  
  
 $("p").slideToggle(); 
  
  
}); 
 
 

Parameter description

Parameters	Description
ChildSelector	Required. Specifies one or more child elements of the event handler to be appended.
Event	Required. Specifies one or more events to be appended to an element. Multiple event values are separated by spaces. Must be a valid event.
Data	Optional. Specifies additional data to be passed to the function.
Function	Required. Specifies the function that runs when an event occurs.

Tips: Another benefit of event delegation is that even events triggered by elements dynamically added after the event is bound can also be monitored, in this way, you do not need to bind events to the element after it is dynamically added to the page.