前端面試13：前端性能優化的關鍵時間點

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~

思惟導圖

Q：前端性能優化的關鍵時間點有哪些，分別是什麼？

1. 開始渲染時間：瀏覽器開始繪製頁面，在此以前頁面都是白屏，因此也稱爲白屏時間。
2. DOM Ready：dom解析已經完成，資源尚未加載完成, 這個時候用戶與頁面的交互已經可用了
3. 首屏時間：用戶看到第一屏頁面的時間
4. onload：原始文檔和全部引用的內容已經加載完成，用戶最明顯的感受就是瀏覽器上loading狀態結束。

Q：開始渲染時間如何獲取？如何優化？

獲取方式：

1. Chrome可經過chrome.loadTimes().firstPaintTime獲取
2. IE9+能夠經過performance.timing.msFirstPaint獲取
3. 在不支持的瀏覽器中能夠根據上面公式經過獲取頭部資源加載完的時刻模擬獲取近似值

優化建議：

1. 優化服務器響應時間，服務器端儘早輸出
2. 減小html文件大小
3. 減小頭部資源,腳本儘可能放在body 中

Q：DOM Ready時間如何獲取？如何優化？

獲取方式：

1. 高級瀏覽器經過DOMContentLoaded事件獲取。
2. 低版本webkit內核瀏覽器能夠經過輪詢document.readyState來實現
3. ie中可經過setTimeout不斷調用documentElement的doScroll方法，直到其可用來實現 (能夠參考jQuery的實現)

優化建議：

1. 減小dom結構的複雜度，節點儘量少，嵌套不要太深
2. 優化關鍵呈現路徑

Q：首屏時間如何獲取？如何優化？

獲取方式： 這個時間點很重要可是很難獲取，通常都只能經過模擬獲取一個近似時間。

1. 不斷獲取屏幕截圖，當截圖再也不變化時，能夠視爲首屏時間。
2. 通常影響首屏的主要因素是圖片的加載，經過頁面加載完後判斷圖片是否在首屏內，找出加載最慢的一張便可視爲首屏時間。

優化建議：

1. 頁面首屏的顯示儘可能不要依賴於js代碼，js儘可能放到domReady後執行或加載
2. 首屏外的圖片延遲加載
3. 首屏結構儘可能簡單，首屏外的css可延遲加載

Q：onload時間如何獲取？如何優化？

獲取方式： 該時間點是window.onload事件觸發的時間

優化建議：

1. 減小資源的請求數和文件大小
2. 將非初始化腳本放到onLoad以後執行
3. 無需同步的腳本異步加載