A brief introduction to JavaScript execution efficiency-JS Tutorial-php.cn

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、作为参数传入模块
  (function(window,$){
      var xxx = window.xxx;
      $("#xxx1").xxx();
      $("#xxx2").xxx();
  })(window,jQuery);

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

Copy after login

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)"))();

Copy after login

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");
    //****其它变量
    //***一些运算
    var res = function(){
        alert(a.name);
    }
    return res;
})()

Copy after login

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");
    //****其它变量
    //***一些运算
    //闭包返回前释放掉不再使用的变量
    b = c = null;
    var res = function(){
        alert(a.name);
        }
    return res;
})()

Copy after login

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

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)
Set the display of the element to "none" and complete After modification, modify the display to the original value
When modifying multiple style attributes, define a class class instead of modifying the style attribute multiple times (for Recommended by certain students)
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);
}

Copy after login

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);

Copy after login

2、暂存dom状态信息

当代码中需要多次访问元素的状态信息，在状态不变的情况下我们可以将其暂存到变量中，这样可以避免多次访问dom带来内存的开销，典型的例子就是：

var lis = document.getElementByTagName("li");
for(var i=1;i<lis.length;i++){
    //***
}
上述方式会在每一次循环都去访问dom元素，我们可以简单将代码优化如下
var lis = document.getElementByTagName("li");
for(var i=1,j=lis.length ;i<j;i++){
    //***
}

Copy after login

3、缩小选择器的查找范围

查找dom元素时尽量避免大面积遍历页面元素，尽量使用精准选择器，或者指定上下文以缩小查找范围，以jquery为例

少用模糊匹配的选择器：例如$("[name*='_fix']")，多用诸如id以及逐步缩小范围的复合选择器$("li.active")等
指定上下文：例如$("#parent .class")，$(".class",$el)等

4、使用事件委托

使用场景：一个有大量记录的列表，每条记录都需要绑定点击事件，在鼠标点击后实现某些功能，我们通常的做法是给每条记录都绑定监听事件，这种做法会导致页面会有大量的事件监听器，效率比较低下。

基本原理：我们都知道dom规范中事件是会冒泡的，也就是说在不主动阻止事件冒泡的情况下任何一个元素的事件都会按照dom树的结构逐级冒泡至顶端。而event对象中也提供了event.target（IE下是srcElement）指向事件源，因此我们即使在父级元素上监听该事件也可以找到触发该事件的最原始的元素，这就是委托的基本原理。废话不多说，上示例

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

Copy after login

上述写法其实是给所有的li元素都绑定了click事件来监听鼠标点击每一个元素的事件，这样页面上会有大量的事件监听器。

根据上面介绍的监听事件的原理我们来改写一下

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

Copy after login

这样一来，我们就可以只添加一个事件监听器去捕获所有li上触发的事件，并做出相应的操作。

当然，我们不必每次都做事件源的判断工作，可以将其抽象一下交给工具类来完成。jquery中的delegate()方法就实现了该功能

语法是这样的$(selector).delegate(childSelector,event,data,function)，例如：

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

Copy after login

参数说明（引自w3school）

Copy after login

参数	描述
childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

Tips:事件委托还有一个好处就是，即使在事件绑定之后动态添加的元素上触发的事件同样可以监听到哦，这样就不用在每次动态加入元素到页面后都为其绑定事件了

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!