效能優化------瀏覽器端
阿新 • • 發佈：2018-12-28
| 瀏覽器效能優化更重要 | |
| Time Retrieving HTML 10%-20%----花在下載主文件的時間 | |
| Time Elsewhere 80%左右---花在引用資源的時間 | |
| 19條優化規則： | |
| 規則1：把CSS放在HEAD中載入 | |
| 能讓頁面更早的開始渲染，避免閃屏 | |
| 最好能包含關鍵渲染路徑的樣式：首屏（第一屏的樣式一定放在head裡面） | |
| 規則2：把js放在body末尾載入 | |
| 因為js阻塞HTML解析和css渲染 | |
| 規則3：不使用CSS表示式 | |
| 看似強大，實際效能開銷很大，可能導致頁面卡頓 | |
| 規則4：用外鏈方式引用Css和js | |
| 有效減少HTML的體積 （這樣CSS和js作為靜態資源可以在瀏覽器設定快取響應頭） | |
| 可合理利用瀏覽器快取（css js作為靜態資源快取在瀏覽器端，這樣不用再次請求伺服器） | |
| 規則5壓縮JS和CSS | |
| 生產環境刪除不必要的註釋、空白 | |
| JS中變數名壓縮，混淆壓縮（對css進行屬性合併如background：，選擇符的合併） | |
| 規則6：不重複載入Js | |
| 在IE中還是會多個請求，不能發揮快取優勢 | |
| 意味著更長的JS執行時間 | |
| 規則7：讓Ajax請求可快取（屬於服務端優化） | |
| Gzip、內容壓縮都可適用 | |
| 規則8：用GET 方式發起Ajax請求 | |
| get方式可以快取 | |
| 如果是獲取資訊，get更語義化 | |
| 規則9：元件延遲載入 | |
| 保障關鍵頁面資源優先載入：因為併發數限制 | |
| 延遲載入的典型手段：lazyload（懶載入或按需載入），首屏之後的DOM上使用 | |
| 規則10：減少DOM節點數 | |
| 天貓：更多節點數意味瀏覽器佈局、 渲染時計算量更大 | |
| 規則11：避免使用iframe | |
| 會阻塞父文件的onload | |
| 即時是空白也比較耗時 | |
| 規則12：減少COOKIE體積 | |
| 因為COOKIE每次請求都會全部帶上（主文件 jss css 圖片等非同步請求等同域資源） | |
| 規則13：使用無COOKIE域名載入靜態資源（伺服器端） | |
| 減少靜態資源載入時的網路傳輸量 | |
| 靜態資源載入通常是不需要COOKIE的 | |
| 阿里：精簡COOKIE後，每年節省的流量TB記 | |
| 規則14：減少js中DOM訪問 | |
| 對於查詢到的元素，快取在變數中 | |
| 節點增加是合理利用DomentFragment | |
| 不要用js去頻繁修改樣式 | |
| 規則15：使用更智慧的事件監聽機制 | |
| 基於事件冒泡的委託機制，有效減少繫結的數量 | |
| 規則16：使用常見的圖片優化手段 | |
| 相比程式碼，圖片體積很大 | |
| 常用的圖片壓縮工具： PNGCrush、 JPEGTRAN、PNGQUANT | |
| 漸進式編碼：JPG | |
| 規則17：不要在HTML中縮放圖片 | |
| 徒增渲染開銷，提供適當尺寸即可（放10*10圖片就避免50*50的避免開銷） | |
| 規則18：不要把圖片SRC置空 | |
| IE、Chrome、FireFox會發起額外的主文件請求 | |
| 規則19：任何資源儘量在25k以內 | |
| ipone無法快取25k以上的資源 |