善用Chrome！通過(guò)Timeline提升網(wǎng)站執(zhí)行效率

2016/1/15 13:42:27來(lái)源：互聯(lián)網(wǎng)

Chrome瀏覽器的Timeline面板詳細(xì)的記錄網(wǎng)站加載的情況，可以幫助我們提升網(wǎng)站執(zhí)行效率。

四種記錄類(lèi)型

加載事件腳本事件渲染事件繪制事件

Timeline中的事件

1、Loading事件

事件	描述
Parse HTML	瀏覽器執(zhí)行HTML解析
Finish Loading	網(wǎng)絡(luò)請(qǐng)求完畢事件
Receive Data	請(qǐng)求的響應(yīng)數(shù)據(jù)到達(dá)事件，如果響應(yīng)數(shù)據(jù)很大（拆包），可能會(huì)多次觸發(fā)該事件
Receive Response	響應(yīng)頭報(bào)文到達(dá)時(shí)觸發(fā)
Send Request	發(fā)送網(wǎng)絡(luò)請(qǐng)求時(shí)觸發(fā)

2、Scripting事件

事件	描述
Animation Frame Fired	一個(gè)定義好的動(dòng)畫(huà)幀發(fā)生并開(kāi)始回調(diào)處理時(shí)觸發(fā)
Cancel Animation Frame	取消一個(gè)動(dòng)畫(huà)幀時(shí)觸發(fā)
GC Event	垃圾回收時(shí)觸發(fā)
DOMContentLoaded	當(dāng)頁(yè)面中的DOM內(nèi)容加載并解析完畢時(shí)觸發(fā)
Evaluate Script	A script was evaluated.
Event	js事件類(lèi)型
Function Call	只有當(dāng)瀏覽器進(jìn)入到j(luò)s引擎中時(shí)觸發(fā)
Install Timer	創(chuàng)建計(jì)時(shí)器（調(diào)用setTimeout()和setInterval()）時(shí)觸發(fā)
Request Animation Frame	A requestAnimationFrame() call scheduled a new frame
Remove Timer	當(dāng)清除一個(gè)計(jì)時(shí)器時(shí)觸發(fā)
Time	調(diào)用console.time()觸發(fā)
Time End	調(diào)用console.timeEnd()觸發(fā)
Timer Fired	定時(shí)器激活回調(diào)后觸發(fā)
XHR Ready State Change	當(dāng)一個(gè)異步請(qǐng)求為就緒狀態(tài)后觸發(fā)
XHR Load	當(dāng)一個(gè)異步請(qǐng)求完成加載后觸發(fā)

3、Rendering事件

事件	描述
Invalidate layout	當(dāng)DOM更改導(dǎo)致頁(yè)面布局失效時(shí)觸發(fā)
Layout	頁(yè)面布局計(jì)算執(zhí)行時(shí)觸發(fā)
Recalculate style	Chrome重新計(jì)算元素樣式時(shí)觸發(fā)
Scroll	內(nèi)嵌的視窗滾動(dòng)時(shí)觸發(fā)

4、Painting事件

事件	描述
Composite Layers	Chrome的渲染引擎完成圖片層合并時(shí)觸發(fā)
Image Decode	一個(gè)圖片資源完成解碼后觸發(fā)
Image Resize	一個(gè)圖片被修改尺寸后觸發(fā)
Paint	合并后的層被繪制到對(duì)應(yīng)顯示區(qū)域后觸發(fā)

[教程作者：Hiheng]

免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://pkvc.cn/tutorial/id3172.html

您可能還喜歡

這些是最新的

最熱門(mén)的教程