jQuery各種擷取元素的方式效率比較

標籤：jquery

/**這種方式最快，因為它直接使用原生的getElementById,ByTagName 和 querySelectorAll();*/$(‘#box‘).find(‘p‘); /**jQuery會自動把這條語句轉換為$(‘#box‘).find(‘p‘)，效率較最快的方式慢了5%-10%*/$(‘p‘,‘#box‘); /** *這條語句在jQuery內部會使用$.sibling()和javascript的nextSiblint（）方法， *一個個的遍曆結點，會比最快的方式慢50%左右 */$(‘#box‘).children(‘p‘); /** *jQuery內部使用的Sizzle引擎，處理各種選取器。Sizzle引擎的選擇順序是從右至左， *所以這條語句的選擇順序是先選擇p，然後再一個個的過濾出父元素#box， *這導致他比最快的方式慢了大約70% */$(‘#box>p‘);/** *這條語句與上面那一條是同樣的情況，但是上一條選擇了直接的子項目，這一條可以選擇多級子項目 *所以它的速度更加的慢，大約比最快的方式慢77% */$(‘#box p‘);/** *jQuery內部會將這種方式轉換為$(‘#box‘).find(‘p‘),比最快的方式慢了大約23% */$(‘p‘,$(‘#box‘));

    綜上所述，最快的方式是find方式，最慢的是$(‘#box p‘)這種進階選取器方式，如果一開始可以對$(‘#box‘)進行賦值的話，效率會進一步的增加。

var box = $(‘#box‘);var p = box.find(‘p‘);

    

    我們應該推薦使用哪種方案呢？其實，使用哪種都差不多。這裡，我們推薦使用jQuery 提供的方法。 因為不但方法的速度比進階選取器啟動並執行更快， 並且它的靈活性和擴充要高於進階選取器。使用“+”或“~”從字面上沒有 next 和 nextAll 更加語義化，更加清晰，jQuery 的方法更加豐富，提供了相對的 prev 和 prevAll。畢竟 jQuery 是程式設計語言，需要能夠靈活的拆分和組合選取器，而使用 CSS 模式過於死板。所以，如果 jQuery 提供了獨立的方法來代替某些選取器的功能，我們還是推薦優先使用獨立的方法。

    學習李彥恢老師的jQuery教程筆記

本文出自 “不羈的風” 部落格，請務必保留此出處http://fengcl.blog.51cto.com/9961331/1876155

jQuery各種擷取元素的方式效率比較