jQuery 選擇器和each效能比較
- 2011-01-06
- 25815
- 0
這幾天的文章都有扯到 jQuery ,其中的【實作 GridView 整列選取功能使用 JavaScript】有做了一個隱藏第一個 td 的效果,說行話一點就是隱藏第一個子元素,文章寫完後被人說醜但是我還滿習慣這樣寫的不過被質疑了就懷疑哪種比較好,以下就是簡單效能比較文章。
因為 jQuery 強到亂七八糟所以其實搜尋選擇器有很多種寫法,之前的文章 demo 使用了這種寫法
$('table tr').each(function () { $(this).children().eq(0).hide(); });
跑了一個 each 來達到效果,而嫌棄我的人說他不喜歡跑 each 所以這種需求他會用 :nth-child 來寫我卻很直覺的回內建的和自己跑會差很多嗎?效能應該沒差多少吧,但是感覺是沒有用的,實際來驗證比較好玩,因此 demo 今天寫了一個很簡單的測試來比較兩者的差異,結果真是差真多哩。
因為簡單的表格實在是看不出來差別所以我將測試的表格拉到一百行以下是 each 的寫法耗時大約 25 毫秒
而使用了 :nth-child 寫法竟然快到只要 2~3毫秒....
- 以上這兩塊程式區塊是可以實際跑的所以各位可以玩玩看(還可以編輯唷)
- 套用的 jQuery 是 1.4.4 其他版本可能會有所差異
- 以上數據是用 Google Chrome 測的不同的瀏覽器會有不同的花費時間,不過比較快的永遠只有一個
- 看起來要改變習慣,沒事不要亂跑迴圈......
回應討論