網頁內容
- 減少 http 請求次數；
- 減少 DNS 查詢次數；
- 減少 iframe 數量；
- 減少 DOM 元素數量；
- 延遲載入；
- 提前載入；
- 滾動載入；
- 根據域名劃分內容；
- 避免頁面跳轉；
- 快取 Ajax;
圖片
- css sprites，即雪碧圖，將多個圖示檔案整合到一張圖片中（修改更新少的常駐型低色位的裝飾小圖）；
- base64，體積小複用率低的背景裝飾圖示；
- iconfont，純色圖示，上傳圖示 svg 生成對應字型檔案, 比如阿里巴巴向量圖示庫 ；
- 非純色圖通常用【2X】圖適配，可用：媒體查詢、srcset屬性、image-set屬性、指令碼控制；
- 選擇正確的圖片格式，能使用 WebP 格式優先考慮，小圖使用 png，如果可以使用 svg 代替，圖片使用 jpg;
css
- 將樣式表置頂；
- 避免 css 表示式；
- 用 link 代替 @import;
- 避免使用 Filters
- 建議使用類選擇器，訪問比較快；
- 不建議使用很長的base64；
javascript
- 將指令碼置底，防止阻塞以減少對併發下載的影響，儘早重新整理文件的輸出；
- 使用外部 javascript 檔案;
- 精簡 javascript;
- 去除重複指令碼；
- 減少DOM訪問，儘量快取DOM；
- 使用智慧事件處理；
- 避免使用eval和width；
- 充分利用事件委託；
- 減少 Repaint（重繪）和 Reflow（重排）最好通過批量更新元素減少重排次數，如設定類class統一更新樣式，在新增多個 li；
- 元素將會觸發多次頁面重排的情況下使用 DOM fargment 在記憶體中建立完整的 DOM 節點，然後再一次性新增到 DOM 中；
cookie
- 減少 Cookie 大小；
- 頁面內容使用無 cookie 域名；
伺服器
- 使用 CDN（內容分發網路）；
- 新增 Expires 或 Cache-control 報文頭；
- GZip 壓縮傳輸檔案；
- 配置 ETags;
- 避免空的圖片 src;
webpack
主要從減少 Webpack 的打包時間和讓 Webpack 打出來的包更小入手。
- 優化 Loader 的檔案搜尋範圍，從
include和exclude配置入手，配合檔案快取loader: 'babel-loader?cacheDirectory=true'； - HappyPack，將 Loader 的同步執行轉換為並行的，充分利用系統資源來加快打包效率；
- DllPlugin，將特定的類庫提前打包然後引入；
- 程式碼壓縮，一般使用
UglifyJS來壓縮程式碼，不過這是單執行緒的，可使用webpack-parallel-uglify-plugin來並行執行UglifyJS，從而提高效率; - 按需載入，一個專案難免會存在幾十個頁面的路由，如果所有頁面的都打包進一個 js 檔案（檔案就會過大），載入第一個頁面就會耗費很長時間。實現按需載入，每個頁面（路由）打包成一個檔案。另外，對於一些庫檔案也可以打包成一個檔案。
- Scope Hoisting，範圍提升，會分析出模組之間的依賴關係，儘可能的把打包出來的模組合併到一個函式中去；
- Tree Shaking，（樹抖動，將一些要掉落的葉子或小樹杈抖落）刪除專案中未被引用的程式碼；
React
文末
