Javascript is a very flexible language. We can write various styles of code as we like. Different styles of code will inevitably lead to differences in execution efficiency, and the development process is scattered. I have been exposed to many methods to improve code performance, and sorted out the common and easy-to-avoid problems

Javascript's own execution efficiency

Scope chain in Javascript,Closure, prototype inheritance, eval and other features, while providing various magical functions, also bring about various efficiency problems. If used carelessly, they will lead to low execution efficiency.

1. Global import

We will use some global variables(window,document,custom global Variables, etc.), anyone who knows the JavaScript scope chain knows that accessing global variables in a local scope requires traversing the entire scope chain layer by layer until the top-level scope, while the access efficiency of local variables will be faster and higher , so when some global objects are used frequently in the local scope, they can be imported into the local scope, such as:

  //1、作為參數(shù)傳入模塊
  (function(window,$){
      var xxx = window.xxx;
      $("#xxx1").xxx();
      $("#xxx2").xxx();
  })(window,jQuery);

  //2、暫存到局部變量
  function(){
     var doc = document;
     var global = window.global;
 }

2, eval and class eval issues

We all know that eval can process a string as js code. It is said that code executed using eval is more than 100 times slower than code without eval (I have not tested the specific efficiency, interested students can Test it)

JavaScript code will perform a similar "pre-compilation" operation before execution: first, an active object in the current execution environment will be created, and those variables declared with var will be set as active Properties of the object, but at this time the assignments of these variables are all undefined, and those functions defined with function are also added as properties of the active object, and their values ??are exactly functions Definition. However, if you use "eval", the code in "eval" (actually a string) cannot recognize its context in advance and cannot be parsed and optimized in advance, that is, precompiled operations cannot be performed. Therefore, its performance will also be greatly reduced

In fact, people rarely use eval now. What I want to talk about here are 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 types of code will be relatively low, so it is recommended to directly pass in the anonymous method or methodQuoteTo the setTimeout method

3. After the closure ends, release the variables that are no longer referenced

var f = (function(){
    var a = {name:"var3"};
    var b = ["var1","var2"];
    var c = document.getElementByTagName("li");
    //****其它變量
    //***一些運(yùn)算
    var res = function(){
        alert(a.name);
    }
    return res;
})()

The return value of the variable f in the above code is an immediately executed function The method res returned in the composed closure retains references to all variables (a, b, c, etc.) in this closure, so these two variables will always reside in the memory space, especially for dom References to elements consume a lot of memory, and we only use the value of the a variable 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");
    //****其它變量
    //***一些運(yùn)算
    //閉包返回前釋放掉不再使用的變量
    b = c = null;
    var res = function(){
        alert(a.name);
        }
    return res;
})()

Js operates dom Efficiency

In the process of web development, the bottleneck of front-end execution efficiency is often dom operation. DOM operation is a very performance-consuming thing. How can we How to save performance as much as possible during DOM operation?

1. Reduce reflow

What is reflow?

When the properties of a DOM element change (such as color), the browser will notify render to redraw the corresponding element. This process is called repaint.

If the change involves element layout (such as width), the browser discards the original attributes, recalculates and passes the results to render to redraw the page elements. This process is called reflow.

Methods to reduce reflow

1. First delete the element from the document, and then put the element back to its original position after completing the modification (when an element and When its child elements undergo a large number of reflow operations, the effects of methods 1 and 2 will be more obvious)

2. Set the display of the element to "none" and complete After modification, modify the display to the original value

3. When modifying multiple style attributes, define a class class instead of modifying the style attribute multiple times (for Recommended by certain students)

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 above code will operate the dom multiple times and is relatively inefficient , you can create the documentFragment in the following form. Adding all elements to the docuemntFragment will not change the dom structure. Finally, add it to the page and only perform one reflow

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、暫存dom狀態(tài)信息

當(dāng)代碼中需要多次訪問(wèn)元素的狀態(tài)信息，在狀態(tài)不變的情況下我們可以將其暫存到變量中，這樣可以避免多次訪問(wèn)dom帶來(lái)內(nèi)存的開(kāi)銷，典型的例子就是：

var lis = document.getElementByTagName("li");
for(var i=1;i<lis.length;i++){
    //***
}
上述方式會(huì)在每一次循環(huán)都去訪問(wèn)dom元素，我們可以簡(jiǎn)單將代碼優(yōu)化如下
var lis = document.getElementByTagName("li");
for(var i=1,j=lis.length ;i<j;i++){
    //***
}

3、縮小選擇器的查找范圍

查找dom元素時(shí)盡量避免大面積遍歷頁(yè)面元素，盡量使用精準(zhǔn)選擇器，或者指定上下文以縮小查找范圍，以jquery為例

• 少用模糊匹配的選擇器：例如$("[name*='_fix']")，多用諸如id以及逐步縮小范圍的復(fù)合選擇器$("li.active")等

• 指定上下文：例如$("#parent .class")，$(".class",$el)等

4、使用事件委托

使用場(chǎng)景：一個(gè)有大量記錄的列表，每條記錄都需要綁定點(diǎn)擊事件，在鼠標(biāo)點(diǎn)擊后實(shí)現(xiàn)某些功能，我們通常的做法是給每條記錄都綁定監(jiān)聽(tīng)事件，這種做法會(huì)導(dǎo)致頁(yè)面會(huì)有大量的事件監(jiān)聽(tīng)器，效率比較低下。

基本原理：我們都知道dom規(guī)范中事件是會(huì)冒泡的，也就是說(shuō)在不主動(dòng)阻止事件冒泡的情況下任何一個(gè)元素的事件都會(huì)按照dom樹(shù)的結(jié)構(gòu)逐級(jí)冒泡至頂端。而event對(duì)象中也提供了event.target（IE下是srcElement）指向事件源，因此我們即使在父級(jí)元素上監(jiān)聽(tīng)該事件也可以找到觸發(fā)該事件的最原始的元素，這就是委托的基本原理。廢話不多說(shuō)，上示例

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

上述寫(xiě)法其實(shí)是給所有的li元素都綁定了click事件來(lái)監(jiān)聽(tīng)鼠標(biāo)點(diǎn)擊每一個(gè)元素的事件，這樣頁(yè)面上會(huì)有大量的事件監(jiān)聽(tīng)器。

根據(jù)上面介紹的監(jiān)聽(tīng)事件的原理我們來(lái)改寫(xiě)一下

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

這樣一來(lái)，我們就可以只添加一個(gè)事件監(jiān)聽(tīng)器去捕獲所有l(wèi)i上觸發(fā)的事件，并做出相應(yīng)的操作。

當(dāng)然，我們不必每次都做事件源的判斷工作，可以將其抽象一下交給工具類來(lái)完成。jquery中的delegate()方法就實(shí)現(xiàn)了該功能

語(yǔ)法是這樣的$(selector).delegate(childSelector,event,data,function)，例如：

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

參數(shù)說(shuō)明（引自w3school）

?

Tips:事件委托還有一個(gè)好處就是，即使在事件綁定之后動(dòng)態(tài)添加的元素上觸發(fā)的事件同樣可以監(jiān)聽(tīng)到哦，這樣就不用在每次動(dòng)態(tài)加入元素到頁(yè)面后都為其綁定事件了

The above is the detailed content of A brief introduction to JavaScript execution efficiency. For more information, please follow other related articles on the PHP Chinese website!