性能测试-基础+中级（二）【前端性能测试】

系列文章目录-性能测试

性能测试-基础+中级（一）【概述+流程+工具+模型+mysql事务】

---

7. 前端性能测试

影响前端性能因素：网络连接，下载资源，js加载，前端页面渲染等…针对前端的性能测试，基本上都是B/S架构的系统。

7.1 以ShopXO商城为例分析

ShopXO商城

使用谷歌浏览器自带开发者工具检查

可以看到加载时间最长的资源耗时1.56s，请求数67，通过网络传输1.4MB，页面加载的4.5MB资源，2.45s请求全部结束（finish），DOMContent加载耗时2.17s（DOMContentLoaded），页面加载耗时2.26s（Load）。

上图可以看到有些资源是存放在缓存中的。

若多次重新加载页面发现加载时间越来越短，需要网络传输的资源也越来越少。

我们选择【禁用缓存】选项

选择【禁用缓存】，clear，重新加载商城页面，发现与结论一致。

下图，查看其中一个请求的waterfall，可以看到该请求发送和接受的全过程耗时。

• Queued at 172.33ms
  • 该请求在172.33ms的时候添加入队列。
• Started at 294.20ms
  • 在队列中，该请求在294.20ms的时候开始预备发送。

---

• Resource Scheduling-Queueing-DURATION 121.87 ms
  • 该请求排队时间耗时121.87 ms。
• Connection Start-Stalled-DURATION 4.52 ms
  • 在发送之前，该请求准备4.52 ms。
• Request/Response-Request sent-DURATION 0.13 ms
  • 发送该请求耗时0.13ms。
• Request/Response-Waiting for server response-DURATION 42.67 ms
  • 等待服务器返回该请求的响应耗时42.67ms。
• Request/Response-Content Download-DURATION 3.89 s
  • 响应的数据下载耗时3.89ms。

以上，从该请求进入队列开始，到响应数据下载完毕：
总耗时：4.06s ≈ 121.87ms（排队时间耗时） + 4.52ms（请求发送准备耗时） + 0.13ms（请求发送耗时） + 42.67ms（等待响应耗时） + 3.89s（数据下载耗时）

对于前端的性能测试，我们主要关注这些请求的大小和加载时间，并做相应的优化。

开启缓存，我们会发现有内存缓存（memory cache）和磁盘缓存(disk cache)，内存缓存加载不耗费时间，而磁盘缓存耗时。

7.2 前端在线测试工具-GTmetrix

在实际工作中，如果用浏览器的开发者工具去检查，效率较低，可以使用GTmetrix帮助我们提高测试效率。

前端在线测试工具：GTmetrix，注册账号，并登录（最好使用谷歌浏览器进行测试）。

GTmetrix has undergone its biggest change yet, replacing the PageSpeed/YSlow libraries with Lighthouse, the industry standard in web performance.
GTmetrix经历了它最大的变化，用Lighthouse(网络性能的行业标准)取代了过去的PageSpeed/YSlow。

注册登录完成，看到以下页面

浏览器开发者工具附带了lighthouse性能分析，也可以直接用它直接分析页面性能。

其他主流测试工具>【性能优化】性能测量工具-WebPageTest

7.3 输入URL分析性能-GTmetrix

继续以ShopXO商城为例进行分析，将系统前端URL输入GTmetirx性能分析框进行分析。

如上，得到一份性能分析报告。

与之相比较，百度的前端性能就比较好。

7.4 GTmetrix性能报告

查看上面这份性能分析报告，具体指标可参照 Everything you need to know about the new GTmetrix Report (powered by Lighthouse)

7.4.1 GTmetrix Grade and Web Vitals（GTmetrix等级和Web核心指标）

第一部分：1. 新的GTmetrix等级（一个从新的性能和结构分数中衍生出来的加权等级，它取代了旧的PageSpeed和YSlow分数）和 2.Web核心指标（Web Vitals）

• GTmetrix Grade（GTmetrix等级）
  1.GTmetrix评分是对你的整体页面性能的评估；它既反映了用户加载页面的速度，又反映了构建页面的性能；
  2.GTmetrix评分基于一个简单的公式，目前为性能（Performance）和结构（Structure）评分分别分配了70/30的权重；
  3.结构评分指标可以看作是更好的web性能的指导手册，而性能评分指标则是你实际web性能的跑表。
  • Performance（70%）（性能）
    • The Performance Score（性能评分）
      1.性能评分从用户的角度告诉您页面的执行情况；
      2.性能分数本质上是您的Lighthouse性能分数。由GTmetrix测试捕获，包括我们的浏览器、硬件规格和指定的分析选项(AdBlock、连接速度等)；
      3.性能评分由6个指标组成。
      • Loading performance (45%)（加载性能）
        • First Contentful Paint (10%)（开始内容绘制）
          1.First Contentful Paint（FCP）与页面加载速度相关，用来衡量访问者浏览到页面上实际内容=(即文本、图像、视频等)的速度；
          2.FCP是从开始加载页面到在屏幕上开始显示内容所花费的总时间；
          3.较低的FCP时间可以让用户有较好的使用体验。
        • Speed Index (10%)（速度指数）
          1.Speed Index（SI）依赖于浏览器视图端口的大小，用来衡量页面在视觉上的完成速度；
          2.SI是一种计算的结果，通过对页面加载行为逐帧分析，反映了访问者的页面体验;
          3.SI与其他页面加载时间密切相关，这使其成为评估网站整体性能的一个有用的总体基准。
        • Largest Contentful Paint (25%)（最大内容绘制）
          1.Largest Contentful Paint（LCP）衡量的是页面上最大的“内容元素”(例如，英雄图片、标题文本等)在访问者的屏幕显示所需的时间，用于衡量用户的感知加载体验；
          2.LCP也是作为谷歌的Web Vitals指标之一。
      • Interactivity (40%)（交互性）
        • Time to Interactive (10%)（交互的时间）
          1.Time to Interactive （TTI）衡量页面的加载响应性，并帮助识别页面看起来交互式但实际上不是的情况；
          2.TTI测量在第一次内容绘制(FCP)之后，当页面可靠地为用户交互做好准备时的最早时间；
          3.更快的TTI有助于确保页面可用。
        • Total Blocking Time (30%)（总阻塞时间）
          1.Total Blocking Time（TBT）衡量的是网页被阻塞的总时间，用于阻止用户与页面交互；
          2.TBT量化了页面对用户输入的加载响应，是仅字段的首次输入延迟(FID)度量的替代品，在PageSpeed Insights中可以看到；
          3.TBT也是作为谷歌的Web Vitals指标之一。
      • Visual Stability (15%)（视觉稳定性）
        • Cumulative Layout Shift (15%) （累计布局偏移）
          1.Cumulative Layout Shift（CLS）用于衡量网页呈现时网页元素的意外变化。然后将该测量值量化为页面上所有单个布局移位的总分；
          2.CLS用于衡量页面压力的视觉稳定性。
          3.CLS也是作为谷歌的Web Vitals指标之一。
  • Structure（30%）（结构）
    • Structure Score（结构评分）
      1.结构评分是页面构建的最佳性能评分，结构得分的好坏反映了站点为实现最佳性能而构建的好坏；
      2.处理结构审计可以作为一个很好的起点，从总体上去优化页面加载时间。此外，有些审计是相关的，因此，修改一个审计可能会影响其他的审计；
      3.结构审计包括：标准的Lighthouse审计+自定义GTmetrix审计。
      • 标准的Lighthouse审计
      • 自定义GTmetrix审计
        • Enable Keep-Alive（开启keep-Alive）
          1.只会在没有检测到Keep-Alive on指令的使用HTTP/1.1的页面上触发。如果检测到您的页面正在使用HTTP/2，此项不作影响。
          2.对于HTTP/1.1请求，启用Keep-Alive可以减少延迟并提高页面性能。浏览器可能使用多个TCP连接从服务器检索页面的文件，如果在传递初始文件时关闭了原始连接。这会增加延迟和加载页面的时间。启用Keep-Alive允许使用同一个TCP连接传输多个文件，从而获得更快的加载页面。
        • Combine images using CSS sprites（使用CSS sprites组合图像）
          1.如果您的页面提供多个小的、spritable类型的图像，则会触发此审计；注意，根据页面是使用HTTP/1.1还是HTTP/2，此审计具有不同的阈值。
          2.使用CSS sprites组合图像可以减少往返请求的数量，从而提高页面的性能。这种方法主要是指小图像，如图标、徽标和其他图形元素，可以组合成单个图像，然后通过CSS在页面上定位。减少所加载的图像数量有助于提高页面性能，因为它减少了请求的数量，从而减少了浏览器加载图像所花费的时间。
        • Use a Content Delivery Network (CDN)（使用内容分发网络(CDN)）
          1.使用“内容分发网络(CDN)”可以提高您的网站在全球不同地区的性能；
          2.CDN本质上是一个遍布世界各地的服务器网络。每个CDN“节点”位于不同的区域，并缓存页面的静态内容，比如图像，css/js文件等。当用户访问您的页面时，资源来自最近的CDN节点的缓存，而不是您的原始服务器，减少延迟并为您的访问者提供快速的页面体验，无论他们位于何处。
        • Avoid CSS @import（避免使用CSS @import）
          1.尽可能避免使用CSS @import，因为浏览器遇到的任何导入指令(不带deferattribute)都会立即下载、解析并执行，这可能会阻碍页面其余部分的呈现；
          2.CSS @import是从另一个CSS文件中调用样式表/CSS文件的过程。这种方法导致浏览器按顺序加载每个CSS文件，而不是并行加载。因为CSS是呈现阻塞的，默认情况下，这可能会影响页面性能。所以，应尽量避免使用CSS @import来加快页面加载速度，提高访问者的页面体验。

• http/1.x keep alive是为了解决每次请求都会重新建立和断开TCP连接的问题（服务器在发送完一个http相应后，会断开tcp连接，这样做的原因，是因为：极大的减轻服务端的压力，但这个问题在于：比如打开一个网页要加载很多资源，像js/css文件，图片等，那么每请求一个资源，就创建一个连接，然后关闭，这样做就代价实在太大了。于是便通过使用keep-alive，使连接能够在短时间内得到复用，同时SSL的开销也可以避免。）
  • HTTP 1.0 中默认关闭，需在http头加入"Connection: Keep-Alive"，启用Keep-Alive；
  • HTTP 1.1 中默认启用Keep-Alive，需加入"Connection: close "，可关闭。
• http/2.0 连接都是持久化的，客户端与服务器之间只需要一个连接（每个域名一个连接），不再依赖多个TCP实现多流并行，每个数据流都拆分成互不依赖的帧，这些帧可以乱序发送，也可分优先级，然后在另一端将它们重新组合起来，连接可以承载数十或数百个流的复用（多路复用）。

---

引用：
https://zhuanlan.zhihu.com/p/89471776
https://www.cnblogs.com/caoweixiong/p/14720254.html

---

• Web Vitals（Web重要指标）
  1.谷歌已经确立了Web Vitals作为核心指标，它是对页面性能影响最大的关键指标。
  2.Web Vitals在你的GTmetrix等级和性能/结构分数部分出现，Web Vitals是对页面进行基准测试的好方法，因为它们关注的是对性能感知影响最大的一小部分关键指标，专注于一小组关键指标来评估您的页面体验，有这么多的时间和审计来评估页面性能，这个小集合代表了最具影响力的指标，以简化web性能的世界；
  3.每个指标都代表了页面体验的一个关键方面，即加载、交互性和视觉稳定性。
  • LCP（Largest Contentful Paint，LCP，最大内容绘制）：显示最大内容元素所需的时间。
  • TBT（Total Blocking Time，TBT，总阻塞时间）：页面加载过程中的脚本阻塞时间。
  • CLS（Cumulative Layout Shift，CLS，累计布局偏移）：您的用户在页面加载期间经历了多少布局移位。

7.4.2 The Summary Tab（总结选项卡）

第二部分：总结选项卡

• 包括4部分，如下：
  Speed Visualization，（速度可视化），Top Issues（重要问题），Page Deta