前端性能测试实战

1、前端性能风险

前端是面向用户的程序，例如我们在浏览器中看到的网站页面，我们在手机中看到的App界面、小程序等。在20多年前我们并没有前端这个说法，当时很多系统（产品或者服务）是采用C/S架构的，C（Client）为客户端，S（Server）为服务端。

例如我们在Windows系统中安装的QQ程序，聊天界面是C端，系统消息来自S端。C端负责接收用户请求，展示服务端的响应；对用户来说唯一不方便的地方就是要安装C端程序，所以这是一个痛点。

我们可以通过浏览器来访问门户网站，服务商只要按照协议提供信息，就可以发布在万维网上供用户浏览，用户并不需要去安装特定的C端程序。万维网解决了用户的痛点，为之后的互联网崛起扫清了道路。实际上是我们用浏览器代替了这个C端程序，让它变得通用，它不仅提供文字、图片内容，还可以提供视频内容。

如今，运行在浏览器上的程序我们称之为前端程序。当然，前端程序不是只有运行在浏览器中的，我们把处理用户请求，渲染响应数据的程序都叫前端。例如手机中的App、微信及微信中的小程序。用户的信息需求种类增多，信息量增多，都给前端带来了压力。现在我们在开发前端程序时重度使用JS（JavaScript），JS是解释型的即时编译语言，运行在浏览器中。是程序就可能有问题，自然性能问题也是逃不掉的。

以Web为例，我们在浏览器中访问页面时也许没少见下面几种情况：

• 时常会遇到白屏，半天没有响应；
• 好不容易有响应，屏幕出现卡顿；
• 页面出来了，数据没填充完整；
• 图片显示不完整；
• 动画不动，视频不流畅。

这些情况可能是前端的性能问题，也可能是后端的问题，例如，后