性能测试工具

性能--面试中必不可少的一道题。

你是怎么做性能优化的呢？

优化的量是多少呢？

用的什么工具？

前端性能测试

前端性能测试对象主要包括：

HTML、CSS、JS、AJAX 等前端技术开发的 Web 页面

影响用户浏览网页速度的因素主要有：

服务端数据返回、网络传输、页面渲染等

前端性能测试目的：

计算出包含页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间指标，对该页面性能进行评估分析，找出影响性能的主要因素和瓶颈，并在此基础上，给出一定的优化建议和解决方案，从而提升用户体验。

主要性能指标:

白屏时间、首屏时间、资源加载完成时间、网页加载完成时间

性能分析工具 - WebPageTest

WebPageTest网址

操作步骤

• 填写需要测试的URL

• 填写Test Location，下拉选择即可，可选移动端设备（包括Android、IOS），可选PC端（分地区，每个地区可支持的浏览器不同）

• 可选支持的浏览器

• 然后，选择需要模拟的网络情况。选择有线网络Cable或者3G、4G移动网络。

• 接着，在Repeat View 中选择First View and Repeat View。这是一个很关键的选项。当使用浏览器访问网站时，第一次打开一个新的网页往往会很慢，而第二次打开通常就会快很多，这是因为浏览器端会缓存很多资源。这个选项的意思就是既要测试第一次打开页面的前端性能（First View），也要测试在有缓存情况下重复打开的前端性能（Repeat View）。

• 点击右侧START TEST

指标数据

 

• First Byte Time

First Byte Time，指的是用户发起页面请求到接收到服务器返回的第一个字节所花费的时间。 这个指标反映了后端服务器处理请求、构建页面，并且通过网络返回所花费的时间。

检查内容：目标时间包括DNS寻址时间+建立连接时间(Socket) + SSL认证时间 + 100ms。当超过目标时间每100ms时， 性能评定将降低一个等级

• Keep-Alive

适用对象：同一个域名下多个页面对象使用了同一个连接(Socket)

页面上的各种资源（比如，图片、JavaScript、CSS 等）都需要通过链接Web服务器来一一获取，与服务器建立新链接的过程往往比较耗费时间，所以理想的做法是尽可能重用已经建立好的链接，而避免每次使用都去创建新的链接。

Keep-alive Enabled就是，要求每次请求使用已经建立好的链接。它属于服务器上的配置，不需要对页面本身进行任何更改，启用了Keep-alive通常可以将加载页面的时间减少40%-50％，页面的请求数越多，能够节省的时间就越多。

检查内容：响应头文件包含"Keep-Alive"的指令或者在给定的主机中多个对象中使用同一个连接

• GZIP Text

适用对象：工具会将MIME 类型为"text/*" 或"java"的所有对象

如果将页面上的各种文本类的资源，比如Html、JavaScript、CSS等，进行压缩传输，将会减少网络传输的数据量，同时由于JavaScript和CSS都是页面上最先被加载的部分，所以减小这部分的数据量会加快页面的加载速度，同时也能缩短First Byte Time。

为文本资源启用压缩通常也是服务器配置更改，无需对页面本身进行任何更改。

检查内容：检查Transfer-encoding来看是否为GZIP，如果不是则结果中会提供说明该文件是压缩过以及提供压缩比率(因此一个文件可以节省30%的大小，通过压缩即产生了源文件70%大小的文件)

• Compress Images

适用对象：JPEG图片

为了减少需要网络传输的数据量，图像文件也需要进行压缩处理。显然本次测试结果显示，所有的JPEG格式图片都没有经过必要的压缩处理，并且所有的JPEG格式图片都没有使用渐进式JPEG（Progressive JPEG）技术，所以WebPagetest给出了D级的评分。

普通JPEG文件存储方式是按从上到下的扫描方式，把每一行顺序地保存在JPEG文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行地被显示，直到所有的数据都被读完，就完成了整张图片的显示。

如果文件较大或者网络下载速度较慢，会看到图片是被一行一行加载的。为了更好的用户体验，渐进式JPEG技术就出现了。

渐进式JPEG包含多次扫描，然后将扫描顺序存储在JPEG文件中。打开文件的过程，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片会变得越来越清晰。这种格式的主要优点是在网络较慢时，通过图片轮廓就可以知道正在加载的图片大概是什么，这种技术往往被一些网站用于打开较大图片。

检查内容：对比使用photoshop质量选择为50后的文件大小，尺寸超出10%为达标，10%~50%为警告，超出50%为不达标，总体评分为图片重压缩后占原文件的百分比

• Cache Static

适用对象： 符合以下的情况的任意的非html对象数据，这个工具会将MIME类型为"text/","java"或者"image/"，此类没有明确标明过期时间(0或者-1），cache-controlheader设置为private,non-store 或者non-cachepragma header 设置为no-cache

一般情况下，页面上的静态资源不会经常变化，如果浏览器可以缓存这些资源，当重复访问这些页面时，就可以从缓存中直接使用已有的副本，而不需要每次向Web服务器请求资源。这种做法，可以显著提高重复访问页面的性能，并减少Web服务器的负载。

检查内容：存在一个”Expires“ header(而不是0或者-1),或者设置cache-control: max-age并设置为一个小时或超过一个小时。当过期时间设置小于30天，将评定为警告

• Use A CDN

适用对象：所有静态的非HTML内容(css, js 以及图片)

CDN是内容分发网络的缩写，其基本原理是采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区的网络供应商机房内，当用户访问网站时，利用全局负载技术将用户的访问指向距离最近的、工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

检查内容：检查是否托管在一个已知的CDN上(CName映射到一个已知的CDN网络上).超过整体页面80%为静态资源时，则需要考虑使用CDN，将静态资源托管在CDN上，你可以从这里知道当前已知的CDN

其他性能指标

 

• Start Render

Start Render，指的是浏览器开始渲染的时间，从用户角度看就是在页面上看到第一个内容的时间。该时间决定了用户对页面加载快慢的的第一直观印象，这个时间越短用户会感觉页面速度越快，这样用户也会有耐心去等待其他内容的展现。如果这个时间过长，则用户会在长时间内面对一个空白页面后，失去耐心。

理论上讲，Start Render时间主要由三部分组成，分别是「发起请求到服务器返回第一个字节的时间（也就是 First Byte 时间）」、「从服务器加载 HTML 文档的时间」，以及「HTML 文档头部解析完成所需要的时间」，因此影响Start Render时间的因素就包括服务器响应时间、网络传输时间、HTML文档的大小以及HTML头中的资源使用情况。

这个值最好不要大于3s。

• First Interactive

First Interactive，可以简单的理解为最早的页面可交互时间。页面中可交互的内容，包括很多种类，比如点击一个链接、点击一个按钮都属于页面可交互的范畴。First Interactive时间的长短对用户体验的影响十分重要，决定着用户对页面功能的使用，这个值越短越好。

为了使这个值尽可能得小，通常会采取以下措施：

只有页面控件内容渲染出来了，才有可能进行交互，所以First Interactive依赖于Start Render时间； 尽量将交互控件的代码放置在HTML BODY的前部，让其尽早加载； 尽早做JavaScript的初始化和绑定，目前大多数做法有两种，一是在DOM Ready中做所有JavaScript的初始化和功能绑定，二是在页面底部做JavaScript的初始化和功能绑定。

这个值最好不要大于5s。

• Speed Index

严格来说，Speed Index是通过微积分定义的。理解起来会比较困难，所以只做定性讨论。

通常，影响网页性能体验的一个重要指标是页面打开时间。打开时间越短，其体验越好。但是，当存在两个打开时间完全相同的网站A和B时，其中网站A的打开过程是逐渐渲染页面完成的，而网站B的打开过程则是空白了一段时间后在短时间内完成页面渲染完成的。

毫无疑问，网站A的用户体验一定好于B。Speed Index就是用来衡量这种体验的，通常来讲，它的值越小越好。

解决问题

WebPagetest是一个很强大的免费工具，但是如果想要在实际工程项目中全面推行该工具的话，还需要解决两个问题。

第一个问题是，如果被测网站部署在公司内部的网络中，那么处于外网的WebPagetest就无法访问这个网站，也就无法完成测试。要解决这个问题，需要在公司内网中搭建私有WebPagetest以及相关的测试发起机，参考WebPagetest官网。

第二个问题是，用WebPagetest执行前端测试时，所有的操作都是基于界面操作的，不利于与CI/CD的流水线集成。要解决这个问题，就必须引入WebPagetest API Wrapper。

  总结

如果你对此文有任何疑问，如果你也需要接口项目实战，如果你对软件测试、接口测试、自动化测试、面试经验交流感兴趣欢迎加入我们，加入方式在文章的最后面

  自动化测试相关教程推荐：

2023最新自动化测试自学教程新手小白26天入门最详细教程,目前已有300多人通过学习这套教程入职大厂！！_哔哩哔哩_bilibili

2023最新合集Python自动化测试开发框架【全栈/实战/教程】合集精华，学完年薪40W+_哔哩哔哩_bilibili

测试开发相关教程推荐

2023全网最牛，字节测试开发大佬现场教学，从零开始教你成为年薪百万的测试开发工程师_哔哩哔哩_bilibili

postman/jmeter/fiddler测试工具类教程推荐

讲的最详细JMeter接口测试/接口自动化测试项目实战合集教程，学jmeter接口测试一套教程就够了！！_哔哩哔哩_bilibili

2023自学fiddler抓包，请一定要看完【如何1天学会fiddler抓包】的全网最详细视频教程！！_哔哩哔哩_bilibili

2023全网封神，B站讲的最详细的Postman接口测试实战教学，小白都能学会_哔哩哔哩_bilibili

  总结：

 光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。

​​​

​​​

如果对你有帮助的话，点个赞收个藏，给作者一个鼓励。也方便你下次能够快速查找。

如有不懂还要咨询下方小卡片，博主也希望和志同道合的测试人员一起学习进步

在适当的年龄，选择适当的岗位，尽量去发挥好自己的优势。

我的自动化测试开发之路，一路走来都离不每个阶段的计划，因为自己喜欢规划和总结，

测试开发视频教程、学习笔记领取传送门！！

​

​