頁面優(yōu)化

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

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

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

減少請求

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

減少文件大小

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

頁面性能

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

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

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

頁面中所使用的圖片尺子應該與現實尺寸相符否則在圖標下載后需要重繪導致性能下降。

能使用樣式（使用 CSS 的類名）實現的交互就不使用腳本（需要重繪導致多次頁面渲染）來實現。

可讀性與可維護性

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

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