前端编程优化建议

1.多使用事件委托

        指定给元素的事件处理程序，相当于浏览器运行的程序和网页js代码的连接，这种连接越多，页面执行的速度也就会越慢，因此，使用事件委托减少了这种性能影响，同时也方便事件的卸载

 

2.避免使用二次评估

      类似于  eval("num1+num2") ; var fun1 = new Function("arg1","arg2","return arg1 + arg2"); setTimeout("fun('arg')",500);

      二次评估是一项非常昂贵的操作，因此，谨慎使用

 

3.使用对象和数组直接量创建对象和数组

    有些人喜欢这样创建对象：  var obj1 = new Object();  obj1.name="name1";

    很明显我们可以使用直接量创建方法  var obj1 = {name:"name1"}

    虽然性能上没有差别，但是有一个代码简洁编程的好习惯不是更好

 

4.使用惰性函数，避免多次评估（最常见的是浏览器兼容性调整）
    看下面这段代码：

    function addHandler(target, eventType, handler){
         if (target.addEventListener){ //DOM2 Events
            addHandler = function(target, eventType, handler){
                target.addEventListener(eventType, handler,    false);
             };
         } else { //IE
           addHandler = function(target, eventType, handler){
               target.attachEvent("on" + eventType, handler);
           };
         }
        //call the new function
        addHandler(target, eventType, handler);
    }
   这样兼容性调整的代码只运行了一遍，以后每次的调用都不用在进行评估，是不是提高了不必要的检验

5.条件判断语句根据可能性从高到低进行排序，减少否定的判断次数

    我们写的流程控制语句，很多的可能性都是有侧重的，那么我们按可能性大小的顺序，将代码进行排序，就减少了那些不必要的非操作，岂不是明智之举

 

6.多多利用计算速度快的位运算

  很多人都特别疑惑，js中提供的位运算到底有什么大的作用，我们的开发好像从来就没有用到过，其实位运算是最底层的运算，也是最快的运算，我们抛弃位运算不用实则是一项巨大的损失呀。举个例子：我们经常进行的奇偶判断：

     while(k--){
           if(k % 2 == 1){
               //奇数
          }else{
              //偶数
          }
    }

   其实我们可以改为：

   while(k--){
           if(k & 1){
             //奇数
          }else{
            //偶数
         }
    }

7.使网页动画脱离文档流

     网页渲染是一个很复杂的工作，虽然我们感受不到，但是由于页面动画持续修改页面标签的大小或者坐标，会给浏览器增加很大的负担，但是我们可以选择将动画元素脱离文档流的方式，例如给其使用

position：relative,或者position:fixed，这样，元素的各种改变就不会影响到页面元素了，何乐而不为呢。

 

8.多多使用原生方法

    举一个很简单的例子，我们要求一个数的绝对值，有些人就写了一个判断语句：

    if（num < 0）{num *= -1};

    虽然代码不是很麻烦，但是我们有原生的  Math.abs(num)  方法，而且，原生方法要比我们自己写的方法快好多的，这一点我相信大家只要对js基础够了解都不会犯错的

 

9.缓存需要使用的初级作用域以外的变量

  了解作用域链的人应该都知道，代码访问变量的顺序，变量越靠外，访问的速度也就越慢，所以，当我们需要访问的变量不在初级作用域中而且访问次数大于1次时，我们可以选择缓存该变量到初级作用域

 

 

10.多使用数组来代替集合

    我们看这样一段代码：

   var coll = document.getElementsByTagName('span');
    function toarray(coll){
        var a = [];
        for(var i=0,j = coll.length;i<j;i++){
            a.push(coll[i]);
        }
        return a;
    }
    var arr = toarray(coll);
  //循环1
    for(var i=0,j = coll.length;i<j;i++){
        coll[i].style.height="0px";
    }

    //循环2
    for(var i=0,j = arr.length;i<j;i++){
        arr[i].style.color="#F00";
    }

  这里面的循环1要比循环2慢一倍，coll是一个对象集合，而数组的访问速度是高于对象集合的，对象集合不是数组，它只不过有length属性和按序号取元素的方法，但不具有数组的push，shift等方法。

 

10.for循环的优化

   先看一段代码：

   var N1 = 1000000;
    
    //循环1
    for(var i = 0; i< N1 ;i++){
        var l = i;
    }

     //循环2
    var i=0;
    for(; i< N1 ;i++){
        var l = i;
    }

  经过试验得知，循环而的执行速度比循环1高5倍左右，有图为证：

 

 

11.迭代次数超过1000次，最好使用 达夫设备，减少迭代次数，提高效率

   实现代码：

   function duff(items,process){
        var i = j = items.length % 8,//取余数
         multiple= Math.floor(items.length / 8);//向下取整获取8的倍数
        while(j){
            process(items[--j]);
        }
        while(multiple--){         //有效的减少了循环判断的次数
            process(items[i++]);
            process(items[i++]);
            process(items[i++]);
            process(items[i++]);
            process(items[i++]);
            process(items[i++]);
            process(items[i++]);
            process(items[i++]);
        }
    }

 

12.if else  二分法，减少抵达正确分支的判断次数

这里给个图吧，应该能说明问题：

 

欢迎批评指正。