jQuery 選擇器效率

風神修羅使發表於2020-10-25
jQuery

原文地址：http://www.cnblogs.com/aaronjs/p/3337531.html

ID > Tag > Class

  • ID 選擇器是速度最快的，這主要是因為它使用 JavaScript 的內建函式 getElementById()；
  • 其次是型別選擇器，因為它使用 JavaScript 的內建函式 getElementsByTag()；
  • 速度最慢的是 Class 選擇器，其需要通過解析 HTML 文件樹，並且需要在瀏覽器核心外遞迴，這種遞迴遍歷是無法被優化的。

選擇器效能優化建議

  • 儘量使用 ID 選擇器
  • 少直接使用 Class 選擇器，儘量結合 Tag 使用，如 input.myclass
  • 多用父子關係，少用巢狀關係
  • 快取 jQuery 物件
  • 鏈式呼叫

效能分析

1 > 2 > 3 > 4 > 5 > 6

$parent.find('.child')       //   1  
$('.child', $parent)         //   2  
$('.child', $('#parent'))    //   3  
$parent.children('.child')   //   4  
$('#parent > .child')        //   5  
$('#parent .child')          //   6

  1. 這條是最快的語句。.find()方法會呼叫瀏覽器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度較快。

  2. 給定一個DOM物件，然後從中選擇一個子元素。jQuery會自動把這條語句轉成$.parent.find('child')，這會導致一定的效能損失。它比最快的形式慢了5%-10%。

  3. jQuery內部會將這條語句轉成$('#parent').find('.child')，比最快的形式慢了23%。

  4. 這條語句在jQuery內部，會使用$.sibling()和javascript的nextSibling()方法，一個個遍歷節點。它比最快的形式大約慢50%

  5. jQuery內部使用Sizzle引擎，處理各種選擇器。Sizzle引擎的選擇順序是從右到左，所以這條語句是先選.child，然後再一個個過濾出父元素#parent，這導致它比最快的形式大約慢70%。

  6. 這條語句與上一條是同樣的情況。但是，上一條只選擇直接的子元素，這一條可以於選擇多級子元素，所以它的速度更慢，大概比最快的形式慢了77%。

相關文章