減少請(qǐng)求數(shù)
- 圖片合并
- CSS 文件合并
- 減少內(nèi)聯(lián)樣式
- 避免在 CSS 中使用 import
減少文件大小
- 選擇適合的圖片格式
- 圖片壓縮
- CSS 值縮寫（Shorthand Property)
- 文件壓縮
頁(yè)面性能
- 調(diào)整文件加載順序
- 減少標(biāo)簽數(shù)量
- 調(diào)整選擇器長(zhǎng)度
- 盡量使用 CSS 制作顯示表現(xiàn)
增強(qiáng)代碼可讀性與可維護(hù)性
- 規(guī)范化
- 語(yǔ)義化
- 模塊化

減少請(qǐng)求

請(qǐng)求數(shù)與網(wǎng)頁(yè)加載時(shí)長(zhǎng)有直接的關(guān)系。所以對(duì)于圖標(biāo)可以使用 Sprite 來(lái)減少小圖標(biāo)的請(qǐng)求數(shù)，對(duì)于文本則可以通過(guò)合并縮小。（避免使用 import 引入 CSS 文件，并且請(qǐng)求是同步請(qǐng)求）

減少文件大小

頁(yè)面上最大的流量產(chǎn)生與多媒體（視頻或圖片）所以為了減少文件大小，開發(fā)者需要使用合適的媒體格式并對(duì)文件進(jìn)行壓縮。

頁(yè)面性能

頁(yè)面文件的加載順序自上而下，樣式則需要放置于最頂部，腳本則放置于底部（因?yàn)?JavaScript 的加載會(huì)阻塞頁(yè)面的繪制）。

減少標(biāo)簽的數(shù)量也可以起到提升性能的作用，縮短 CSS 選擇器的層級(jí)來(lái)提高性能。減少使用消耗性能的樣式屬性例如下面的這些：

expression .class{width: expression(this.width > 100?'100px':'auto')}
filter .class{filter:alpha(opacity=50)}
border-radius
box-shadow
gradients

頁(yè)面中所使用的圖片尺子應(yīng)該與現(xiàn)實(shí)尺寸相符否則在圖標(biāo)下載后需要重繪導(dǎo)致性能下降。

能使用樣式（使用 CSS 的類名）實(shí)現(xiàn)的交互就不使用腳本（需要重繪導(dǎo)致多次頁(yè)面渲染）來(lái)實(shí)現(xiàn)。

可讀性與可維護(hù)性

開發(fā)之前需要明確規(guī)范，尤其是對(duì)人協(xié)作時(shí)。使用 HTML5 語(yǔ)義化的標(biāo)簽來(lái)制作頁(yè)面，同樣也適用于樣式選擇器的 ID 與類名。在使用開發(fā)中的奇技淫巧的適合需要深思是否需要使用。模塊化的制作頁(yè)面和樣式，提高可復(fù)用性并減少文件大小。

注釋注釋注釋，在代碼中添加注釋，利人利己。

上一篇：內(nèi)置對(duì)象下一篇：DOM 事件