前端性能指标的介绍

前言
被问到优化性能的方式有哪些，会被提到合并文件，压缩资源等，但是对于性能的衡量标准，各执一词；衡量标准有很多，本文讲介绍最具有代表性，使用最广泛的几种性能代表。

页面加载过程

要了解性能指标，就要先了解页面加载的过程，对浏览器加载页面进行了解

该图中详细阐述了浏览器加载页面时触发的所有行为（钩子）的流程

按照时间顺序概述：

• 浏览器本地行为

1.Prompt for unload：提示卸载。打开新页面的瞬间，准备卸载之前页面（如果有的话）的 document。这之后马上记录下时间作为 navigationStart

2. redirect（unload）：重定向，若发生网络重定向直接跳至 DNS 解析，若发生本地重定向，查找本地强制缓存资源。同时卸载之前页面，回收内存。
3. App cache：读取本地缓存，减少网络 IO 开销（有缓存直接跳至 Processing）

• 网络行为

4. DNS：没有缓存，走网络，DNS 解析找到对应的 IP。DNS 解析发送的是 UDP 包。
5. TCP：建立 TCP 连接
6. Request：HTTP 通信
7. Response：服务器响应

• 浏览器本地行为

8. Processing：浏览器解析 DOM，处理一系列响应、渲染行为。详见渲染机制
9. onLoad：加载完成。

性能指的是什么

我们都听说过性能的重要性。但当我们谈起性能，以及让网站"速度提升"时，我们具体指的是什么？

其实性能是相对的：

• 某个网站可能对一个用户来说速度很快（网速快，设备强大的情况下），但可能对另一个用户来说速度很慢（网速慢，设备低端的情况下）。
• 两个网站完成加载所需的时间或许相同，但其中一个却显得加载速度更快（如果该网站逐步加载内容，而不是等到最后才一起显示）。
• 一个网站可能看起来加载速度很快，但随后对用户交互的响应速度却很慢（或根本无响应）。

因此，在谈论性能时，重要的是做到精确，并且根据能够进行定量测量的客观标准来论及性能。这些标准就是指标。

指标的类型

• Perceived load speed 感知加载速度：页面在屏幕上加载并渲染出所有视觉元素的速度。
• Load responsiveness 加载响应度：为了使组件对用户交互作出快速响应，页面加载和执行任何所需 JavaScript 代码的速度。
• Runtime responsiveness 运行时响应度：页面在加载后，对用户交互的响应速度。
• Visual stability 视觉稳定性：页面上的元素是否会出现让用户感到意外的偏移，并对用户交互造成潜在的干扰？
• Smoothness 平滑度：过渡和动画在页面状态切换的过程中是否具有稳定的帧速率和顺滑的流动性

性能指标的介绍

渲染过程

• FP（FirstPaint）首次绘制
  页面从开始加载到页面第一次绘制任何像素的时间

• First Contentful Paint (FCP)首次内容绘制
  页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间（渲染DOM的内容的时间）

  现象：白屏和绘制背景色的时间
  时间过长的原因：资源加载太慢，比如 js、字体文件等

• Largest Contentful Paint (LCP)最大内容绘制
  页面从开始加载到最大文本块或图像元素在屏幕上完胜渲染的时间；如果元素在屏幕外面，或者如果元素被overflow裁剪了，这些部分不计算入LCP的元素尺寸

  时间过长的原因:css和js阻塞了dom的渲染，最大元素中的资源加载慢

• First Screen Paint (FSP)内容全部呈现的时间

  时间过长的原因:资源加载慢，js执行时间过长等

• Speed Index (SI)首屏展现平均值
  页面显示的指标

  如何优化首屏展现平均值得分

减少渲染阻塞资源
JavaScript执行时间是提高首屏展现平均值得分的最佳方法之一。渲染阻塞资源是脚本和代码，它们优先阻止您网站的其他部分加载。与站点同时加载不同的元素不同，一些元素会暂停所有其他元素，直到它们完成。

• First Input Delay (FID)首次输入延迟
  从用户第一次与网站交互直到浏览器实际能够对交互作出响应所经过的时间；用户等待响应，比如点击按钮，输入数据
• Time To Interactive (TTI)可交互时间
  页面从开始加载到视觉上完成渲染、厨师脚本完成加载，并能够快速、可靠地响应用户输入所需的时间
• Total Blocking Time (TBT)总阻塞时间
  FCP到TTI中所有长任务的阻塞时间之和(长任务执行时间超过50ms的部分被称为阻塞时间)

• Cumulative Layout Shift (CLS) 累积布局偏移
  页面上非预期的位移波动

  元素偏移：元素是可见的且元素起始位置改变
  元素偏移值 = 影响范围 * 起始位置改变值
  一次偏移窗口: 5s内，元素偏移时间间隔少于1s的偏移值之和
  累计布局偏移：最大的偏移窗口

• Frames Per Second (FPS)每秒传输帧数
  每秒可以重新绘制的帧数
  FPS过低会造成页面卡顿