优化jQuery选择器
选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任。记住这些小技巧可以让你轻松突破学习选择器时的瓶颈。
jQuery 扩展
如果可能的话,避免使用jQuery扩展选择器。这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧。
1 2 3 4 5 |
|
记住,许多jQuery的扩展,包括在上面的例子中的:even,没有在CSS规范准确的对应。在某些情况下,这些扩展的方便性可能会超过其性能成本。
避免过度使用选择器
1 2 3 4 |
|
减少DOM节点同样可以提高选择器的效率,因为这样可以使寻找元素时减少遍历的层数。
ID选择器
使用以ID选择器开始的选择器确保万无一失。
1 2 3 4 5 |
|
第一种方法 DOM 使用document.querySelectorAll()
. 第二种方法 jQuery 使用效率更高的document.getElementById()
, 尽管提高的效率会受后续的.find()的影响。
关于老版本的浏览器
使用就浏览器比如ie8或ie8-时有必要考虑一下建议
明确选择器
右边的选择器尽可能明确,左边的不用。
1 2 3 4 5 |
|
如果可能的话,在你的右边选择器使用tag.class形式,左边使用tag或.class。
避免使用通用选择器
通用选择器放在任何地方效率都不高。
1 2 3 4 5 6 |
|