高性能 建议 实践

Posted 2020-06-09

1、避免双重判断

var num1 = 5,

num2 = 6,

 

result = eval("num1 + num2"),

 

sum = new Function("arg1", "arg2", "return arg1 + arg2");

 

setTimeout("sum = num1 + num2", 100);

 

setInterval("sum = num1 + num2", 100);

首先上面的代码会像普通代码一样评估求值，但是在执行的时候，字符串里面的代码会引起另外一个评估求值操作。有些javascript引擎优化了，缓存相同的eval()执行结果。

 

2、使用对象、数组字面量

var myObject = {
    name: "Nicholas",
    count: 50
};
var myArray = ["Nicholas", 50, true, null];

这样速度是最快的。

 

3、不要重复工作

function addHandler(target, eventType, handler){
     if (target.addEventListener){                                             //DOM2 Events
          target.addEventListener(eventType, handler, false);
     } else {                                                                        //IE
          target.attachEvent("on" + eventType, handler);
     }
}
function removeHandler(target, eventType, handler){
     if (target.removeEventListener){                                          //DOM2 Events
          target.removeEventListener(eventType, handler, false);
     } else {                                                                           //IE
          target.detachEvent("on" + eventType, handler);
     }
}

上面的函数，每次调用都会做同样的检测，每次检测都需要在对象里查找，事实上检测一次就可以了，避免重复工作的办法有很多，接下来的就是  ↓

 

4、lazy load function  延迟加载函数

function addHandler(target, eventType, handler) {
     if (target.addEventListener) {                                                
          addHandler = function(target, eventType, handler) {          //覆盖原来的方法，第一次运行该函数检测，下次调用就不用再检测
               target.addEventListener(eventType, handler, false);
          };
     } else {                                                                           
          addHandler = function(target, eventType, handler) {
               target.attachEvent("on" + eventType, handler);
          };
     }

     addHandler(target, eventType, handler);                                   //为了第一次调用的时候能够执行，以后调用就直接运行覆盖后的新函数了
}

function removeHandler(target, eventType, handler) {
     if (target.removeEventListener) {                                               
          removeHandler = function(target, eventType, handler) {
               target.addEventListener(eventType, handler, false);
          };
     } else { 
          removeHandler = function(target, eventType, handler) {
               target.detachEvent("on" + eventType, handler);
          };
     }

     removeHandler(target, eventType, handler);  
}

当然也可以在函数定义的时候就检测而不是第一次运行的时候：

var  addHandler = (function (target, eventType, handler) {

     if (target.addEventListener) {                                                
          addHandler = function(target, eventType, handler) {          
               target.addEventListener(eventType, handler, false);
          };
     } else {                                                                           
          addHandler = function(target, eventType, handler) {
               target.attachEvent("on" + eventType, handler);
          };
     }

     addHandler(target, eventType, handler);                                  
})();

 

5、有条件地预加载

var addHandler = document.body.addEventListener ?             需要放在前面，在代码解析的时候就提前进行了判断，而不用等待函数调用

function(target, eventType, handler){

    target.addEventListener(eventType, handler, false);

}:

function(target, eventType, handler){

    target.attachEvent("on" + eventType, handler);

};

var removeHandler = document.body.removeEventListener ?

function(target, eventType, handler){

    target.removeEventListener(eventType, handler, false);

}:

function(target, eventType, handler){

    target.detachEvent("on" + eventType, handler);

};

 

6、使用位运算

 

7、native方法，不管怎么优化你写的的代码，都不会比原生的更快滴。原因是，那些原本就存在浏览器里的原生方法是用更底层的语言编写的（如C++），这些方法本来就被编译成了浏览器的组成部分