善用Chrome！ 通過Timeline提升網(wǎng)站執(zhí)行效率
2016/1/15 13:42:27來源：互聯(lián)網(wǎng)
Chrome瀏覽器的Timeline面板詳細的記錄網(wǎng)站加載的情況，可以幫助我們提升網(wǎng)站執(zhí)行效率。
四種記錄類型
加載事件 腳本事件 渲染事件 繪制事件
Timeline中的事件
1、Loading事件
| 事件 | 描述 |
|---|---|
| Parse HTML | 瀏覽器執(zhí)行HTML解析 |
| Finish Loading | 網(wǎng)絡(luò)請求完畢事件 |
| Receive Data | 請求的響應數(shù)據(jù)到達事件，如果響應數(shù)據(jù)很大（拆包），可能會多次觸發(fā)該事件 |
| Receive Response | 響應頭報文到達時觸發(fā) |
| Send Request | 發(fā)送網(wǎng)絡(luò)請求時觸發(fā) |
2、Scripting事件
| 事件 | 描述 |
|---|---|
| Animation Frame Fired | 一個定義好的動畫幀發(fā)生并開始回調(diào)處理時觸發(fā) |
| Cancel Animation Frame | 取消一個動畫幀時觸發(fā) |
| GC Event | 垃圾回收時觸發(fā) |
| DOMContentLoaded | 當頁面中的DOM內(nèi)容加載并解析完畢時觸發(fā) |
| Evaluate Script | A script was evaluated. |
| Event | js事件類型 |
| Function Call | 只有當瀏覽器進入到j(luò)s引擎中時觸發(fā) |
| Install Timer | 創(chuàng)建計時器（調(diào)用setTimeout()和setInterval()）時觸發(fā) |
| Request Animation Frame | A requestAnimationFrame() call scheduled a new frame |
| Remove Timer | 當清除一個計時器時觸發(fā) |
| Time | 調(diào)用console.time()觸發(fā) |
| Time End | 調(diào)用console.timeEnd()觸發(fā) |
| Timer Fired | 定時器激活回調(diào)后觸發(fā) |
| XHR Ready State Change | 當一個異步請求為就緒狀態(tài)后觸發(fā) |
| XHR Load | 當一個異步請求完成加載后觸發(fā) |
3、Rendering事件
| 事件 | 描述 |
|---|---|
| Invalidate layout | 當DOM更改導致頁面布局失效時觸發(fā) |
| Layout | 頁面布局計算執(zhí)行時觸發(fā) |
| Recalculate style | Chrome重新計算元素樣式時觸發(fā) |
| Scroll | 內(nèi)嵌的視窗滾動時觸發(fā) |
4、Painting事件
| 事件 | 描述 |
|---|---|
| Composite Layers | Chrome的渲染引擎完成圖片層合并時觸發(fā) |
| Image Decode | 一個圖片資源完成解碼后觸發(fā) |
| Image Resize | 一個圖片被修改尺寸后觸發(fā) |
| Paint | 合并后的層被繪制到對應顯示區(qū)域后觸發(fā) |
[教程作者：Hiheng]
免責聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請注明出處，素材資料僅供個人學習與參考，請勿用于商業(yè)用途！
本文地址：http://www.likemindfilms.com/tutorial/id3172.html
本文地址：http://www.likemindfilms.com/tutorial/id3172.html
這些是最新的
最熱門的教程
