最佳化jQuery選取器

標籤：

最佳化jQuery選取器

選擇最佳化比以前更加重要，因為越來越多的瀏覽器實現了queryselectorall()並承擔了將jQuery選取器轉移到瀏覽器的責任。記住這些小技巧可以讓你輕鬆突破學習選取器時的瓶頸。

jQuery 擴充

如果可能的話，避免使用jQuery延伸選取器。這些擴充無法在效能讓原生的queryselectorall() DOM提供的方法更有效，所以還是用jQuery提供的常規選取器吧。

12345

// Slower (the zero-based :even selector is a jQuery extension)$( "#my-table tr:even" ); // Better, though not exactly equivalent$( "#my-table tr:nth-child(odd)" );

記住，許多jQuery的擴充，包括在上面的例子中的:even，沒有在CSS規範準確的對應。在某些情況下，這些擴充的方便性可能會超過其效能成本。

避免過度使用選取器

1234	$( ".data table.attendees td.gonzalez" ); // Better: Drop the middle if possible.$( ".data td.gonzalez" );

減少DOM節點同樣可以提高選取器的效率，因為這樣可以使尋找元素時減少遍曆的層數。

ID選取器

使用以ID選取器開始的選取器確保萬無一失。

12345

// Fast:$( "#container div.robotarm" ); // Super-fast:$( "#container" ).find( "div.robotarm" );

第一種方法 DOM 使用document.querySelectorAll(). 第二種方法 jQuery 使用效率更高的document.getElementById(), 儘管提高的效率會受後續的.find()的影響。

關於老版本的瀏覽器

使用就瀏覽器比如ie8或ie8-時有必要考慮一下建議

明確選取器

右邊的選取器儘可能明確，左邊的不用。

12345

// Unoptimized:$( "div.data .gonzalez" ); // Optimized:$( ".data td.gonzalez" );

如果可能的話，在你的右邊選取器使用tag.class形式，左邊使用tag或.class。

避免使用通用選取器

通用選取器放在任何地方效率都不高。

123456

$( ".buttons > *" ); // Extremely expensive.$( ".buttons" ).children(); // Much better. $( ":radio" ); // Implied universal selection.$( "*:radio" ); // Same thing, explicit now.$( "input:radio" ); // Much better.

最佳化jQuery選取器