Tools 工具

1. 效能分析– 在指令碼執行期定時執行不同函式和操作，找出需要優化的部分
2. 網路分析– 檢查圖片，樣式表，和指令碼的載入過程，彙報它們對整個頁面載入和渲染的影響

網路皮膚

每個資源後面的彩條將載入過程分解為元件階段（DNS 察看，等待響應，等等）。第一條垂直線（顯 示為藍色）指出頁面的 DOMContentLoaded 事件發出的時間。此事件表明頁面的 DOM 樹已經解析並準備 好了。第二條垂直線（紅色）指出 window 的 load 事件發出的時間，它表示 DOM 已準備好並且所有外部 資源已完成載入。這樣就給出了一個場景，關於解析和執行以及頁面渲染所花費的時間。
正如你在圖中看到的，下載了很多指令碼。在時間線上，每個指令碼看上去要等待前面的指令碼首先啟動下一
個請求。提高載入效能的簡單的優化辦法是減少請求數量，特別是指令碼和樣式表請求，它們會阻塞其它
資源和頁面渲染。如果可能的話，將所有指令碼合併為一個檔案，以減少總的請求數量。這種方法對樣式表
和圖片同樣有用。