頁面優(yōu)化

頁面優(yōu)化可以提升頁面的訪問速度從而提高用戶體驗(yàn)，優(yōu)化的頁面可以更好的提升 SEO 的效果同時也可以提高代碼的可讀性和維護(hù)性。

從下面的幾個方面可以進(jìn)行頁面的優(yōu)化：

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

減少請求

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

減少文件大小

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

頁面性能

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

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

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

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

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

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

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

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