【开发小记】前端性能指标和工具

在网上查找搜集了很多和前端性能相关的资料，然后自己动手实践了一下，在此做个记录。以下截图都是我针对淘宝网站测试的~

一、Network网络测试

1、可以检查network属性 以淘宝为例
Network面板是一个常被用到的工具，通过它可以获取到网站所有资源的请求情况，包括加载时间，尺寸大小，优先级设置以及HTTP缓存等信息。可以帮助开发者发现可能由于未进行有效压缩而导致资源尺寸过大的问题，未配置缓存策略导致二次请求加载时间过长的问题。

最下方是具体的加载时间等信息

2、瀑布流概念

从上而下展示的是各个资源请求和消耗的时间
鼠标悬浮到相应的小块上可以看到具体的内容

queueing：请求排队时间
DNS Lookup：DNS查找的过程时间
initial connection：请求与服务器连接的时间（TCP）
SSL：https证书验证的时间
request sent：发送请求的时间
waiting（TTFB）：等待响应的时间（这个指标最为重要，因为用户感受非常直观）
影响因素：后台的处理能力、回路网络的情况，会不会有延迟
content download：下载资源的时间（不能过长）

3.蓝线和红线

蓝线：dom加载完成的时间
红线：所有资源加载完成的时间

4.保存当前网页指标，方便以后比较
可以在Waterfall板块处邮件，选择“Sava all as HAR with content”保存当前指标，方便以后比较。

5. 缓存测试
Disable cache

6.吞吐测试，模拟网速

7.Coverage
监控并统计出网站应用运行过程中代码执行的覆盖率情况。

统计的对象是JavaScript脚本文件与css样式文件，统计结果主要包括文件的字节大小，执行过程中已覆盖的代码字节数，可视化的覆盖率条形图。

根据执行结果可以发现到底哪些尺寸较大的代码文件覆盖率较低，这就意味着这些代码文件中可能存在较多的无用代码。

Ctrl + shift + p 搜索 coverage 就会显示出来。

8.Memory 面板
主要用于分析内存占用情况，如果出现内存泄露，那么就可能带来网站崩溃的后果。

为了更细致和准确的监控应用网站当前的内存使用情况，Chrome浏览器提供Memory面板，可以快速生成当前的堆内存快照。

9.Performance
使用Performance面板主要对网站应用的运行时性能表现进行检测和分析，包括页面的每秒帧数，CPU的消耗和各种请求花费的时间。
点击开始后等待两三秒就可以停止


10.FPS
另一个非常方便的工具是FPS计数，可以在页面运行时提供对FPS的实时估计。

Ctrl + Shift + P 输入 fps 选择显示渲染。就会在浏览器中出现监控面板。

还可以使用性能监视器，这是一个事实的监视器。

Ctrl + Shift + P 输入 monitor

二、RAIL性能模型

RAIL是Response、Animation、Idle和Load的首字母缩写，是一种由Google Chrome团队于2015年提出的性能模型，用于提升浏览器的用户体验和性能。
RAIL模型的理念是以用户为中心，最终目标并不是让你的网站在任何设备上都能运行的很快，而是使用户满意
Response：应该尽可能快的响应用户的操作，应该在100ms内响应用户输入
Animation：在展示动画的时候，每一帧应该以16ms进行渲染，这样可以保持动画效果的一致性，并且避免卡顿
Idle：当使用js主线程的时候应该把任务划分到执行时间小于50ms的片段中去，这样可以释放线程以进行用户交互。50ms为单位是为了保证用户在发生操作的100ms内做出响应

要使网站响应迅速，动画流畅，通常都需要较长的处理时间，但是以用户为中心来看待性能问题，就会发现并非所有工作都需要在响应和加载阶段完成。完全可以利用浏览器的空闲时间处理可延迟的任务，只要让用户感受不出来延迟即可。利用空闲时间处理延迟可以减少预加载的数据大小，以保证网站或应用快速完成加载

Load：应该在小于1s的时间内加载完成你的网站，并且可以进行用户交互。根据网络条件和硬件不同，用户对性能延迟的理解也不同。
基于用户体验的性能指标包括几个比较重要的性能指标。
1.FCP（First Content paint）
首次内容绘制，浏览器首次绘制来自dom的内容的时间，内容必须包括文本，图片，非白色的canvas或者svg，也包括带有正在加载中的web字体文本。这是用户第一次看到的内容

2.LCP（Largest Contenful Paint）
最大内容绘制，可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户的可见时间。img图片、video元素的封面，通过url加载的背景，文本节点等，为了提供更好的用户体验，网站应该在2.5s以内或者更短的时间最大内容绘制。

3.FID（First Input Delay)
首次输入延迟，从用户第一次与页面进行交互到浏览器实际能够响应改交互的时间，输入延迟是因为浏览器的主线程正忙于做其他事情，所以不能响应用户，发生这种情况的一个常见原因是浏览器正在忙着解析和执行应用程序加载的大量计算的JavaScript

4.TTI (Time to Interactive)
网页第一次完全达到可交互状态的时间点，浏览器已经可以持续的响应用户的输入，完全达到可交互的状态的时间是在最后一个长任务完成的时间，并且在随后的5s内网络和主线程是空闲的。从定义上来看，中文名称叫持续可交互时间或可流畅交互时间更合适。

5.TBT (Total Block Time)
总阻塞时间，度量了FCP和TTI之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。只要存在长任务，该主线程就会被视为阻塞，该任务在主线程上运行超过50毫秒。

线程阻塞是因为浏览器无法中断正在进行的任务，因此如果用户确实在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。

6. CLS (Cumulative Layout Shift)

累计布局位移，CLS会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，他是一种保证页面的视觉稳定性从而提升用户体验的指标方案。

用人话来说就是当点击页面中的某个元素的时候，突然布局变了，手指点到了其它位置。比如想点击页面的链接，突然出现了一个banner。这种情况可能是因为尺寸未知的图像或者视频。

三、Web Vitals

这也是谷歌指定的web性能指标标准, 谷歌认为之前的标准太复杂，指标太多了，在2020年重新进行了梳理，简化到了三个。加载性能LCP，交互性FID，视觉稳定性CLS。只需要做好这三个，网站的性能基本上就可以了。

测量Web Vitals的工具有很多，比如Lighthouse，web-vitals，浏览器插件web vitals。

1. Web-Vitals

// npm install web-vitals -g

import { getLCP, getFID, getCLS } from 'web-vitals';

getCLS(conole.log)
getFID(conole.log)
getCLS(conole.log)

2. 浏览器插件
   谷歌浏览器可以直接在插件市场中查找并且安装web vitals。安装完成之后浏览器的右上角会多出插件标志，点击就会显示页面的性能指标。

四、性能测试工具

1. Lighthouse（灯塔）
Lighthouse是谷歌开发并开源的web性能测试工具，用于改进网络应用的质量，可以将其作为一个Chrome扩展程序运行，或从命令行运行。只需要为其提供一个需要审查的地址，Lighthouse就会对页面进行一连串的测试，生成一个有关页面性能的报告。

在浏览器的调试工具中默认就存在lighthouse选项，只需要切换至lighthouse，在右侧的选项区选中需要的选项。点击生成报告。

2. WebPageTest
在线web性能测试工具(https://www.webpagetest.org), 提供多地点测试。他只能测试已经发布了的网站。输入需要测试的网页地址，点击start test按钮就开始测试了，可以选择测试地理位置，测试的浏览器等。

本文是基于这篇大佬的博客，进行的一次动手实践记录~~~
https://blog.csdn.net/qq_25503949/article/details/108930457?spm=1001.2014.3001.5502