通用選擇器的性能影響是什麼？

我試圖在頁面中找到一些簡單的客戶端性能調整，每頁接收數以百萬計的月度頁面瀏覽量。我擔心的一個問題是使用CSS通用選擇器（*）。通用選擇器的性能影響是什麼？

作爲一個例子，考慮像一個非常簡單的HTML文件如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Example</title> 
    <style type="text/css"> 
     * { 
     margin: 0; 
     padding: 0; 
     } 
    </head> 
    <body> 
    <h1>This is a heading</h1> 
    <p>This is a paragraph of text.</p> 
    </body> 
</html>

通用選擇將應用上述聲明到body，h1和p元件，因爲這些是在唯一的文件。

在一般情況下，我會看到一個規則更好的性能，如：

body, h1, p { 
    margin: 0; 
    padding: 0; 
}

或者將這種具有完全相同的淨效應？

通用選擇器是否執行了我可能不知道的更多工作？

我意識到這個例子中的性能影響可能非常小，但我希望學習一些可能會導致在現實世界中更顯着的性能改進的東西。

我不打算在文檔中稍後使用其他樣式覆蓋通用選擇器規則中的樣式 - 即將其用作快速和髒重置樣式表。我實際上試圖完全按照我的意圖使用通用選擇器 - 將規則集應用於文檔中的所有元素，一勞永逸。

最終，我希望確定是否有一些內在的普遍選擇性慢，或者如果它只是由於猖獗的濫用只是一個壞的說唱。如果* { margin: 0; }字面上相當於body, h1, p { margin: 0; }，那麼這將回答我的問題，我會知道去與前者，因爲它更簡潔。如果沒有，我想了解爲什麼通用選擇器執行速度更慢。

來源

2010-06-01 Bungle

從性能的角度來看，什麼時候最好全局禁用（或啓用）_everything_的特性才能最終重新設置？學習瀏覽器的默認設置不會花費很長時間 - 您可以從「重置」CSS文件中獲得提示，但我不會真正使用它。開放源代碼瀏覽器具有可以查看的開源CSS默認值。 – reisio 2010-06-01 18:03:53

我不確定你是否理解我的問題。我不打算重置，然後在此重新應用樣式，而是將規則應用於頁面上的每個元素。我的問題是使用通用選擇器在技術上是否相同，因爲它是單獨選擇每個元素，或者由於任何原因導致性能損失。 – Bungle 2010-06-01 23:06:57

由於顯而易見的原因，'*'並不等同於'body，h1，p'。 * only *之所以執行得更慢是因爲您將樣式應用於所有內容，而其他選擇器將您限制爲DOM中特定的元素子集。但真正的問題是，瀏覽器會因應用太多的樣式而變得反應遲鈍？我非常懷疑它。另見：[* {box-sizing：border-box} FTW]（http://paulirish.com/2012/box-sizing-border-box-ftw） – BoltClock 2012-07-23 08:08:43

在現代瀏覽器中，如果不對每個元素應用慢效果（例如，box-shadow，z軸旋轉），則性能影響可以忽略不計。普遍選擇者速度緩慢的說法是十年前緩慢時的宿醉。

參考：http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx

來源

2012-11-17 15:53:10 mxcl

避免通用選擇器將始終加快您的頁面呈現速度。通配符*很慢，尤其是當您的頁面變得複雜的嵌套，並且您的元素數量飛漲。

你應該總是指定一個ID，直到你可能的最低級別（我意識到這變得幾乎不可能，特別是在處理數據庫結果等事情時）。但是，當你使用選擇喜歡

.mysuperclass ul li p a

你有一個類，接着四種通用選擇 - 這意味着，對於.mysuperclass渲染引擎的每個元素必須通過在父的每一個元素尋找這些規則的循環。

簡而言之，我的答案是儘可能與CSS保持一致，然後儘可能深入DOM並加入選擇器。避免使用通配符和泛型。

來源

2010-06-01 17:59:45

謝謝，Jarrod。我想我可以在我的問題中更好地強調，我確實希望使用我的CSS規則（即，通用選擇器）來定位頁面上的每個元素，據我瞭解，這正是我在這種情況下所需的。由於我也一直聽到通用選擇器很慢，所以我希望瞭解這種慢度是選擇器固有的，還是僅僅基於它的典型用法（例如，一個快速而髒的重置樣式表將被遵循通過覆蓋樣式）。 – Bungle 2010-06-01 23:16:16

我明白了。我會建議使用Chrome的開發人員工具進行一些速度測試。測試一下，看看使用通配符選擇符與顯式標籤定義的結果。 Chrome會給你一個每個過程需要多長時間的細分。 – 2010-06-02 04:13:34

+12

我會建議*反對*與您的選擇器「儘可能具體」。將來，當你想對樣式進行修改或者當你有更多的例外時，你會想要覆蓋這些選擇器，這些選擇器越變得越具體，它們就越具體。保持特異性低，並使用更多的元素和類選擇器。 http://numiko.com/labs/2011/07/css-specificity-wars/ – chharvey 2014-01-24 06:33:39

我明白通配符會影響性能，但對小網站的影響是微不足道的。通配符是基於漸進式增強構建網站的非常有用的工具。顯然，使用類似HTML *的文件會影響大型網站的性能，但會使其更具體，如#element_id *有助於快速對子元素進行通用更改。

通配符畢竟是有原因的。你只需要明白，使用它會比不使用它更有益。這取決於上下文。

我在製作CSS模板時使用了通配符和泛型選擇器。這也是使用自定義樣式快速調整不熟悉的WordPress主題中的一系列元素的好方法。

甚至引導程序，這是流行和簡化，在正確的情況下使用通配符。

參考文獻：

http://getbootstrap.com/css/
古斯塔夫森，2015年A.自適應網頁設計：打造了豐富的經驗與逐步增強。伯克利，（加利福尼亞州）：新騎士。

來源

2016-03-11 12:03:41

通用選擇器的性能影響是什麼？

回答

相關問題