系列
Chrome开发者工具教程
Chrome开发者工具页面渲染性能分析
十几年前，可能很多的网页都是静态的HTML页面，在加上少部分的JavaScript代码，关于页面的性能，大家可能更关注的是如何节省网络传输的带宽，让内容可以更快地显示给用户。
而现在，开发者可能更倾向于借助大量的JS代码来生成页面，比如乐码范的整个网站的大部分页面，及每个页面的大部分内容，都是JavaScript生成的，那么这么多的JavaScript，就很有可能由于方法不对、程序bug等原因，导致页面渲染的性能不佳，比如页面刚加载出来时候浏览器会卡顿，页面上做操作的时候也会卡顿，等待，这些会严重影响用户的体验。
针对这个问题，Chrome也提供了如何分析页面渲染性能的工具。
打开页面渲染性能工具
按F12，然后切换到Performance选项卡，就可以看到这个工具初始的界面了：
上图红色框里是我们关心的主要的操作按钮：
1. 第一个实心灰色按钮，可以开启一个性能录制功能。
开启之后，然后可以做任何想做的页面操作来记录这个操作的性能开销。比如刷新页面，点击某个按钮等等。如果是想统计页面刷新的性能开销，则用下面说的刷新按钮。
2. 第二个刷新按钮，则是专门针对页面加载用的。
相比比一个按钮，好处是点击之后，会自动刷新页面，然后页面加载完毕后自动停止记录，这个功能可以让录制页面加载性能更容易。
3. 清除按钮。
把当前的录制结果清除，清除之后，就又看到上面的界面了。
如果您留意的话，会发现左上角还有两个勾选框：“Screenshots”和“Memory”。
- “Screenshots”勾选框：表示会对渲染的每一帧进行截图，用户在渲染的哪一步可以看到什么样的界面。默认情况下，这个勾选框是勾上的。
- “Memory”勾选框：表示会统计内存的消耗。默认情况是关闭的，如果需要可以打开。
分析结果
页面加载是每个用户打开第一个就会遇到的，所以我们拿页面加载来分析一下性能。
我们点上面提到的刷新按钮 ，然后在这个页面会看到这样的结果：
我们看到上面的这个图提供了非常多的信息。左侧是我们的测试的页面，不必多言；右侧，就是Chrome帮我们刷新了页面，然后统计出的各种数据。
整体来看，右侧的图表里面主要包含四块内容。从上到下看依次是：
1. 时间轴及各项指标在不同的时间花费的CPU时间。
这个图上高亮的部分前后各有一个滑块，可以拖拽他们控制下面图表里面显示的数据的时间范围。图中有多种颜色，每种颜色代表的含义，请看第四个图形的介绍。
2. 页面截图。
鼠标放上去可以看到每一帧的截图。从上图中可以看出，页面内容一打开用户就基本上看到所有的内容了，因为页面是在服务器端生成的。但是在1000ms之后，页面上的代码区域进行了重新刷新，直到2000ms的时候，才重新刷新完成。通过这个，我们可以想，也许代码区不再重新刷新会不会更好？
3. 代码调用栈及时间统计。
这个可能是最细节的一个功能了。从图上看，我们可以看出页面加载到完成都有哪些主要的步骤，每步分别花了多少时间，以及每步是由哪些子步骤构成的，以及每个子步骤的时间花费。点击图上的每一块，第四部分也都会展现出更多的信息出来。
这个功能十分强大，我们在用的时候，可以先从花费时间最长的部分开始分析，看问题出在哪个模块，然后再进一步深入到这个模块里面的各个函数调用从而找出问题的原因，从而想办法通过修改代码解决这个问题。分析的时候，可以通过第一个图里面的滑块来控制时间区域的选择，这样可以把图中不明显的地方放大显示，看的更清楚。
- 图示及时间统计。
从图示可以看出：
- Loading （页面加载）花费了79ms，显示蓝色。这个时间主要是花费在网络传输上。如果时间过长，我们要考虑提高网络带宽、降低网络延迟、减少网络传输的数据等优化措施。
- Scripting （脚本解析及执行）花费了1837ms，显示为橙色。这个占用了大部分的时间，如果要优化的话，这个肯定是优化的重点。为什么这个页面Scripting占用了这么多的时间？主要有两个原因：1） 因为乐码范网站用了比较多的JavaScript的库或框架，比如React、Mobx、Slate、CodeMirror、Material UI等大量第三方的库，导致加载并初始化这些第三方的代码就花费了不少的时间。；2）Scripting里也包含页面的渲染，即紫色，如果页面的生成很依赖JS，那么最终花的时间也会比较多。至于如何优化这块儿的性能，并不容易，需要不断的摸索和尝试，有时候甚至需要架构的改变，比较花费时间。
- Rendering （页面渲染）花费了366ms，显示为紫色。主要是JS的代码的执行及UI的渲染。
- Painting/System 等时间，主要是系统即浏览器内部代码花的时间，我们暂时就不关注了。
