CSS：內聯樣式變慢嗎？

哪個渲染速度更快？CSS：內聯樣式變慢嗎？

// Just HTML 
<div id="holder"> 
    <div style="float:left;">test1</div> 
    <div style="float:left;">test2</div> 
    <div style="float:left;">test3</div> 
</div>

// CSS 
#holder div{ 
    float:left; 
} 

// HTML 
<div id="holder"> 
    <div>test1</div> 
    <div>test2</div> 
    <div>test3</div> 
</div>

來源

2011-03-07 Adam

兩者都會很快。如果你因優化問題，你應該優化別的地方。 – 2011-03-07 18:52:06

我猜測內聯樣式的代碼應該能夠更快地渲染幾微秒...... – 2011-03-07 18:55:12

您可能從內聯樣式中獲得的一小部分時間內會損失很多（很多很多很多次）在你不必在多個地方做出風格變化的時候。不要這樣對你自己。 – bhamby 2011-03-07 19:03:07

在實際顯示內容方面，代碼的兩個部分之間的速度差異可以忽略不計。不同的瀏覽器最有可能有不同的渲染網頁的實現，所以用一個瀏覽器獲得的微小提升速度不一定會反映在另一個瀏覽器中。

現在在加載時間方面，這是一個不同的故事。是的，內聯樣式在技術上比外部樣式表更快，因爲您在頁面頂部減少了一個請求，但使用外部樣式表更受代碼可維護性的青睞。只有當您加載多個樣式表時，性能開始成爲問題，因爲每次您引用新的樣式表時，瀏覽器都必須提交另一個請求。解決方案？簡單地將樣式表拼接成一個。

來源

2011-03-07 19:20:34 Sam

如果我們用內聯樣式談論數百個Kb（或Mb）的HTML，這將是一個不同的故事。 – 2015-03-05 12:52:23

我會想象（由於涉及到的HTTP請求）外部CSS將變得更慢但內嵌樣式是可怕的可維護性和否定CSS整點這是集中顏色和佈局的值，所以你不必遍歷每個元素來改變樣式。

另見this

來源

2011-03-07 18:52:32

@Myles，我想由於多個http流它會更快 – 2011-03-07 18:55:14

@WaqasRaja我不這麼認爲，多個http流只受益於子域/無cookie的域 - 因爲我們不知道什麼圖像等等假設外部更安全的頁面會稍微變慢（儘管可以忽略不計）。我相信整個頁面由瀏覽器渲染（佈局明智，然後CSS應用） – 2011-03-07 18:58:04

@Myles，你注意到爲什麼下載加速器更快。只是因爲多個流 – 2011-03-07 19:01:49

即使你認爲你不希望有便於以後使用外部樣式表，使用樣式標籤在<頭>與要素類將自動納入服務器端編程語言，而不是有幾十個內聯樣式。除非您的樣式數量較少，否則您的總和值也會較低。

退房谷歌的新的404頁：他們甚至有在風格標籤的圖片：

http://www.google.com/123412312

來源

2011-03-07 19:06:13

CSS：內聯樣式變慢嗎？

回答

相關問題