js代碼最佳化

標籤：style   blog   http   color   io   使用   java   ar   for   

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建立完後一次性的加入
• 集中修改樣式

  最佳化前：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    }});

 

js代碼最佳化