前端性能优化的思考。

性能指标

项目的实际开发中，对性能的衡量主要通过以下几个方面：

LCP

：最大内容绘制完成时间，衡量用户能看到有效信息的时长

FID

：首次输入延迟，衡量用户输入的反馈

CLS

：累计布局偏移，衡量呈现给用户的视觉稳定性

FCP

：首次内容绘制完成的时间，衡量用户首个可见元素的出现时长

浏览器渲染原理

浅析原理：

下载并解析DOM生成DOM树
在解析DOM过程中遇到CSS文件并行下载并解析，生成CSSOM
根据DOM和CSSOM生成渲染树
根据渲染树进行布局
布局完成将具体内容绘制在屏幕上影响因素：
HTML文件下载和解析时间
CSS文件下载和解析时间
同步JS文件的下载和解析
DOM和CSSOM的大小
布局绘制时间
优化方案

缓存优化
设置HTTP的资源缓存策略：这里涉及到强缓存、协商缓存相关概念
对于静态资源使用CDN
动态资源和静态资源进行分离
接口缓存：graphQL自动实现了接口缓存–接口依赖的传参没有变化时调用缓存
PWA方式：渐进式Web APP，资源在本地
域名
域名收拢：将dns解析时间变短–a标签设置link时加上rel=preconnect / rel=dns-prefetch
资源加载
预加载
懒加载
选择性加载
FID优化
减少JS执行时长
对JS任务进行分割，内存换时间
CLS优化

影响CLS的原因：
无尺寸图片、广告，iframe
动态注入的内容
网络字体的不可见文本闪烁（FOIT）、无样式文本闪烁（FOUT）优化：例：广泛使用的骨架屏
React如何优化？

减少不必要的组件更新！

使用PureComponent React.memo
使用 useMemo useCallback实现稳定的Props值
状态下发，缩小状态影响范围
列表项使用key属性
对Hooks按需更新。。。
服务端渲染

Next框架自动实现服务端渲染，JS的执行过程放在服务器，前端接受渲染后的脚本

浏览器工具performance监测性能