31 | 前端性能测试工具原理与行业常用工具简介

WebPagetest

六项前端性能指标

First Byte Time

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

Keep-alive Enabled

        要求每次请求使用已经建立好的链接

Compress Transfer

        将页面上的各种文本类的资源，比如 Html、JavaScript、CSS 等，进行压缩传输，将会减少网络传输的数据量。

Compress Images

        减少需要网络传输的数据量，图像文件也需要进行压缩处理。

        普通 JPEG 文件存储方式是按从上到下的扫描方式，把每一行顺序地保存在 JPEG 文件中。

        渐进式 JPEG 包含多次扫描，然后将扫描顺序存储在 JPEG 文件中。打开文件的过程，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片会变得越来越清晰。        

Cache Static Content

        一般情况下，页面上的静态资源不会经常变化，所以如果浏览器可以缓存这些资源。

Effective use of CDN

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

其他指标

Start Render

        浏览器开始渲染的时间，从用户角度看就是在页面上看到第一个内容的时间。

        影响 Start Render 时间的因素就包括服务器响应时间、网络传输时间、HTML 文档的大小以及 HTML 头中的资源使用情况。

First Interactive

        最早的页面可交互时间。

        应该将 JavaScript 的初始化提前到相关 DOM 元素建立起来后进行，例如将初始化的操作直接放在元素之后进行，这样就可以使控件尽可能早地变成可交互状态。

实际使用

•         如果被测网站部署在公司内部的网络中，那么处于外网的 WebPagetest 就无法访问这个网站。对此，可以搭建自己的私有 WebPagetest 以及相关的测试发起机。
•         用 WebPagetest 执行前端测试时，所有的操作都是基于界面操作的，不利于与 CI/CD 的流水线集成。要解决这个问题，就必须引入 WebPagetest API Wrapper。