編寫更快的選擇器

戰五渣發表於2018-04-22

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

這只是因為更復雜的選擇器的建立時間更長,在簡單頁面中的建立時間可能對效能起主要的作用。

當然,不管怎麼測試都無法準確地說明在你的頁面中選擇器的效能。確定哪一個選擇器在特定頁面中最快的唯一方法是在頁面中測試所有選擇器。




相關文章