CSS優化，嵌套選擇器和ID /類名的瀏覽器索引

在渲染網頁和應用樣式時，瀏覽器是否索引ID和類的名稱以進行高效搜索，或者每次瀏覽ID時是否從頂部遍歷整個DOM或類名稱被指定到達正確的元素。CSS優化，嵌套選擇器和ID /類名的瀏覽器索引

我想知道優化的原因，以及是否值得讓瀏覽器提示（更長的選擇器）到某個ID的對象所在的位置。即

#container #one-of-many-container-siblings #my-id

代替：

#my-id

請問前者產生更好的性能，如果DOM是相當大的？

來源

2011-05-27 Michael Waterfall

它實際上與你所想的相反。

請記住，瀏覽器從右到左解析CSS選擇器。

此：

#container #one-of-many-container-siblings #my-id

將採取更多措施，以配合比這

#my-id

參見：http://www.css-101.org/descendant-selector/go_fetch_yourself.php

考慮你剛剛問的問題，我建議你閱讀本文章：

http://css-tricks.com/efficiently-rendering-css/

它會幫助你編寫更高效的選擇：

#main-navigation { }  /* ID (Fastest) */ 
body.home #page-wrap { } /* ID */ 
.main-navigation { }  /* Class */ 
ul li a.current { }  /* Class * 
ul { }     /* Tag */ 
ul li a { }    /* Tag */ 
* { }      /* Universal (Slowest) */ 
#content [title='home']  /* Universal */

來源

2011-05-27 17:09:35 thirtydot

我明白了，非常有趣。我感覺瀏覽器分析樣式表然後應用每種樣式，即遇到一個選擇器，找到它匹配的元素，應用樣式屬性，轉到下一個選擇器。然而，它看起來好像實際上是通過HTML文檔的，並且對於每個元素它都會經歷所有的CSS規則並找出哪個適用。因此，從左到右的讀取對於排除而不是包含進行更好。 – 2011-05-29 08:45:39

非常感謝這些信息 - 非常有用！在提出問題之前，我進行了一次快速搜索，並且我努力尋找關於（幕後）瀏覽器如何處理和呈現這些文檔的詳細信息。很高興知道這些事情是如何工作的！ – 2011-05-29 08:54:33

使用較短的版本總是會更快，因爲執行的檢查較少，但是我不知道爲什麼需要優化頁面上的CSS。

來源

2011-05-27 17:07:48

效率可能是大型網站/應用程序的一個因素。看看他的答案中提供的「thirtydot」鏈接：http：//css-tricks.com/efficiently-rendering-css/ – 2011-05-29 08:59:05

最好使用2個或更少的選擇器作爲性能的經驗法則。

來源

2011-05-27 17:07:50 m4tt1mus

在HTML/CSS的ID的定義是一個元素的單個實例。假設你遵循該規則，那麼你所需要的就是該元素的ID。瀏覽器將搜索並找到該元素並停止。

隨着你的「暗示」，它將首先搜索第一個項目，然後是第二個，然後是第三個，然後停下來。正如你可能看到的，這樣做效率更低。

在處理類時，可能會變得更加模糊和模糊，但一般規則是選擇器越少越好。如果你發現自己在做三到四個或五個選擇器，那麼可能需要考慮一些重構，比如在戰略位置添加類或ID，或者甚至不用CSS選擇器。

來源

2011-05-27 17:12:27 Shauna

CSS優化，嵌套選擇器和ID /類名的瀏覽器索引

回答

相關問題