首頁 > 開發者 > JavaScript
漫談CSS的渲染效率，漫談CSS渲染效率
總結了部分所學、所聽、所看、所問的一些CSS寫作經驗，書寫高效的CSS - 漫談CSS的渲染效率，它們與渲染效率及所佔用消耗的資源有一定的關 聯。部分為自己理解所寫，不排除會有錯漏，歡迎提供更好的意見。
1、十六進位的顏色值對位元與大小寫
編寫十六進位顏色值時你可能會用小寫字母或省略成3位元，關於這寫法沒找到確實的資料證明對瀏覽器的渲染效率是否有影響，但十六進位的顏色值預設標準是 大寫及6位元標註。在未知情況下不希望冒險而降低了渲染的效率。
* 不贊成 - color:#f3a;
* 建議 用 - color:#FF33AA;
2、display與visibility的差異
他們用於設定或檢索是否顯示對象。display隱藏對象不保留物理空間，visibility為隱藏對象保留佔據的物理空間。當瀏覽器渲染被佔據的物 理空間時，會有所消耗資源。
* 不贊成 - visibility:hidden;
* 建議用 - display:none;
3、 border:none;與border:0;的區別
和display與visibility的關係類似，分別不 保留與保留空間。更多的是border:0;儘管可以隱藏掉邊框，但它會為你保留border-color/border-style的使用權。
* 不贊成 - border:0;
* 建議用 - border:none;
4、不宜過小的背景圖片平 鋪
一張寬高1px的背景圖片，雖然檔案體積非常之小，但渲染寬高500px的板塊需要重複平鋪2500次。提高背 景圖片渲染效率跟圖片尺寸及體積有關，最大的圖片檔案體積保持約70KB。
* 不贊成 - 寬高8px以下的平鋪背景圖片
* 建 議用 - 衡量適中體積及尺寸的背景圖片
5、IE的濾鏡
IE的濾鏡除了比較消耗 資源外也有相容性問題。當中有令PNG透明的濾鏡，可採用GIF或JPG似透非透的辦法來避免使用此濾鏡。建議只在IE6應用GIF透明，因為IE7以上 已經支援了PNG透明。
* 不贊成，濫用IE濾鏡因為消耗資源外也有相容性問題。
* 建議用，最好選擇其它方法能避免使用濾鏡。
6、* { margin:0; padding:0;}避免瀏覽器樣式差異
*號萬用字元把所有標籤都初始化一遍，瀏覽器的 渲染消耗一定的資源。有部分在標籤在不同瀏覽器上幾乎無差異，或是某些已經不推薦使用的標籤(因為你不會去用它)，它們不需萬用字元要重新初始化一遍這樣做 能節省一點資源。
* 不贊成，使用*號萬用字元
* 不贊成，div span button b table等標籤納入萬用字元控制 內外填充樣式
* 建議用，有選擇性地使用萬用字元控制內外填充樣式。
7、不要添加額外的標籤來描述class 或id
如果你有一個選取器是以id作為關鍵選擇符，請不要添加多餘標籤名上去。因為ID是唯一的，你不要為了一個 不存在的理由而降低了匹配的效率。
* 不贊成 - button#backButton { }
* 不贊成 - .menu- left #newMenuIcon { }
* 建議用 - #backButton { }
* 建議 用 - #newMenuIcon { }
8、盡量選擇最特殊的類來存放選取器
降低系統效率的一個最大原因是我們在標籤類中用了過多的選擇符。通過添加 class 到元素，我們可以將類別進行再細分為 class 類，這樣就不用 為了一個標籤浪費時間去匹配過多的選擇符了。
* 不贊成 - treeitem[mailfolder="true"] & gt; treerow > treecell { }
* 建議用 - .treecell-mailfolder { }
9、 避免子孫選擇符
子孫選擇符是CSS中最耗資源的選擇符。他真的是非常的耗資源，尤其是在選取器使用標籤類或通用類 的時候。很多情況中，我們真正想要的是子選擇符。除非有明確說明，在 UI CSS 中是嚴禁使用子孫選擇符的。
* 不贊 成 - treehead treerow treecell { }
* 好一點，但還是不行(參照下一 條) - treehead > treerow > treecell { }
10、標籤類中不要包含子 選擇符
不要在標籤類中使用子選擇符。否則，每次元素的出現，都會額外地增加匹配時間。（特別是當選取器似乎多半會 被匹配的情況下）
* 不贊成 - treehead > treerow > treecell { }
* 建議 用 - .treecell-header { }
11、留意所有子選擇符的使用
小心地使用子選擇符。如果你能想出一個的不使用他的方法，那麼就不要使用。特別是在 RDF 樹和菜單會頻繁地使用子選擇符，像這樣。
* 不贊成 - treeitem[IsImapServer="true"] > treerow > .tree- folderpane-icon { }
請記住 RDF 的屬性是可以在模板中被複製的！利用這一點，我們可以複製那些想基於該屬性 改變的子 XUL 元素上的 RDF 屬性。
* 建議用 - .tree-folderpane- icon[IsImapServer="true"] { }
·margin-left:0 or margin-left:0px ?減掉px使瀏覽器渲染效率有什麼影響？
0佔一個位元組 0px佔3個位元組. 他們的效果和意思一樣 大小不一樣.為了讓你的頁面速度更快 你何樂而不為呢?
·#FFFFFF or #FFF ? 現在簡寫對瀏覽器渲染效率影響據說還不明了。
本人有多年開發經驗,也和外國朋友一起做開發. 你用#FFF代替#FFFFFF並沒有什麼影響.相反和上面一樣``少了3個位元組!
·font-size:400 or normal ? 是一個意思沒錯，但是仍舊是效率問題的影響。
這個好像沒怎麼聽說過```你喜歡那個就用那個吧!
·怎樣算是正確科學的寫頁面代碼？
這個問題你自己找本書看看就行了```
IE的CSS渲染跟其它瀏覽器有什不同
在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個網站的外觀。每個頁面使用 <link> 標籤連結到樣式表。<link> 標籤在（文檔的）頭部： <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 內部樣式（Internal Style Sheet）當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文檔頭部定義內部樣式表，就像這樣： <head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> 內聯樣式（Inline Styles）由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。 <p style="color: sienna; margin-left: 20px">This is a paragraph</p> 多重樣式（Multiple Styles）如果外部樣式、內部樣式和內聯樣式同時應用於同一個元素，就是使多重樣式的情況，一般情況下優先順序如下：（外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline style之所以說是一般情況是因為可以使用!important來改變這種順序，比如外部樣式如果某個樣式項使用了!important來提高優先順序，其優先順序將比內聯樣式高。還有個例外的情況就是如果外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式： <head> <!--內部樣式--> <style> h3{color:green;} </style> <!--外部樣式style.css--> <!--h3{color:blue;}--> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h3>測試！</h3> </body> 文字的顏色將是藍色，因為外部樣式的藍色覆蓋了內部樣式的綠色，這在主流瀏覽器中表現都是一致的，包括IE在內。然而另外一種方式插入樣式，IE就表現出它的另類了。這種方法是使用指令碼在外部樣式前插入內部樣式，即上面的內部樣式用指令碼建立出來，代碼如下： (function(){ var agent = window.navigator.use......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
