【jQuery基礎學習】11 jQuery性能簡單優化

關於性能優化

• 合適的選擇器
  • $("#id")會直接調用底層方法，所以這是最快的。如果這樣不能直接找到，也可以用find方法繼續查找
  • $("p")標簽選擇器也是直接調用底層方法，所以是第二選擇
  • $(".class")也是直接調用底層方法，不過IE8及更早版本不支持getElementByClassName，它會採用DOM搜索方式，所以會影響性能。
  • $("[attribute=value]")採用DOM搜索的方式，很多現代瀏覽器支持querySelectorALL方法，但不同瀏覽器上性能也有所區別。總的來說，用這種方式定位DOM元素，性能不太理想。
  • $(":hidden")這種偽選擇器方式，同樣沒有在本地js方法中實現。同樣DOM搜索
  • 以上五種方法性能依次而降，所以儘量用ID選擇器，並且給選擇器指定上下文。如果你強行要用DOM搜索方式的選擇器，建議先用個ID選擇器縮小範圍，再用find函數進一步搜索。
• 緩存對象
  • 儘量去用鏈式操作，而不是多次使用相同的選擇器，然後再進行不同的操作
  • 如果不能用鏈式操作，可以考慮將需要用到的jQuery對象放到一個全局對象里。這樣不用每次使用都去查找DOM。
• 迴圈時的DOM操作
  • 不要去迴圈進行DOM插入的操作，就是$("#id").append及類似的操作，這樣會很耗性能。所以可以考慮先把一大串這樣的操作，用拼接HTMl字元串的方式，當做字元串先拼好，然後再插入。
• 數組方式使用jQuery對象
  • jQuery選擇器返回的是一個jQuery對象，如果你是在用一個實際上是數組意義的結構的話，那麼在性能上講，可以用for和while去代替$("#id").each()的寫法。
• 事件代理
  • 儘量去少綁定事件，否則也會帶來負面性能影響。當綁定多個事件時，可以考慮是否能夠通過它們共同的父級去只綁定一個事件

    //可以想一想下麵這種情況，如果是一個大型表格，那麼會綁定N次事件。
    $('#myTable td').click(function(){
        $(this).css('background','red');
    });
    //利用事件的冒泡機制去代替上面那種拙劣的寫法
    $('#myTable').click(function(e){
        var $click=$(e.target);//e.target捕捉觸發的目標元素
        $click.css('background','red');
    });
    //當然我們還可以用on來進行更簡單的事件綁定
    $('#myTable').on('click','td',function(){
        $(this).css('background','red');
    });

• 可以考慮用自定義jQuery插件去取代自己的重覆代碼
• 使用join()去取代+來拼接字元串
• 可以考慮在更需要性能的地方使用原生js代碼
• 合理使用HTML5的data屬性

  <div id="d1" data-role="page" data-last-value="43" data-options='{"name":"Troy123"}'></div>
  
  $("#d1").data("role");//"page"
  $("#d1").data("lastValue");//43
  $("#d1").data("options").name;//"Troy123"

最後作者還寫了一些使用jQuery的技巧，其實也就是一些解決方案。

好吧，更通俗的講就是可以在網上搜一搜，然後直接複製粘貼的代碼。

我覺得這些都很次要，所以只是自己看完就沒有貼上來了。畢竟當你遇到這些問題的時候百度一下copy就好了。