记一次网页性能问题定位

由于某个页面实在加载的太慢了，因此就想好好的定位下慢的缘由。

这里我使用了 Chrome DevTools 的 Performane 面板来进行网页性能分析，它能够记录和分析应用在运行时的全部活动，是发现应用中可觉察性能问题的最佳位置。

Command+Shift+N 打开 Chrome 隐身浏览器，隐身浏览器可排除扩展程序对 Performane 分析的干扰。Command+Opiton+I 打开控制台，切换到 Performance 选项卡。

如何记录？

• 按 开始记录，操做完或页面加载完后按暂停中止记录。
• 按 从新载入页面并记录，会在载入完成后自动中止记录。

中止记录后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里的大头，也是优化的重点。

经过上面的分析，能获得两个优化点：
一、压缩图片资源，减小请求时间
二、优化G2图表渲染代码，减小js执行时间

如何使用 Timeline 工具
Chrome Devtool Performance使用指南