很多人在編寫CSS代碼時(shí)，可能并沒有想到它的渲染速度問題，認(rèn)為只要效果達(dá)到就可以了，代碼怎樣寫都影響不大。之所有有這個(gè)想法，是因?yàn)槲覀冊(cè)陂_發(fā)環(huán)境中，無論硬件還是網(wǎng)絡(luò)速度，都是很好的，這樣就看不到代碼的優(yōu)劣對(duì)速度的影響程度有多大。然而，一旦在某些環(huán)境中，例如手機(jī)信號(hào)突然減弱，從4G變成2G的網(wǎng)絡(luò)，又或者手機(jī)/電腦硬件配置不好時(shí)，這個(gè)時(shí)候設(shè)計(jì)上的每一個(gè)細(xì)節(jié)的影響就會(huì)被放大，優(yōu)劣代碼的運(yùn)行速度就能凸顯出來。因此，一個(gè)優(yōu)秀的程序編寫人員，是不能忽視細(xì)節(jié)的，考慮盡可能周全一些，代碼編寫精益求精。
在這篇文章中，將從5個(gè)方面，介紹加速CSS渲染的技巧。
加速CSS渲染的5個(gè)建議
1、通過指定圖像尺寸避免回流和重繪
為避免不必要的回流和重繪，始終為所有圖像指定寬度和高度，它允許瀏覽器在圖像下載之前渲染頁面，否則瀏覽器將在圖像下載后需要回流和重繪。你可以在 HTML img標(biāo)簽或 CSS 中指定所有圖像的寬度和高度。如果你需要較小的圖像，請(qǐng)?jiān)趫D像編輯器中縮放它并將其尺寸設(shè)置為匹配，避免使用寬度和高度規(guī)范來動(dòng)態(tài)縮放圖像。
.banner {
width: 468px;
height: 60px;
}
2、通用選擇器效率最低，ID 效率最高
以下是根據(jù)渲染速度的選擇器：
#sidebar {} /* ID (Fastest) */
.home #slider {} /* ID */
.footer {} /* Class */
ul li a.arrow {} /* Class */
ul {} /* Tag */
ul li a } /* Tag */
* {} /* Universal (Slowest) */
#content [title='home'] /* Universal */
例如這個(gè)選擇器不是很有效：
#sidebar > li
因?yàn)镮Ds是最有效的，你會(huì)認(rèn)為瀏覽器可以通過 ID 快速找到它，然后找到 li，但它不會(huì)加快渲染速度，因?yàn)闉g覽器從右到左渲染選擇器。
從右到左的原則
了解瀏覽器如何讀取你的 CSS 選擇器非常重要。他們從右到左讀取 CSS，因此 ol > li a[title="link"] 首先解釋的是選擇器 a[title="link"] （它也被稱為“鍵選擇器”）。
選擇器的從右到左解釋一旦匹配失敗，它就會(huì)停止嘗試，因此與繼續(xù)解釋所需的能量相比，它消耗的能量更少。
3、將鏈接元素從文檔正文移動(dòng)到文檔標(biāo)題
始終將外部 CSS 和 style 塊放在該 head 部分。在 HTML 文檔的正文中指定外部樣式表和內(nèi)聯(lián)樣式塊可能需要瀏覽器更多的時(shí)間來呈現(xiàn)文檔。
例如，當(dāng)css代碼量不多時(shí)，就不建議這樣寫。
index.html
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
</body>
</html>
style.css
.title{
height:23px;
padding:7px 10px 0;
color:#fff;
background-attachment: scroll;
background-repeat: repeat-x;
background-position: 0px 0px;
}
而是這樣寫：
<html>
<head>
<style type="text/css">
.title{
height:23px;
padding:7px 10px 0;
color:#fff;
background-attachment: scroll;
background-repeat: repeat-x;
background-position: 0px 0px;
}
</style>
</head>
<body>
</body>
</html>
4、后代選擇器
CSS 中最昂貴的選擇器是后代選擇器。它非常昂貴，特別是如果它屬于標(biāo)簽或通用類別。例如，像這樣的選擇器是一個(gè)非常糟糕的選擇：
html body nav a span {}
利用 CSS 級(jí)聯(lián)
有時(shí)你可以在不使用額外選擇器的情況下實(shí)現(xiàn)你想要的結(jié)果。例如考慮這個(gè)代碼：
nav li a {font-size:14px}
由于 font-size 級(jí)聯(lián)，你不需要特別聲明你的 CSS ，并且它更有效率：
nav {font-size:14px}
過度限定的選擇器
不要這樣做：
form#UserLogin {}
ID選擇器是唯一的；這只會(huì)降低它們的效率，因?yàn)樗鼈儾恍枰獦?biāo)簽名稱。類不是唯一的，但在類上避免這種方法也是一個(gè)好主意。
CSS3 選擇器
CSS3 選擇器（例如:first-child）在幫助我們?cè)O(shè)置元素樣式的同時(shí)保持我們的代碼簡潔和語義方面非常出色。但實(shí)際上這些花哨的選擇器需要更多的瀏覽器資源來使用。關(guān)于這些選擇器的可悲事實(shí)是，如果你關(guān)心頁面性能，則根本不應(yīng)該使用它們。
5、速度與實(shí)用性
為了實(shí)現(xiàn)給定頁面的最有效呈現(xiàn)，人們可能會(huì)簡單地為頁面上的每個(gè)元素提供唯一 ID 并使用單個(gè) ID 選擇器應(yīng)用樣式。它是非常非語義的并且非常難以維護(hù)。即使是基于核心性能的網(wǎng)站也不會(huì)為了高效的 CSS 犧牲可維護(hù)性或語義。
你也可以遵循它們，但你不應(yīng)該對(duì)此抱有教條主義的態(tài)度。重新審視你的 CSS 并尋找可以做得更好的地方，特別是如果你的目標(biāo)受眾主要使用計(jì)算能力有限的移動(dòng)設(shè)備，這可能是一個(gè)救星，否則不要擔(dān)心。
