2012-01-11 137 views
3

我對css3使用選擇器(或一般簡單的css選擇器)相當陌生,並且對這些css選擇器vs jquery或javascript選擇器的性能比較感到好奇嗎?jquery選擇器vs css3選擇器的性能

說你有這樣的事情:

CSS版本

#someID > div:nth-child(2n) { some css .... } 

jQuery的版本(編輯)

$("#someID").children(":nth-child(even)").css({ some css ....}); 

是它往往更快時,您可以使用CSS選擇器,或使用jQuery選擇器來調整涉及一個元素或一組元素的CSS?主要是當集合變得相當大時。我會認爲只有少數項目不會有太大的性能差異?

謝謝!

+2

在這兩種情況下,第一個子選擇器「>」都是豬。 – 2012-01-11 22:19:08

+0

這些選擇器示例不匹配。第二個示例選擇ID爲「someID」的元素,它是一個偶數子元素,而第一個元素選擇一個div,它是#someID的偶數子元素。 – 2012-01-11 22:21:10

+0

是的,我想我搞砸了jQuery版本...試圖把它放在一起快。 – Matt 2012-01-11 22:37:17

回答

5

jQuery的選擇器引擎股大部分相同的語法爲CSS,有效延長標準選擇。這意味着您可以將大多數有效的CSS選擇器(與some exceptions)傳遞給jQuery,並且它可以很好地處理它們。

jQuery爲現代瀏覽器優化了有效的CSS選擇器,通過將選擇器直接傳遞給document.querySelectorAll()來支持選擇器API。這意味着您的jQuery選擇器與等效的CSS選擇器具有幾乎相同的性能,唯一的開銷是$().css()和選擇器API調用。

對於不支持選擇器API的瀏覽器,很明顯,jQuery將非常慢,因爲它必須自己完成所有繁重的工作。更重要的是,它僅僅會因爲我鏈接到上面的異常以及瀏覽器不支持的其他CSS選擇器而失敗。

但是,儘管如此,jQuery 將總是變慢,因爲瀏覽器必須運行腳本並在獲得應用和計算樣式之前對其進行評估。

畢竟,說實話,即使你有數百個項目,這也不算什麼 - 瀏覽器獲取標記所花費的時間比渲染樣式所需的時間更長。如果你需要做樣式,並且CSS支持它,爲什麼不使用CSS?這就是爲什麼該語言是首先創建的。

+0

就此而言,CSS3選擇器並不比您所謂的「簡單」CSS2和CSS1選擇器更「高級」或「複雜」。 – BoltClock 2012-01-12 06:21:09

2

純粹的CSS將總是由於它在瀏覽器內完成並進行了優化,所以速度更快!

缺點是某些選擇器可能不支持您正在瀏覽的瀏覽器。見http://caniuse.com/#feat=css-sel3

1

對於我來說,如果我使用jquery意味着,我希望把它的一些效果,比如說像

$("#someID:nth-child(even)").css({ some css ....}).fadeIn('slow'); 
從您更好地使用CSS本身

除,但我們幾乎沒有看到的差異無論如何,至少對於一個小範圍系統來說。

我發現這個網頁比較來自不同的javascript框架的選擇器能力和jquery做得很好。

javascript framework selector test