Timeline & Profiles
Timeline
时间线(timeline)告诉我们代码运行花费的时间，但是并没有帮助我们知道代码运行的时候发生了什么。这个面板可以让你查看浏览器的渲染流程，解析代码,布局，绘制，合并渲染层。
从上到下依次为：
- 1、时间线图
- 屏幕快照
- network
interactions
点击和拖拽1后放大的区域。
内存使用情况
- 图标及日志
减少内存使用与避免锯齿形曲线
浅蓝色的区域代表一个给定时间里，你的应用所使用的内存大小，而白色的区域是已经分配的内存总量。通过几个周期的垃圾回收，理想情况下内存视图的轮廓应该是扁平的。如果在两个GC周期间隔中它持续不断的上升（阶梯函数），那么你可能会发生内存泄漏。
DOM节点计数图显示了保存在内存中的已创建DOM节点的数量（即尚有待垃圾回收的那些节点），而另外两个选项类似的显示了事件侦听与documents/iframe的实例数。要是你只想看特定的计数类型，可以在Details视图取消其它的选择以便将它们隐藏。 我们现在知道了有潜在内存泄漏的可能，但是我们应该定位它们的源头。我们可以使用另外的堆分析仪(Heap Profiler)功能，它就在Profiles面板中。
- 蓝色(Loading)：网络通信和HTML解析
- 黄色(Scripting)：JavaScript执行
- 紫色(Rendering)：样式计算和布局，即重排
- 绿色(Painting)：重绘
- 灰色(other)：其它事件花费的时间
- 白色(Idle)：空闲时间
参考链接
Profiles
Profiles工具主要是用来检测CPU占用程度，堆栈申请的内存。
profiling type共有以下几种类型：
- 1、 Javascript CPU 性能测试：显示JavaScript函数执行占用了多少时间。
- 2、 堆栈快照：显示Javascript对象和相关的DOM节点的内存分配情况。
- 3、 内存分配时间线：堆栈中内存分配情况，使用这种方式可隔离出可能存在的内存泄漏。
- 4、JS内存分配性能测试：显示JavaScript函数的内存分配情况。
调试Canvas元素
- chrome://flags and enable the option marked "Enable Developer Tools experiments"
- Go to the Settings panel of Chrome Developer Tools by clicking the cog on the bottom right. Click the "Experiments" tab and check the option "Canvas inspection".
- Now visit the "Profile" tab and you will see an option called "Capture Canvas Frame".