前端頁面性能優化

開發

• http combo（js、css、ajax）合併資源請求，減小接口請求
• dns perfetch，儘可能減小dns域名數量，並訪問前預解析dns
• 優先首屏渲染，非必須資源延遲加載，包括js、image等
• 使用cdn訪問資源

• css

  • css放 </head> 前
  • css減小表達式、@import、通配符等使用
  • 避免位置、大小等會引發 reflow 的操做

• js

  • js放 </body>  前
  • js減小dom訪問，合理的事件監聽
  • 減小dom層級
  • 邏輯和組件複用，減小代碼
• iconfront 減小請求和請求體積
• bundle 公共代碼（框架、ui庫等）提取，單獨引用，減小變動是須要從新下載的代碼

編譯時

• 混淆和壓縮（css、js、html、image）減小體積
• gzip 壓縮，減小傳輸體積
• commons chunk 提取公共代碼，減小體積
• image sprite 雪碧圖，減小請求
• combine（css、js）合併文件，減小請求
• cdn 域名替換，提高訪問速度

服務端

• gzip 壓縮，提高資源傳輸速度

• cache 緩存文件

  • Cache-Control 緩存機制
  • Expires 過時時間，若是 Cache-Control 設置 max-age 將被忽略
  • Etag 標示符，防止空中碰撞
  • Last-Modified 最後修改時間，比較是否一致
• cdn combo 合併資源請求，減小請求
• ajax combo 服務接口請求合併，減小請求
• 減小 cookie 長度
• 禁止 redirect 重定向
• 防止出現 404 請求
• SSL/https