高性能web指南

前端性能優化的重要性

跟蹤web頁面性能

用戶體驗
只有10-20%用在了下載HTML文檔上，其他80-90%時間花在了下載頁面的全部組件上

HTTP概述

accept-encoding 壓縮
get last-modified
expires keep-alive

減小HTTP請求

• 圖片地圖
• css sprites
• 內聯圖片 data:URL
• 合併腳本和樣式表

使用內容發佈網絡

CDN 節省

添加Expires頭

Cache-Control max-age
修訂文件名

壓縮組件

content-encoding:gzip

將樣式表放在頂部

逐步呈現
白屏 將css放在底部
避免白屏 將css放在頂部
使用link將css放在header中

將腳本放在底部

腳本阻塞下載

避免css表達式

事件處理器

使用外部JS和CSS

組件重用

減小DNS查找

DNS緩存和TTL

精簡JS

精簡css

避免重定向

重定向妨礙顯示

移除重複腳本

避免重複腳本

配置ETag

用仍是不用

使Ajax可緩存

優化Ajax