X5-工作人员 器粉新人
版主
2017-06-13 16:36:47 

【第五季】TBS开发调试利器——TimeLines

 本帖最后由 X5-工作人员 于 2017-06-13 16:42:58 编辑利用Chrome DevTools中的Timeline面板可以记录并分析网页运行中的所有活动情况,包括页面的加载、解析、布局、绘制,以及JS代码的调用栈记录、CPU、FPS等,这是用来分析并且优化网页性能的强大利器。


一.总览
根据下方途中标记出来的绿色框,将Timeline面板分成了四个部分
1) 控制栏 :点击按钮开启和结束记录,勾选所需要捕获的页面信息,如JS、内存、绘制等。
2) 整体预览 : 在时间纬度上,高度地总结了网页性能。从该区域的最右边的标识可见,主要有三个方面的信息。 i. FPS:Framesper second,绿色的竖条越高,说明FPS越高。 ii. CPU:记录了CPU资源的使用,不同颜色代表不同的资源对CPU的使用情况,* HTML files are blue. * Scripts are yellow. * Stylesheets are purple. * Media files are green. * Miscellaneous resources are grey.
3) Flame框图 : 在这区域的视窗中,可视化地展示了CPU调用栈。在这里面有三条垂直的虚线,分别是:蓝色是DOMContentLoaded事件,绿色是首次绘制,红色表示load事件。
4) 详细信息 : 当在Flame框图中,选择了某一个具体的事件(layout、paint或JS等),则会在详细信息的面板中,显示于此相关的详细信息。


二.开始记录
在想要进行性能分析的页面中,打开Inspector工具中的Timeline面板,点击左上角的第一个按钮开始录制,而第二个按钮结束录制,(ctrl+E 录制,ctrl+R 回看)。比如关注页面加载情况时,则开启录制,刷新页面,待页面加载完毕后结束录制。又或者是关注某一个JS的执行效率时,点击开始记录,然后触发JS后结束记录,然后进行观察分析。为了保证所记录的内容简单有效,有如下建议:
录制尽可能的短。
避免不需要的页面操作。
禁用浏览器缓存,尤其是在分析网络性能时。
禁用chrome插件,插件会引入很多不想关的JS操作或者是CPU占用等,可以通过Ctrl+Shift+N进入隐私模式来避免插件生效。

三.查看录制详情
当在Flame框图中,点击选择了某一个具体的事件,则在Details视窗中,会展示更多与此相关的信息,如下:

其中,Summary标签在所有的事件中都会展示,但是其他的标签只在特定的事件中才有,如图中未有展示到的一个Paint Profiler则是在点击了paint事件后才会显示出来,这个表现会在后续分析页面性能时详细介绍。

四.在录制过程中捕获页面截屏
在勾选了Screenshots后,页面录制的过程中也会存储对应的截屏图,可以在录制结束之后进行观看,将鼠标悬停在图片上方后会有大图展示,而左右滑动鼠标可以观察页面的变换情况。特别适合对于页面动画优化的捕捉和调整。

五.XHR请求断点
在勾选了JS Profile框后,Inspector会记录下页面中的JavaScript调用栈,清晰地展示了网页的各个动态操作的执行。


六.分析绘制情况

在勾选了Paint框后,Inspector会记录网页的绘制情况。当在Flame框图中,点击一个Paint事件,则会在Detail区域中,展示一个Paint Profiler的标签,在这里面,详细地记录了页面绘制每一个控件、文字的流程。

该标签中分上下两部分区域,上半部分是展示了绘制过程的总览,条状越高说明绘制的内容越多;下半部分左边展示了绘制的详情,区域位置、大小,而右边则是显示网页的实时截图。可以在上半部分的总览中,拖动左右两个刻度来进行动态预览:



 本主题由 蛋蛋_MVW0SR 于 2017-06-13 16:48:00 设置高亮
回复

您需要 登录 后才可以回帖