思維導圖
Q：前端效能優化的關鍵時間點有哪些，分別是什麼？
- 開始渲染時間：瀏覽器開始繪製頁面，在此之前頁面都是白屏，所以也稱為白屏時間。
- DOM Ready：dom解析已經完成，資源還沒有載入完成, 這個時候使用者與頁面的互動已經可用了
- 首屏時間：使用者看到第一屏頁面的時間
- onload：原始文件和所有引用的內容已經載入完成，使用者最明顯的感覺就是瀏覽器上loading狀態結束。
Q：開始渲染時間如何獲取？如何優化？
獲取方式：
- Chrome可通過chrome.loadTimes().firstPaintTime獲取
- IE9+可以通過performance.timing.msFirstPaint獲取
- 在不支援的瀏覽器中可以根據上面公式通過獲取頭部資源載入完的時刻模擬獲取近似值
優化建議：
- 優化伺服器響應時間，伺服器端儘早輸出
- 減少html檔案大小
- 減少頭部資源,指令碼儘量放在body 中
Q：DOM Ready時間如何獲取？如何優化？
獲取方式：
- 高階瀏覽器通過DOMContentLoaded事件獲取。
- 低版本webkit核心瀏覽器可以通過輪詢document.readyState來實現
- ie中可通過setTimeout不斷呼叫documentElement的doScroll方法，直到其可用來實現 (可以參考jQuery的實現)
優化建議：
- 減少dom結構的複雜度，節點儘可能少，巢狀不要太深
- 優化關鍵呈現路徑
Q：首屏時間如何獲取？如何優化？
獲取方式： 這個時間點很重要但是很難獲取，一般都只能通過模擬獲取一個近似時間。
- 不斷獲取螢幕截圖，當截圖不再變化時，可以視為首屏時間。
- 一般影響首屏的主要因素是圖片的載入，通過頁面載入完後判斷圖片是否在首屏內，找出載入最慢的一張即可視為首屏時間。
優化建議：
- 頁面首屏的顯示儘量不要依賴於js程式碼，js儘量放到domReady後執行或載入
- 首屏外的圖片延遲載入
- 首屏結構儘量簡單，首屏外的css可延遲載入
Q：onload時間如何獲取？如何優化？
獲取方式： 該時間點是window.onload事件觸發的時間
優化建議：
- 減少資源的請求數和檔案大小
- 將非初始化指令碼放到onLoad之後執行
- 無需同步的指令碼非同步載入