您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 交互设计 >> 浏览设计教程

善用Chrome! 通过Timeline提升网站执行效率

Chrome浏览器的Timeline面板详细的记录网站加载的情况,可以帮助我们提升网站执行效率。

四种记录类型

加载事件 脚本事件 渲染事件 绘制事件

Timeline中的事件

1、Loading事件

事件描述
Parse HTML浏览器执行HTML解析
Finish Loading网络请求完毕事件
Receive Data请求的响应数据到达事件,如果响应数据很大(拆包),可能会多次触发该事件
Receive Response响应头报文到达时触发
Send Request发送网络请求时触发

2、Scripting事件

事件描述
Animation Frame Fired一个定义好的动画帧发生并开始回调处理时触发
Cancel Animation Frame取消一个动画帧时触发
GC Event垃圾回收时触发
DOMContentLoaded当页面中的DOM内容加载并解析完毕时触发
Evaluate ScriptA script was evaluated.
Eventjs事件类型
Function Call只有当浏览器进入到js引擎中时触发
Install Timer创建计时器(调用setTimeout()和setInterval())时触发
Request Animation FrameA requestAnimationFrame() call scheduled a new frame
Remove Timer当清除一个计时器时触发
Time调用console.time()触发
Time End调用console.timeEnd()触发
Timer Fired定时器激活回调后触发
XHR Ready State Change当一个异步请求为就绪状态后触发
XHR Load当一个异步请求完成加载后触发

3、Rendering事件

事件描述
Invalidate layout当DOM更改导致页面布局失效时触发
Layout页面布局计算执行时触发
Recalculate styleChrome重新计算元素样式时触发
Scroll内嵌的视窗滚动时触发

4、Painting事件

事件描述
Composite LayersChrome的渲染引擎完成图片层合并时触发
Image Decode一个图片资源完成解码后触发
Image Resize一个图片被修改尺寸后触发
Paint合并后的层被绘制到对应显示区域后触发


[教程作者:Hiheng]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/Tutorial/id3172.html
从无到有!产品设计输出全记录
交互设计师如何短时间内做出像样的视觉作品?
图趣网微信
建议反馈