初识|初识 TimeLine
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 【初识|初识 TimeLine】如上图，勾选了Paint Flashing 之后返回页面，再用鼠标去划过页面，高亮显示的地方，就是页面需要重绘的地方
推荐阅读
- (六)Component初识组件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- 初识html标签
- 《临水照花·尘绾颂》
- 我家的石斛兰
- 吻醒清晨，点亮世界的彩虹花
- 联盟链初识以及Fabric环境搭建流程
- 初识云计算
- 初识分库分表
- CSS基础----初识