前端性能优化笔记指标 LCP：（largest contentful paint）最大绘制内容，衡量页面加载性能视口

指标

LCP：（largest contentful paint）最大绘制内容，衡量页面加载性能视口中最大可见图片或文本完成渲染的时间，用户感知的加载速度，优秀标准<=2.5s
CLS：（cumulative layout shift）累计布局偏移，衡量视觉稳定性测量页面加载过程中元素的非预期的位置移动，分数越低代表布局越稳定，分数由布局偏移计算，理想值<0.1 开发时给图片和广发预留空间，保证布局的稳定
INP：（interaction to next paint）交互到下次绘制的时间，衡量交互响应，用户点击按钮或其他操作的时候，页面是否立刻给出反馈【2024年取代旧指标FID first input delay，只测量用户和页面的第一次交互延迟】INP监控整个访问周期，选取最慢的一次交互作为代表值

线上卡顿无法复现

环境差异网络条件、设备性能、浏览器版本、地理位置 cdn节点不同与其追求浮现问题，不如收集用户问题RUM 真实用户监控

异常日志

js执行错误：window.onerror
资源加载失败：window.addEventListener('error',...)
promise未处理异常：unhandledrejection

PerformanceObserver

提供事件驱动，异步回调机制。无需轮回，非阻塞，高效，异步调用，不阻塞主线程工作原理

step1：创建观测器通过new PerformanceObserver(callback)注册对性能事件的监听。浏览器在记录到相关性能条目时，自动异步触发回调函数。

step2：指定观测目标使用observer.observe明确指定需要观测的指标。前端页面-（PerformanceObserver捕获）->上报模块-(sendBeacon/fetch)->监控服务器->数据分析与可视化->性能优化反馈

加载优化：资源提示符

资源提示符：link标签rel属性的一组值，用于告诉浏览器未来即将发生的资源的处理策略。

提高网页的首屏加载时间
减少DNS，TCP，TLS等连接延迟
与加载关键或预测性资源

两个维度时机当前页面还是未来使用深度解析域名-》建立连接-〉下载资源

dns-prefetch

仅提前解析DNS，不建立连接；开销最小，兼容性最好使用场景1、非关键的第三方资源（分析脚本、插件）2、可作为preconnect的降级方案

preconnect 提前握手

完成DNS+TCP+TLS，全流程建立连接；适用于关键第三方域名使用时机字体

preload 资源重要，要预先加载

as参数必须制定，告诉浏览器预加载的资源是什么类型 type是文件类型直接下载关键资源；下载后暂不执行；提前触发关键资源的加载常见场景：css定义的字体文件；背景图或LCP图片；首屏必需的动态脚本 ##### prefecth 当前页面加载完成后，在空闲时请求资源；优化下一个页面的加载使用场景：提前加载下一页的js/css；spa路由，悬停时预取下个chunk；用户行为预测型预加载

HTTP缓存

复用资源，减少延迟，节省带宽浏览器请求前-》检查本地缓存一系列的HTTP请求头（Cache-Control、Expires、ETag、Last-Modify）

强缓存

直接使用本地资源，无需请求服务器优先级 Cache-Control（http/1.1）> Expires（http/1.0） Cache-Control：max-age=1000、 public允许代理缓存、private仅用户缓存、no-cache启用协商缓存、no-store完全禁止缓存、immutable资源永久不变

协商缓存

向服务器发送请求验证有效性服务器根据资源状态返回：304 not modified -》使用本地缓存；200 OK -》返回新内容

ETag，判断文件的hash标识，基于内容的，更精确资源请求后，返回ETag，值存在IF-None-Match，请求时加上这个请求头

Service Worker

可离线缓存

CDN内容分发网络工作原理与性能机制

将网站内容更靠近用户

就近访问-降低网络延迟，减少物理距离带来的延迟
减轻源站压力-分担流量与请求，静态资源由CDN处理，原站只需应对动态业务登录查询等
优化资源调度-优化资源与带宽利用，CDN服务商海量宽带储备，动态负载均衡分配请求，多协议
提升可用性、容错性-负载均衡；自动容错，节点异常自动切；、全局冗余

图片优化

1、根据场景选择图片格式新一代：AVIF、webP 更高压缩率，更小体积传统格式：JPEG适合照片、PNG适合透明图标或logo 无损压缩 2、响应式图片按需提供最合适的尺寸

深入理解浏览器重排与重绘

渲染关键步骤：

解析HTML-》构建DOM；
解析CSS-》构建CSSOM树；
结合DOM+CSSDOM-》渲染树（render tree）；
layout：计算每个节点的几何信息（尺寸、位置）；
paint：为每个节点绘制颜色、边框、文字等；
composition：多图层合成，输出到屏幕；

渲染过程中的任何一次【布局变化】或【视觉变化】都可能导致重排或重绘

一次重排必会触发一次重绘；
多次写操作，不要一个一个设置，比如body.style.width=200,body.style.height=300px，最好写到一个类中，比如改变一个元素的高度、宽度、margin等；
直接在dom上循环插入每次都会重排，可以使用DocumentFragment，在内存中将节点循环加入fragment中，最后将fragment插入body中；

布局抖动短时间内多次读写交替操作，为了获取最新数据修改为先多次读，再多次写

语义化版本

x.y.z-预发版本

x：主版本 breaking updates 有大量截断式更新，重大变化，比如vue2-》vue3
y：次要版本兼容旧版本，之前功能还可以用，比如新增功能
z：修订版本，一般是bug、优化

前端性能优化笔记

指标