优化jQuery选择器

Posted 小方块的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了优化jQuery选择器相关的知识,希望对你有一定的参考价值。

优化jQuery选择器

选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任。记住这些小技巧可以让你轻松突破学习选择器时的瓶颈。

jQuery 扩展

如果可能的话,避免使用jQuery扩展选择器。这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧。

1
2
3
4
5
// 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规范准确的对应。在某些情况下,这些扩展的方便性可能会超过其性能成本。

避免过度使用选择器

1
2
3
4
$( ".data table.attendees td.gonzalez" );
 
// Better: Drop the middle if possible.
$( ".data td.gonzalez" );

减少DOM节点同样可以提高选择器的效率,因为这样可以使寻找元素时减少遍历的层数。

ID选择器

使用以ID选择器开始的选择器确保万无一失。

1
2
3
4
5
// Fast:
$( "#container div.robotarm" );
 
// Super-fast:
$( "#container" ).find( "div.robotarm" );

第一种方法 DOM 使用document.querySelectorAll(). 第二种方法 jQuery 使用效率更高的document.getElementById(), 尽管提高的效率会受后续的.find()的影响。

关于老版本的浏览器

使用就浏览器比如ie8或ie8-时有必要考虑一下建议

明确选择器

右边的选择器尽可能明确,左边的不用。

1
2
3
4
5
// Unoptimized:
$( "div.data .gonzalez" );
 
// Optimized:
$( ".data td.gonzalez" );

如果可能的话,在你的右边选择器使用tag.class形式,左边使用tag或.class。

避免使用通用选择器

通用选择器放在任何地方效率都不高。

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

以上是关于优化jQuery选择器的主要内容,如果未能解决你的问题,请参考以下文章

jquery中的$的特殊用法

优化jQuery选择器

jQuery性能优化

jQuery代码性能优化的10种方法

jQuery 性能优化

jQuery 选择器优化