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

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

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

四種記錄類型

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

Timeline中的事件

1、Loading事件

事件	描述
Parse HTML	瀏覽器執(zhí)行HTML解析
Finish Loading	網(wǎng)絡(luò)請求完畢事件
Receive Data	請求的響應(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ò)請求時(shí)觸發(fā)

2、Scripting事件

事件	描述
Animation Frame Fired	一個(gè)定義好的動(dòng)畫幀發(fā)生并開始回調(diào)處理時(shí)觸發(fā)
Cancel Animation Frame	取消一個(gè)動(dòng)畫幀時(shí)觸發(fā)
GC Event	垃圾回收時(shí)觸發(fā)
DOMContentLoaded	當(dāng)頁面中的DOM內(nèi)容加載并解析完畢時(shí)觸發(fā)
Evaluate Script	A script was evaluated.
Event	js事件類型
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è)異步請求為就緒狀態(tài)后觸發(fā)
XHR Load	當(dāng)一個(gè)異步請求完成加載后觸發(fā)

3、Rendering事件

事件	描述
Invalidate layout	當(dāng)DOM更改導(dǎo)致頁面布局失效時(shí)觸發(fā)
Layout	頁面布局計(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	合并后的層被繪制到對應(yīng)顯示區(qū)域后觸發(fā)

[教程作者：Hiheng]

關(guān)鍵詞：Chrome Timeline 時(shí)間軸瀏覽器前端

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

上一篇:從無到有！產(chǎn)品設(shè)計(jì)輸出全記錄

下一篇:交互設(shè)計(jì)師如何短時(shí)間內(nèi)做出像樣的視覺作品？

您可能還喜歡

這些是最新的

最熱門的教程

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

您可能還喜歡

網(wǎng)頁教程分類

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