为什么我们感觉打开网页很慢？

lsekfe

一、我们经常遇到的问题
　　在我们的测试日常中，不免会遇到网页性能感知测试的工作，比如：测试访问某个网页耗时。针对此类测试，笔者经历过两种简单的方法：测试网页使用的后端接口响应耗时等同为网页耗时；使用秒表计算网页响应耗时。
　　测试网页响应耗时，我们需要知道触发网页请求时，直至网页刷新、响应，整个过程到底包含了些什么。从大体来分，主要包含两部分耗时：后端接口请求响应耗时和前端页面资源加载耗时。而抛开前端页面资源加载时间，单纯将后端接口响应耗时等同为网页响应耗时是不准确的；而不清除浏览器本身资源配置和消耗，简单使用秒表计算网页响应耗时，结果是粗泛不准确的。
　　那么，我们应该怎么测试网页响应耗时呢？当我们感觉打开网页很慢的时候，到底是因为什么原因呢？
　　二、认识Performance面板
　　工欲善其事必先利其器，你知道测试网页应用，浏览器是必不可少的。但是，如何利用浏览器分析网页性能，你知道吗？
　　以Chrome为例，首先，让我们再来认识一下这个强大、丰富的工具——“开发者工具”。使用Ctrl+Shift+I打开开发者工具，可见Elements、Source、Network、Performance等9大面板。我们分析网页性能时，主要使用的是Performance面板。
　　以百度搜索“51testing”为例，打开Chrome开发者工具，切换到Performance面板，点击record按钮，记录网页操作，记录结果如图2所示。

图1 Performance面板记录百度搜索操作结果
　　在分析网页性能之前，我们先认识下Performance面板的一些功能。如图2所示，Performance面板从上到下主要分为4个功能区：具体操作区，概览区，性能分析区，性能摘要区。
　　1.具体操作区：包含录制，刷新页面分析，清除结果等一系列操作；
　　2.概览区：高度概括随时间线的变动，包括FPS，CPU，NET，每个时间段执行的事件顺序，可以知道每个时间段（精确到毫秒）都做了什么。当鼠标放上去的时候，我们还可以大图的形式去查看我们每个时间段界面的渲染情况；
　　3.性能分析区：从不同的角度分析框选区域 。例如：Network可以直观的看到后台请求响应时长，Frames可以直观看到每帧加载耗时，Main 是Performance工具中比较重要的部分，记录了渲染进程中主线程的执行记录，点击main可以看到某个任务执行的具体情况；
　　4.性能摘要区：精确到毫秒级的分析，以及按调用层级，事件分类的整理。

图2 Performance面板功能区
　　三、Performance面板实践
　　了解了Performance面板之后，让我们来“康康”，如何结合Performance面板分析和解决我们遇到的问题。
　　1.如何监测网页响应耗时？
　　结合Performance面板的概览区和性能分析区的Frames视图，拖动观察区域，可以清楚地获知每帧图片加载耗时。以图2为例，可以看出从输入关键字“51testing”到显示搜索结果，整个过程网页耗时1332ms。使用Performance面板，可以更加精确计算网页响应耗时。此外，通过FPS图表，可以看到帧率波动（如下图箭头所示）。通常，绿色条越高，FPS越高，只要在FPS上方看到了红色条，就表示帧率下降的很低，当动画以60FPS运行时，用户会感觉很流畅。

　　2.如何分析网页响应过程中各个阶段耗时？
　　点击性能分析区的main功能，在性能摘要区可以看到每个阶段，如Loading（加载）、Scripting （js计算时间）、Rendering （渲染时间）等耗时。还可以看到每个事件耗时（一段横条代表执行一个事件,长度越长,花费的时间越多），和该事件的调用栈及其调用栈耗时（竖向代表调用栈），从下图可知，搜下“51testing”到响应出结果的过程中，Scripting耗时占比最大。且通过main功能，可以看到如果在这些横条中右上角是红色的就表示在该段代码执行过程中可能存在性能问题，如下图箭头所示部分。

　　3.如何分析网页响应中各个接口调用耗时？
　　点击性能分析区的network功能，可以看到，在网页响应过程中，每个请求的网络耗时和资源加载耗时。

　　4.如何识别网页内存溢出？
　　在开始Performance录制时，勾选具体操作区的“Memory”选项，Performance面板会记录网页加载过程中，不同的时间段，不同事件（如下图中所示的JS Heap，Documents等）的执行情况的内存消耗。通过观察概览区的内存随时间线变化，如果内存呈不断增长的趋势，那么，就可能存在内存溢出的情况。