CSS的速度

這只是一個問題，可以幫助我更好地理解CSS渲染。CSS的速度

可以說我們有一百萬行。

<div class="first"> 
    <div class="second"> 
     <span class="third">Hello World</span> 
    </div> 
</div>

哪種方法可以將Hello World的字體更改爲紅色？

.third { color: red; } 
div.third { color: red; } 
div.second div.third { color: red; } 
div.first div.second div.third { color: red; }

另外，如果在中間的標籤有一個唯一的ID爲「foo」，該怎麼辦。上面哪個CSS方法是最快的。

我知道爲什麼使用這些方法等，我只是想更好地掌握瀏覽器的渲染技術，我不知道如何進行測試。

更新：好的答案Gumbo。從它的外觀來看，它會在常規站點更快地完成標籤的完整定義。因爲它發現父母並縮小搜索找到的每個父母。

這可能是壞的，因爲儘管你有一個非常大的CSS文件。

來源

2009-02-11 Ólafur Waage

兩件事情要記住：

這將依賴於CSS解析/渲染引擎：即從不同的瀏覽器到瀏覽器。
CSS是真的，真的，真的快無論如何，即使在它的最慢的人觀看應該不會注意到

一般最簡單的事情是最快的（如濃湯很好地說明）但是因爲我們已經處於這樣一個快速的環境中，所以不要認爲你應該犧牲清晰度和適當的範圍（低特異性就像將所有事情公之於衆）。只要避免*只要你能:)

來源

2009-02-11 09:52:40 annakata

你必須瞭解如何選擇正在處理：

.third：得到的每一個元素，並檢查是否有類名third，
div.third：讓每一個DIV元素和檢查一個班級名稱third，
div.second div.third： get every DIV元，檢查類名second，通過這些運行，並找到每一個decendant DIV元素，然後檢查類名third，
div.first div.second div.third：讓每一個DIV元素，檢查類名first，通過這些運行，找到每個掛件DIV元素，檢查類名second，通過這些運行並最終檢查類名third。

編輯我不得不承認，上述過程將是天真的做法，而不是普遍有效的。事實上，也有從底部而不是去到上從上到下實現：

div.first div.second div.third：讓每一個DIV元素，檢查類名third，得到的第一個DIV祖先，有一個類名second，得到類名爲first的第一個DIV祖先。

來源

2009-02-11 09:42:58 Gumbo

甚至有引擎可以通過dom而不是CSS瀏覽 - 此元素是否與此選擇器匹配？沒有？這個怎麼樣？所有的捷徑邏輯也存在。 – annakata 2009-02-11 10:11:05

谷歌的Page Speed有一些非常有用的信息：http://code.google.com/speed/page-speed/docs/rendering.html - 簡而言之，他們表示只使用類和ID，沒有限定標籤，是最快的。 – DisgruntledGoat 2009-07-08 17:18:54

我會說這取決於瀏覽器。沒有什麼比實驗更好的了，在這種情況下，一個簡單的JavaScript可能會做。

更新：我打算做這樣的事情：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>CSS Speed Test</title> 
    <style type="text/css"> 
    .first { color: red; } 
    </style> 
    <script type="text/javascript"> 
    window.onload = function() 
    { 
     var container = document.getElementById("container"); 
     var totalTime = 0; 
     var passes = 100; 
     for (var p=1; p<=passes; p++) 
     { 
      var startTime = new Date(); 
      for (var i=0; i<1000; i++) 
      { 
       var outerDiv = document.createElement("div"); 
       var innerDiv = document.createElement("div"); 
       var span = document.createElement("span"); 
       outerDiv.className = "first"; 
       innerDiv.className = "second"; 
       span.appendChild(document.createTextNode("Hello, world!")); 
       outerDiv.appendChild(innerDiv); 
       innerDiv.appendChild(span); 
       container.appendChild(outerDiv); 
      }      
      var endTime = new Date(); 
      totalTime += (endTime - startTime); 
     }       
     alert("Average time: " + totalTime/passes); 
    } 
    </script> 
</head> 
<body> 
    <div id="container"></div> 
</body> 
</html>

...反而造成不同的選擇的時間差似乎太小來衡量，就像annakata說。

來源

2009-02-11 09:50:08 zoul

哦，當然，我的意思是*時間*使用JavaScript的各種選擇器。 – zoul 2009-02-11 10:31:54

按照Mozilla Developer Center，這種情況下，最有效的選擇是簡單地.third

事實上，他們的狀態存在，明確地說，「沒有資格與標籤類規則名字」。一般來說，爲了獲得最高的效率，請使用最匹配的最簡單的選擇器。這就是爲什麼.third次span.third擊敗.second span.third等

我不能告訴濃湯的結論，就是要，但奧拉維爾似乎是從它繪製的結論是，在選擇使用更多的東西，使CSS解析更有效實際上，它恰恰相反（假設其他CSS解析引擎與Mozilla的工作方式類似）。

來源

2010-05-24 05:22:50

回答

相關問題