编写更快的选择器

当你的页面有大量$(‘.classname’)时,假如有如下代码

<div class="low"></div>
<div id="fast"></div>

$('.low')  //更慢
$('#fast') //更快

如果必须使用类名选择器,先看看能不能用更快的id选择器找到双亲元素,然后向下寻找子元素。
例如:

<table id="fast">
<tr><td>text</td><td class="low"></td></tr>
...
</table>

可以使用如下代码:

$('.low')            //较慢
$('td.low')          //可能快一些
$('#fast .low')      //可能快得多
$('#fast td.low')    //在某些浏览器可能较快 

!注意:

在非常简单的页面中,简单的$('.low')的测试结果可能远远超过花里胡哨的选择器(如$('#fast td.low')),甚至在你认为类选择器应该运行得较慢的浏览器和jq版本中也是如此。

这只是因为更复杂的选择器的建立时间更长,在简单页面中的建立时间可能对性能起主要的作用。

当然,不管怎么测试都无法准确地说明在你的页面中选择器的性能。确定哪一个选择器在特定页面中最快的唯一方法是在页面中测试所有选择器。




    原文作者:战五渣
    原文地址: https://segmentfault.com/a/1190000014530252
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞