偶然翻出以前上學時收藏的學習視訊，順手記錄下一些目前覺得還不錯的點，也歡迎補充討論。
瀏覽器優化規則
規則1 CSS放在HEAD中載入
- 能讓頁面更早的開始渲染，避免閃屏
- 最好能包含關鍵渲染路徑的樣式，首屏
規則2 建議把JS放在BODY末尾加載
- 因為JS阻塞HTML解析和CSS渲染
規則3 不要使用CSS表示式
- 實際效能開銷很大，可能導致頁面卡頓
規則4 用外鏈方式引用CSS和JS
- 有效減少HTML體積
- 可合理利用瀏覽器快取
規則5 壓縮JS和CSS
- 生產環境刪除不必要的註釋、空白
- JS變數名壓縮、混淆壓縮
規則6 不重複載入JS
- 在IE中還是會多個請求，不能發揮快取優勢
- 意味著更長的執行時間
規則7 讓Ajax請求可快取
- GZIP、內容壓縮都可適用
規則8 用GET方式發起AJAX請求
- GET方式可以快取
- 如果是獲取資訊，GET更語義化
規則9 元件延遲載入
- 保障關鍵頁面資源有限載入：因為併發數限制
- 延遲載入的手段 lazyload
規則10 減少dom節點數
- 更多的節點數會使瀏覽器佈局、渲染時計算量更大
規則11 避免使用iframe
- 會阻塞父文件的onload
- 空白文件也比較耗時
規則12 減少cookie體積
- 每次請求都會全部帶上
規則13 使用無cookie域名載入靜態資源
- 減少靜態資源載入時的網路傳輸量
- 靜態資源載入通常不需要cookie
- 節省流量費
規則14 減少JS中的dom訪問
- 對於查詢到的元素，快取在變數中
- 節點增加時合理利用 DocumentFragment
- 不要用JS去頻繁修改樣式
規則15 使用智慧事件的監聽機制
- 基於事件冒泡的委託機制，有效減少繫結的數量
規則16 使用常見的圖片優化手段
- 對比程式碼，圖片體積很大
- 漸進式編碼JPG
規則17 不要在HTML縮放圖片
規則18 不要把圖片SRC置空
規則19 任何資源儘量在25K以內
伺服器優化規則
規則1 減少網路請求
- 合併請求 JS、CSS
- 使用雪碧圖 CSS Sprite
- 使用地圖 HTML Map
- 內聯小圖片 base64
規則2 使用內容分發網路CDN
- 地理上離使用者更近
- 專業的公司提供服務
規則3 適當使用快取
- 為靜態資源新增Expires響應頭
- 為靜態資源新增Cache-control響應頭
- 配置Apache、Nginx、Express
規則4 啟用GZIP壓縮
- 大幅度減少網路傳輸體積
- 多種檔案型別 HTML、JS、CSS、IMAGE
規則5 減少DNS查詢
- 單站點不要使用太多域名
- 單次DNS查詢約消耗20~120ms
規則6 避免重定向3XX
- 重定向以為重頭再來
- 每次至少多花費50ms
規則7 配置有效的ETAG
- 跟瀏覽器說明過期規則
規則8 讓Ajax請求可快取
- GZIP、內容壓縮都可適用
規則9 儘快輸出第1個位元組
- 儘快輸出頁面頭部
- 並行下載外鏈的CSS
- BigPipe
規則10 使用無cookie域名載入靜態資源
- 減少靜態資源載入時的網路傳輸量
- 靜態資源載入通常不需要cookie
- 節省流量費