js代碼優化

1、減少Jquery使用

處理dom遍歷和復雜的腳本場景時，jquery可能有很大的幫助，不過在處理簡單的、直截了當的代碼場景就會遲緩。盡可能的避免jquery對象創建，尤其在循環中。

2、優化循環

用被緩存的數組長度

優化前
for (var i = 0; i < arr.length; i++) {
    // some code here
}

優化后
for (var i = 0, len = arr.length; i < len; i++) {
    // some code here
}

3、if/else和swith語句

• 如果只是1或者2個語句，那if/else性能更好點
• 如果3個或者3個以上，那swith更好，這個可以通過測試來驗證（測試地址）

4、緩存dom元素、jquey對象、對象/數組值

5、減少reflow

對dom的每次改變都會有一個重大的性能成本造成頁面reflow

• 避免在document上直接進行頻繁的DOM操作，如果確實需要可以采用off-document的方式進行
• 先將元素從document中刪除，完成修改后再把元素放回原來的位置
• 將元素的display設置為”none”，完成修改后再把display修改為原來的值
• 如果需要創建多個DOM節點，可以使用DocumentFragment創建完后一次性的加入

  //優化前
  var list=document.getElementById("list");
  for(var i=0;i<10;i++){
  var item=document.createElement("li");
  item.innerHTML="option "+(i+1);
  list.appendChild(item);
  }
  
  //優化后
  var list=document.getElementById("list");
  var fragment=document.createDocumentFragment();
  for(var i=0;i<10;i++){
  var item=document.createElement("li");
  item.innerHTML="option "+(i+1);
  fragment.appendChild(item);
  }
  list.appendChild(fragment);

• 集中修改樣式

  優化前：
  function selectAnchor(element){ 
  var changeDiv = document.getElementById(element);
  changeDiv.style.color = ‘#093′;
  changeDiv.style.background = ‘#fff’;
  changeDiv.style.height = ’100px’;
  }
   
  優化后：
  CSS:
  changeDiv {
  background: #fff;
  color: #093;
  height: 100px;
  }
  JavaScript:
  function selectAnchor(element) {
  document.getElementById(element).className = ‘changeDiv’;
  }

   

6、避免全局的搜索

var $button=$(".button");
$buttons.find( "a.mybutton" );替代$( "a.mybutton" );

7、優先dom搜索，然后再過濾

• 優先使用原生的getElementById、getElementsByTagName
• 例如.find( "a" ).filter( "[href=*'url_fragment']" )替換.find( "a[href=*'url_fragment']" 

8、綁定多個事件到一個元素

//優化前
var $elem = $( "#element" );
$elem.on( "mouseover", function( event ) {
    // mouseover
});
$elem.on( "mouseout", function( event ) {
    // mouseout
});
//優化后
$( "#elem" ).on( "mouseover mouseout", function( event ) {
    if ( event.type === "mouseover" ) {
        // mouseover
    } else {
        // mouseout
    }
});

 9、Property深度

• object.name<object.name.name
• 這個property越深，獲取時間越長