共计 1201 个字符，预计需要花费 4 分钟才能阅读完成。
因为某个页面实在加载的太慢了，所以就想好好的定位下慢的原因。
这里我使用了 Chrome DevTools 的 Performane 面板来进行网页性能分析，它可以记录和分析应用在运行时的所有活动，是发现应用中可觉察性能问题的最佳位置。
Command+Shift+N 打开 Chrome 隐身浏览器，隐身浏览器可排除扩展程序对 Performane 分析的干扰。Command+Opiton+I 打开控制台，切换到 Performance 选项卡。
如何记录？
- 按 record 键开始记录，操作完或页面加载完后按暂停停止记录。
- 按 reload 键重新载入页面并记录，会在载入完成后自动停止记录。
停止记录后 Performance 面板会自动载入分析结果，如下所示：
每个区域的作用：
- FPS（frames per second）: 每秒帧数。这个是用来分析动画的一个主要性能指标。绿色竖线越高，FPS 越高。FPS 图表上的红色块表示长时间帧，长时间帧的位置很可能会出现卡顿。能保持在 60 的 FPS 的话，那么用户体验就是不错的。下面有个 Frame 区域，鼠标划上去可以看到 FPS 的具体数值。
- CPU：CPU 资源。此区域图表指示哪些类型的事件消耗 CPU 资源，不同颜色块表示的含义跟 Summary 是一样的。
- Network：显示了网络请求的顺序及耗时，每一个彩色条代表一个资源请求，彩条越宽，请求的时间越长。
- Main：展示了主线程运行状况。X 轴代表着时间。每个长条代表着一个 event。长条越长就代表这个 event 花费的时间越长。Y 轴代表了调用栈（call stack）。在栈里，上面的 event 调用了下面的 event。
- Summary：每种类型事件的执行时间。
FPS：看 FPS 这里绿条的高度很低，并且出现了红条，Frame 这里的帧数显示红条部分几乎为 0，可以说相当卡顿了。
CPU：脚本执行的时间占了大头，有 10s 之长，这个在后面需要着重分析下。
Network: 所有资源请求都会显示在这里，一开始有两个资源并行请求，点击彩色条，下面会显示详细的资源信息。
这两个灰条，根据资源大小可以在 Network 选项卡下找到对应的请求资源
绿条的请求时间就很长，点击后看到这张图片的大小有 1M，压缩的空间很大。
Main：这里显示捕捉到的 JavaScript 堆栈信息。
可以直接在页面拖拽选择指定时间段，观察这段时间里的详细数据。
切换到 Call Tree 选项卡，也能看到详细的执行步骤及执行时间：
把执行时间比较长的部分展开，右侧有对应的代码执行位置，展开到足够细力度后就容易定位到代码的位置。我这里展开后耗时长的部分都是 G2 里的代码，说明我的 G2 图表渲染时 js 执行的时间是整个 js 里的大头，也是优化的重点。
通过上面的分析，能得到两个优化点：
1、压缩图片资源，减少请求时间
2、优化 G2 图表渲染代码，减少 js 执行时间
如何使用 Timeline 工具
Chrome Devtool Performance 使用指南
