Chrome性能调试工具Timeline简介

Timeline可以解决你的程序为什么很缓慢，主要从三个层面来获取分析数据：

简介：Timeline主要处理包括处理DOM事件,页面布局渲染或者向屏幕绘制元素这些应用。

左上角的四个按钮依次：

1、点击原点开始录制，这时我们就开始页面操作，弹出框开始记录，点击finish即可结束；

2、会清除你现有的记录会话，以便开始一个新的会话；

3、将会对显示的详细信息进行过滤，只显示那些完成耗时超过15ms（可选）的记录；

4、将会强迫V8完成一轮的垃圾回收，在调试中它很有用；

最下边一层四个可选按钮：

网络和HTML解析(蓝色)，JavaScript(黄色)，样式重计算和布局(紫色)以及绘画和合成(绿色)事件；

3中模式：帧模式、事件模式、内存模式

注意下图capture的四个按钮，Memory点击后，就是内存模式了，所以它是混合在帧模式和事件模式中的，如果想进一步分析内存的话，可以在打开Profiler版面好好研究~

帧模式中最重要的就是右边的参考线，大于30fps时比较流畅，再大于60fps人眼分辨不出，但是小于30fps时就会有明显的卡顿感。然后我们可以点击鼠标在矩形集中的地方，定位问题。

基本用法：1）点击录制->开始页面动画->结束录制；2）通过查看柱状图记录出哪些柱比较高（性能差）；3）点击柱图定位事件记录，结合详情数据找出性能卡顿的原因；

通过事件模式，可以看出哪些操作带了应能损耗；

事件模式是以事件为导向，观察录制间操作的事件经过，方便定位哪个操作占用的事件比较频繁。同时结合内存面板，可以看得出哪个事件消耗的内存最大，有没有合理地进行垃圾回收（GC）。

内存模式，浅蓝色区域，当然越小越好

如果内存出现锯齿状，如下

在你空闲之后，内存似乎从没有真正的降下来，那么说明你创造了太多的垃圾。应该是存在内存泄露

那么选择profiles工具来分析内存的问题

Take Heap Snapshot的选项可以让我们在怀疑点之前和之后获取内存的快照，得到当时程序中活动的Javascript对象（以及DOM节点）在内存中的分布。

要使用这个功能，点击‘Start’，重复你怀疑（出现你发现的那些信息的时刻）会引起内存泄露的动作，这时记录下第一个快照。 接下来点击record按钮 ☻ 来记录第二个快照，这次不需要与程序进行交互

Summary视图适用于DOM泄漏，而Comparison视图擅长于发现内存泄漏的原因

现在你看到的信息是在profile之间创建的对象。信息的差集可以让你对比垃圾收集所删除的内存是否匹配上对象的创建所花费的内存。点击特定的构造函数可以在面板下面的对象的retaining tree视图看到更多信息。

一个典型的应用场景是试图发现一个你已经删除或者断开关联的一个DOM节点是否任然存在。一旦你发现了造成内存占用的代码，你就可以添加必要的代码来清除那么你不需要的相关对象。

使用DevTools中的堆分析仪时

后面两列的标题Shallow和Reetained Size是什么意思？

Shallow Size：直接占用内存(不包括引用的对象占用的内存)，对象本身占用的内存；字符串和数组常常会在渲染器内存中存储主要数据部分，仅仅在JavaScript对象栈中暴露一个很小的包装对象。

渲染器内存指你分析的页面在渲染的过程中所用到的所有内存：页面本身的内存 + 页面中的JS堆用到的内存 + 页面触发的相关工作进程(workers)中的JS堆用到的内存。

Retained Size :包括引用的对象所占用的内存,一个对象一但删除后它引用的依赖对象就不能被GC根(GC root)引用到，它们所占用的内存就会被释放，一个对象占用总内存包括这些依赖对象所占用的内存。

堆是由各种互相关联的对象组成的网状结构。

那么具体要怎么分析呢？各位看官还是移步这里看更专业的文章

https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javascript-memory-profiling.md