編寫更快的選擇器

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

這只是由於更復雜的選擇器的創建時間更長,在簡單頁面中的創建時間可能對性能起主要的做用。

固然,無論怎麼測試都沒法準確地說明在你的頁面中選擇器的性能。肯定哪個選擇器在特定頁面中最快的惟一方法是在頁面中測試全部選擇器。
相關文章
相關標籤/搜索