编写更快的选择器

当你的页面有大量$('.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版本中也是如此。

这只是由于更复杂的选择器的创建时间更长,在简单页面中的创建时间可能对性能起主要的做用。

固然,无论怎么测试都没法准确地说明在你的页面中选择器的性能。肯定哪个选择器在特定页面中最快的惟一方法是在页面中测试全部选择器。
相关文章
相关标签/搜索