美文网首页
初识 TimeLine

初识 TimeLine

作者: 思了个麦 | 来源:发表于2016-09-30 14:11 被阅读0次

    Chorme Timeline

    Overview

    Chorme版本53.0.2785.116 (64-bit)

    overview

    FPS

    记录FPS变化信息,通常设备的屏幕的刷新频率是60FPS。当FPS过大时,会显示红色的长条,代表有个长帧。

    刷新频率

    CPU

    浏览器内核的运行情况。蓝色表示对html操作所占的内存,黄色的表示对js的操作所占内存,紫色表示对css操作所占的内存,灰色表示其他操作所占的内存

    CPU

    NET

    网络资源请求信息。蓝色为html文件,黄色为script文件,紫色为css文件,绿色为媒体文件,灰色为其他文件

    网络资源请求信息

    火焰图

    所谓的火焰图,就是JavaScript堆栈调用信息,显示每一个JavaScript函数。从下图可以看出,CPU的内容与火焰图内容相对应,是对CPU内容的详细展示

    火焰图

    网络请求

    如若勾选了network,中间多了一行网络请求数据面板,可通过鼠标悬浮network面板上的条状来查看没个资源的请求情况

    网络请求

    细节展示

    Summary

    当你在火焰图选择一个事件,Summary中显示了关于事件的附加信息。

    Summary

    Bottom-Up

    根据事件耗时长短,反向列出事件列表,有分类可选(通过类型、域、子域、URL分类列出),面板右边也有详细介绍,不过基本和左边相似,就不多介绍了。

    bottom-up

    Call Tree

    可在树形图中查看各项事件的子项信息,及各子项的信息,同样也有分组筛选,规则同上,面板右边同上

    和bottom-up基本相同,不同的是事件调用跟踪信息更详细的列在了树形图上,而同一个事件在bottom-up里的要简化了很多。

    call tree

    点击跳转到js文件,可以看到这个函数执行用了多少时间

    Code

    甚至直接帮你跳转到觉得会影响性能的那行代码

    Code

    Event Log

    明确列出各项事件的详细信息,可以进行关键字筛选,所耗时间筛选,事件类型筛选等,右边是详细信息,可看到函数调用栈的跟踪信息。

    Event Log code

     Layers

    如何让layer面板显示

    1、选择想要的时间区段

    2、点击长帧

    3、layers面板

    Layers

    Paint Profiler

    如何显示Paint Profiler面板

    1、在控制工具面板中启用Paint功能

    2、Layers面板最右侧有Paint Profiler选项

    Paint Profiler

    最左边面板的文字描述,只是给列出了选中区域的绘制事件列表及绘制信息,可点开看详细内容,比如有textsize、left、top等属性

    渲染设置

    如何显示Rendering面板

    1、打开Devtools主菜单

    2、选择More tools > Rendering settings

    3、Rendering settings会紧挨着Console抽屉面板打开

    Rendering

    如上图,勾选了Paint Flashing 之后返回页面,再用鼠标去划过页面,高亮显示的地方,就是页面需要重绘的地方

    相关文章

      网友评论

          本文标题:初识 TimeLine

          本文链接:https://www.haomeiwen.com/subject/nsolyttx.html