「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」
前端性能优化
作为一名 c+v 工程师，不知道大家在有没有经历过这样的情况：
- 面试的时候：
- 面试官： 你会不会性能优化啊？
- 面试官： 从输入
URL到看到整个页面经历了什么过程？
- 开发的过程中：
- 页面加载好慢啊，啥情况？
- 页面一直卡顿，又又又啥情况？
想必大家应该都或多活动有遇到过吧，也正因为如此，所以本章也会的讲一下性能优化的问题，当然了因为章节有限的缘故，本章也没有办法把很细致的点：缓存怎么优化、DNS、渲染怎么优化等。
本章主要是讲一下前端性能优化的一些概念和一些套路。
什么是 Web 性能
简单来说就是你的网站够不够快。
虽然说起来非常的简单，但是是从下面的几个点来进行衡量的：
- 打开速度
- 动画效果
- 表单提交
- 列表滚动
- 页面切换
- ...
MDN上关于 Web性能的定义 What is web performance?
Web性能就是让网站变快，包括让缓慢的进程看起来变快。网站是否加载迅速，允许用户快速开始与它互动，并提供可靠的反馈，如果某些东西需要时间加载(如加载旋转器)?滚动和动画流畅吗?
Web 性能是网站或应用程序的客观度量和可感知的用户体验。
为什么要关注 Web 性能
Web 性能的好坏从一定程度上决定了：
- 用户的留存率
- 网站的转换率
- 体验与传播
- ...
还有就是你的工作绩效了
如何进行 Web 性能优化？
在进行 Web 性能优化之前，我们需要明确了解以下几点：
- 我们要了解性能指标
- 学会使用 Web 性能测试；
- 可以立足于网站页面响应的生命周期，分析出造成较差性能表现的原因；
- 技术改造、可行性分析等具体的优化实施
性能指标
1.RAIL 模型衡量性能
RAIL 这四个单词代表与网站或应用的生命周期相关的四个方面，这些方面会以不同的方式影响整个网站的性能。
- 响应（Response）：应该尽可能快速的响应用户, 应该在 100ms 以内响应用户输入。
- 动画（Animation）：在展示动画的时候，每一帧应该以 16ms 进行渲染，这样可以保持动画效果的一致性，并且避免卡顿。
- 空闲（Idle）：当使用 Javascript 主线程的时候，应该把任务划分到执行时间小于 50ms 的片段中去，这样可以释放线程以进行用户交互。
- 加载（Load）：应该在小于 1s 的时间内加载完成你的网站，并可以进行用户交互。
2.衡量性能和用户体验
最大内容绘制 (LCP) 是测量感知加载速度的一个以用户为中心的重要指标，因为该项指标会在页面的主要内容基本加载完成时，在页面加载时间轴中标记出相应的点，迅捷的 LCP 有助于让用户确信页面是有效的。
首次内容绘制 (FCP) 是测量感知加载速度的一个以用户为中心的重要指标，因为该项指标会在用户首次在屏幕上看到任何内容时，在页面加载时间轴中标记出相应的点，迅捷的 FCP 有助于让用户确信某些事情正在进行。
3.Web Vitals
什么是 Web Vitals?
Google 给出的定义是 一个良好网站的基本指标（Essential metrics for a healthy site），过去要衡量一个网站的好坏，需要使用的指标太多了，Web Vitals 可以简化指标的学习曲线，只需聚焦于 Web Vitals 指标的表现即可。
在这些 Web Vitals 中，Google 确定了三个主要衡量指标，即在所有类型的网站中通用的 Core Web Vitals：
如何测量？
- 性能测试工具，比如 Lighthouse
- web-vitals库
- Web Vitals插件
如何优化？
4.其他性能指标
- 重定向次数
- 重定向耗时
- DNS 解析耗时
- TCP 连接耗时
- SSL 安全连接耗时
- 网络请求耗时 (TTFB)
- 数据传输耗时
- DOM 解析耗时
- 资源加载耗时
- 首包时间
- 白屏时间
- 首次可交互时间
- DOM Ready 时间
- 页面完全加载时间
- http 头部大小
推荐看看这个 Web的性能指标有哪些？
专业工具
通常我们会借助一些工具来完成性能测量。 本节先简要介绍一下会用那些工具，如果本章阅读量比较不错的话，会有独立章节详细介绍它们的使用方式与生成报告的分析。
网站页面响应的生命周期
- 浏览器通过请求得到一个HTML文本
- 渲染进程解析HTML文本，构建DOM树
- 解析HTML的同时，如果遇到内联样式或者样式脚本，则下载并构建样式规则（stytle rules），若遇到JavaScript脚本，则会下载执行脚本。
- DOM树和样式规则构建完成之后，渲染进程将两者合并成渲染树（render tree）
- 渲染进程开始对渲染树进行布局，生成布局树（layout tree）
- 渲染进程对布局树进行绘制，生成绘制记录
- 渲染进程的对布局树进行分层，分别栅格化每一层，并得到合成帧
- 渲染进程将合成帧信息发送给GPU进程显示到页面中
页面的渲染其实就是浏览器将HTML文本转化为页面帧的过程
优化方案
经过对网站页面性能的测量及渲染过程的了解，相信你对于糟糕性能体验的原因已经比较清楚了，那么接下来便是优化性能，我们先简单扼要地介绍一些优化方面的思路。
- 从发出请求到收到响应的优化，比如 DNS 查询、HTTP 长连接、HTTP 2、HTTP 压缩、HTTP 缓存等。
- 关键渲染路径优化，比如是否存在不必要的重绘和回流。
- 加载过程的优化，比如延迟加载，是否有不需要在首屏展示的非关键信息，占用了页面加载的时间。
- 资源优化，比如图片、视频等不同的格式类型会有不同的使用场景，在使用的过程中是否恰当。
- 构建优化，比如压缩合并、基于 webpack 构建优化方案等。
- ...
因为确实的进行拆分内容会很多，这里就简单的写一点了，如果有兴趣的话。。。再写吧
参考
- 【1】RAIL 模型衡量性能
- 【2】Largest Contentful Paint 最大内容绘制 (LCP)
- 【3】First Contentful Paint 首次内容绘制 (FCP)
- 【4】优化 Largest Contentful Paint 最大内容绘制
- 【5】优化 First Input Delay 首次输入延迟
- 【6】优化 Cumulative Layout Shift 累积布局偏移
- 【7】Web Vitals
- 【8】解读新一代 Web 性能体验和质量指标字节跳动大佬的哦
- 【9】谷歌的新一代 Web 性能体验和质量指标：Web Vitals
- 【10】 Web的性能指标有哪些？
- 【11】如何使用Lighthouse性能检测工具
- 【12】[WEB] 前端性能监控开源方案
- 【13】# 彻底理解服务端渲染 - SSR原理 #30