jQuery的性能優化，你知道幾條

jopen 10年前發布 | 45K 次閱讀 jQuery Ajax框架
我一直在尋找有關jQuery性能優化方面的小竅門，能讓我那臃腫的動態網頁應用變得輕便些。找了很多文章后，我決定將最好最常用的一些優化性能的建議列出來

=================================================================
一、選擇器性能優化建議
=================================================================

1. 總是從#id選擇器來繼承
這是jQuery選擇器的一條黃金法則。jQuery選擇一個元素最快的方法就是用ID來選擇了。
  1. $('#content').hide();

</div> 或者從ID選擇器繼承來選擇多個元素:

  1. $('#content p').hide();

</div>

</div> 2. 在class前面使用tag
jQuery中第二快的選擇器就是tag選擇器（如$(‘head’)），因為它和直接來自于原生的Javascript方法getElementByTagName()。所以最好總是用tag來修飾class(并且不要忘了就近的ID)

  1. varreceiveNewsletter = $('#nslForm input.on');

</div>

</div> jQuery中class選擇器是最慢的，因為在IE 瀏覽器 下它會遍歷所有的DOM節點。盡量避免使用class選擇器。也不要用tag來修飾ID。下面的例子會遍歷所有的div元素來查找id為’content’的那個節點：

  1. varcontent = $('div#content');// 非常慢，不要使用

</div>

</div> 用ID來修飾ID也是畫蛇添足：

  1. vartraffic_light = $('#content #traffic_light');// 非常慢，不要使用

</div>

</div> 3. 使用子查詢
將父對象緩存起來以備將來的使用

  1. varheader = $('#header');

  2. varmenu = header.find('.menu');

  3. // 或者

  4. varmenu = $('.menu', header);
    5. </ol>

    </div>

    </div> 4. 優化選擇器以適用Sizzle的“從右至左”模型
    自版本1.3之后，jQuery采用了Sizzle庫，與之前的版本在選擇器引擎上的表現形式有很大的不同。它用“從左至右”的模型代替了“從右至左”的模型。確保最右的選擇器具體些，而左邊的選擇器選擇范圍較寬泛些：
    var linkContacts = $('.contact-links div.side-wrapper');
    而不要使用
    var linkContacts = $('a.contact-links .side-wrapper');

    5. 采用find()，而不使用上下文查找
    .find()函數的確快些。但是如果一個頁面有許多DOM節點時，需要來回查找時，可能需要更多時間:

    1. vardivs = $('.testdiv','#pageBody');// 2353 on Firebug 3.6

    2. vardivs = $('#pageBody').find('.testdiv');// 2324 on Firebug 3.6 - The best time

    3. vardivs = $('#pageBody .testdiv');// 2469 on Firebug 3.6
      4. </ol>

      </div>

      </div> 6. 利用強大的鏈式操作
      采用jQuery的鏈式操作比緩存選擇器更有效：

      1. $('li.menu-item').click(function() {alert('test click');})

      2. .css('display','block')

      3. .css('color','red')

      4. fadeTo(2, 0.7);
        5. </ol>

        </div>

        </div> 記住，永遠不要讓相同的選擇器在你的代碼里出現多次：
        （1）為了區分普通的JavaScript對象和jQuery對象，可以在變量首字母前加上$符號。

        7. 編寫屬于你的選擇器
        如果你經常在代碼中使用選擇器，那么擴展jQuery的$.expr[':']對象吧，編寫你自己的選擇器。下面的例子中，我創建了一個abovethefold選擇器，用來選擇不可見的元素：

        1. $.extend($.expr[':'], {

        2. abovethefold:function(el) {

        3. return$(el).offset().top < $(window).scrollTop() + $(window).height();

        4. }

        5. });

        6. varnonVisibleElements = $('div:abovethefold');// 選擇元素
          7. </ol>

          </div>

          </div> =================================================================
          二、優化DOM操作建議</span></span>
          =================================================================

          8. 緩存jQuery對象
          將你經常用的元素緩存起來：

          1. varheader = $('#header');

          2. vardivs = header.find('div');

          3. varforms = header.find('form');
            4. </ol>

            </div>

            </div> 9. 當要進行DOM插入時，將所有元素封裝成一個元素
            這里的基本思想是在內存中建立你確實想要的東西，然后更新DOM。這并不是一個jQuery最佳實踐，但必須進行有效的JavaScript操作 。直接的DOM操作速度很慢
            直接的DOM操作很慢。盡可能少的去更改HTML結構。

            1. varmenu = '<ul id="menu">';

            2. for(vari = 1; i < 100; i++) {

            3. menu += '<li>'+ i + '</li>';

            4. }

            5. menu += '</ul>';

            6. $('#header').prepend(menu);

            7. // 千萬不要這樣做：

            8. $('#header').prepend('<ul id="menu"></ul>');

            9. for(vari = 1; i < 100; i++) {

            10. $('#menu').append('<li>'+ i + '</li>');

            11. }
              12. </ol>

              </div>

              </div> 冒泡事件：</span> 除 非在特殊情況下, 否則每一個js事件(例如:click, mouseover等.)都會冒泡到父級節點。當我們需要給多個元素調用同個函數時這點會很有用。代替這種效率很差的多元素事件監聽的方法就是, 你只需向它們的父節點綁定一次。 比如, 我們要為一個擁有很多輸入框的表單綁定這樣的行為: 當輸入框被選中時為它添加一個class傳統的做法是，直接選中input，然后綁定focus等，如下所示：

              1. $("#entryform input").bind("focus",function(){

              2.     $(this).addClass("selected");

              3. }).bind("blur",function(){

              4.     $(this).removeClass("selected");

              5. });
                6. </ol>

                </div>

                </div> 當然上面代碼能幫我們完成相應的任務，但如果你要尋求更高效的方法，請使用如下代碼：

                1. $("#entryform").bind("focus",function(e){

                2.     var$cell = $(e.target); // e.target 捕捉到觸發的目標元素

                3.     $cell.addClass("selected");

                4. }).bind("blur",function(e){

                5.     var$cell = $(e.target);

                6.     $cell.removeClass("selected");

                7. });
                  8. </ol>

                  </div>

                  </div> 通 過在父級監聽獲取焦點和失去焦點的事件，對目標元素進行操作。在上面代碼中，父級元素扮演了一個調度員的角色, 它可以基于目標元素綁定事件。如果你發現你給很多元素綁定了同一個事件監聽, 那么現在的你肯定知道哪里做錯了。同理，在Table操作時，我們也可以使用這種方式加以改進代碼：普通的方式

                  1. $('#myTable td').click(function(){

                  2.     $(this).css('background','red');

                  3. });

                  4. 改進方式：

                  5. $('#myTable').click(function(e) {

                  6. var$clicked = $(e.target);

                  7. $clicked.css('background','red');

                  8. });
                    9. </ol>

                    </div>

                    </div> 假設有100個td，在使用普通的方式的時候，你綁定了100個事件。在改進方式中，你只為一個元素綁定了1個事件，至于是100個事件的效率高，還是1個事件的效率高，相信你也能自行分辨了。

                    10. 盡管jQuery不會拋出異常，但開發者也應該檢查對象
                    盡管jQuery不會拋出大量的異常給用戶，但是開發者也不要依賴于此。jQuery通常會執行了一大堆沒用的函數之后才確定一個對象是否存在。所以在對一個作一系列引用之前，應先檢查一下這個對象存不存在。

                    11. 使用直接函數，而不要使用與與之等同的函數
                    為了獲得更好的性能，你應該使用直接函數如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，因為后面的幾個將會調用$.ajax()。

                    12. 緩存jQuery結果，以備后來使用
                    你經常會獲得一個javasript應用對象——你可以用App.來保存你經常選擇的對象，以備將來使用：

                    1. App.hiddenDivs = $('div.hidden');

                    2. // 之后在你的應用中調用：

                    3. App.hiddenDivs.find('span');
                      4. </ol>

                      </div>

                      </div> 13. 采用jQuery的內部函數data()來存儲狀態
                      不要忘了采用.data()函數來存儲信息：

                      1. $('#head').data('name','value');

                      2. // 之后在你的應用中調用:

                      3. $('#head').data('name');
                        4. </ol>

                        </div>

                        </div> 14. 使用jQuery utility函數
                        不要忘了簡單實用的jQuery的 utility函數 。我最喜歡的是$.isFunction(), $isArray()和$.each()。

                        15. 為HTML塊添加“JS”的class
                        當jQuery載入之后，首先給HTML添加一個叫”JS”的class
                        $('HTML').addClass('JS');
                        只有當用戶啟用JavaScript的時候，你才能添加CSS樣式。例如
                        /* 在css中 */
                        .JS #myDiv{display:none;}
                        所 以當JavaScript啟用的時候，你可以將整個HTML內容隱藏起來，用jQuery來實現你想實現的（譬如：收起某些面板或當用戶點擊它們時展 開）。而當Javascript沒有啟用的時候，瀏覽器呈現所有的內容，搜索引擎爬蟲也會勾去所有內容。我將來會更多的使用這個技巧。


                        =================================================================
                        三、關于優化事件性能的建議</span></span>
                        =================================================================

                        16. 推遲到$(window).load
                        有時候采用$(window).load()比$(document).ready()更快，因為后者不等所有的DOM元素都下載完之前執行。你應該在使用它之前測試它。

                        17. 使用Event Delegation
                        當 你在一個容器中有許多節點，你想對所有的節點都綁定一個事件，delegation很適合這樣的應用場景。使用Delegation，我們僅需要在父級綁 定事件，然后查看哪個子節點(目標節點)觸發了事件。當你有一個很多數據的table的時候，你想對td節點設置事件，這就變得很方便。先獲得 table，然后為所有的td節點設置delegation事件：

                        1. $("table").delegate("td","hover",function(){

                        2. $(this).toggleClass("hover");

                        3. });
                          4. </ol>

                          </div>

                          </div> 18.使用ready事件的簡寫
                          如果你想壓縮js插件，節約每一個字節，你應該避免使用$(document).onready()

                          1. / 也不要使用

                          2. $(document).ready(function(){

                          3. // 代碼

                          4. });

                          5. // 你可以如此簡寫：

                          6. $(function(){

                          7. // 代碼

                          8. });
                            9. </ol>

                            </div>

                            </div> =================================================================
                            四、測試jQuery</span></span>
                            =================================================================

                            19. jQuery單元測試
                            測試JavaSript代碼最好的方法就是人來測試。但你可以使用一些自動化的工具如 Selenium ， Funcunit ， QUit ， QMock 來測試你的代碼（尤其是插件）。我想在另外一個專題來討論這個話題因為實在有太多要說的了。

                            20. 標準化你的jQuery代碼
                            經常標準化你的代碼，看看哪個查詢比較慢，然后替換它。你可以用Firebug控制臺。你也可以使用 jQuery的快捷函數 來使測試變得更容易些：

                            1. // 在Firebug控制臺記錄數據的快捷方式

                            2. $.l($('div'));

                            3. // 獲取UNIX時間戳

                            4. $.time();

                            5. // 在Firebug記錄執行代碼時間

                            6. $.lt();

                            7. $('div');

                            8. $.lt();

                            9. // 將代碼塊放在一個for循環中測試執行時間

                            10. $.bm("var divs = $('.testdiv', '#pageBody');");// 2353 on Firebug 3.6
                              11. </ol>

                              </div>

                              </div> =================================================================
                              五、其他常用jQuery性能優化建議</span></span>
                              =================================================================

                              21. 使用最新版本的jQuery
                              最新的版本往往是最好的。更換了版本后，不要忘記測試你的代碼。有時候也不是完全向后兼容的。

                              22. 使用HMTL5
                              新的HTML5標準帶來的是更輕巧的DOM結構。更輕巧的結構意味著使用jQuery需要更少的遍歷，以及更優良的載入性能。所以如果可能的話請使用HTML5。

                              23. 如果給15個以上的元素加樣式時，直接給DOM元素添加style標簽
                              要給少數的元素加樣式，最好的方法就是使用jQuey的css()函數。然而更15個以上的較多的元素添加樣式時，直接給DOM添加style 標簽更有效些。這個方法可以避免在代碼中使用硬編碼(hard code)。

                              1. $('<style type="text/css"> div.class { color: red; } </style>')

                              2. .appendTo('head');
                                3. </ol>

                                </div>

                                </div> 24. 避免載入多余的代碼
                                將Javascript代碼放在不同的文件中是個好的方法，僅在需要的時候載入它們。這樣你不會載入不必要的代碼和選擇器。也便于管理代碼。

                                25. 壓縮成一個主JS文件，將下載次數保持到最少
                                當你已經確定了哪些文件是應該被載入的，那么將它們打包成一個文件。用一些開源的工具可以自動幫你完成，如使用 Minify (和你的后端代碼集成)或者使用 JSCompressor ， YUI Compressor  或  Dean Edwards JS packer 等在線工具可以為你壓縮文件。我最喜歡的是 JSCompressor 。

                                26. 需要的時候使用原生的Javasript
                                使用jQuery是個很棒的事情，但是不要忘了它也是Javascript的一個框架。所以你可以在jQuery代碼有必要的時候也使用原生的Javascript函數，這樣能獲得更好的性能。

                                27. 從Google載入jQuery框架
                                當你的應用正式上線的時候，請從Google CDN載入jQuery，因為用戶可以從最近的地方獲取代碼。這樣你可以減少服務器請求，而用戶如果瀏覽其他網站，而它也使用Google CDN的jQuery時，瀏覽器就會立即從緩存中調出jQuery代碼。

                                1. // 鏈接特定版本的壓縮代碼

                                2. <script type="text/javascript"src="[color=blue !important][url=https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js]https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js[/url]"></script>
                                  3. </ol>

                                  </div>

                                  </div> 2 8. 緩慢載入內容不僅能提高載入速度，也能提高SEO優化  （Lazy load content for speed and SEO benefits）
                                  使用Ajax來載入你的網站吧，這樣可以節約服務器端載入時間。你可以從一個常見的側邊欄widget開始。</div>

                                 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                                 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                                 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

                                相關經驗

                                相關資訊

                                相關文檔