前端性能优化---最终版

影响前端性能的点

• 网络延迟
• 资源过大（引入第三方库过大，）
• 异常（代码运行异常，错误边界）

解决网络延迟

• cdn【内容分发】：网站的静态资源（图片、视频、CSS、JS小文件等）
• preload
• prerender

解决资源太大

• 分包 chunk
• 懒加载
• 公共资源
• 缓存（强缓存，协商缓存，策略缓存service-worker）
• 服务端渲染
• pwa

指标衡量

• FP
• FCP 浏览器的API（Performance）可以计算
• FMP：Mutation Observer，监听dom变化
• LCP

性能监听，上报代码

• 性能采集
  • Performance
  • Mutation Observer
• 用户行为采集
  • 无痕埋点
  • 手动埋点
  • 可视化埋点
• 异常采集
  • React 错误边界
  • 异常捕获 指标衡量 webvital 性能采集截屏或录像 rrweb

Web Vitals

加载过程的五大阶段

• 1. 网络响应阶段
• 2.首次渲染阶段
• 3.内容加载阶段
• 4.用户交互阶段
• 5.页面稳定阶段

Web Vitals指标按时间顺序梳理

指标采集实际方式

性能指标监控---PerformanceObserver

异常指标

• 代码运行异常
• Promise reject异常
• 请求异常
• 资源加载异常

具体优化细节

• 优化图片：推荐Webp格式
• 组件按需加载：React. suspense + React.lazy
• 延迟加载：滚动加载、可视区内容渲染
• tree-shaking:前提条件-- ESM
• 精简第三方库
• 缓存
• 字体压缩

具体实现进阶版

• 预加载：preload
• 加载关键css，怎么提取关键css，webpack-css-extra-plugin
• HTTP/2
• JS 延迟加载：defer async
• 预渲染 prerender

前端团队，如何落实优化工作，代码管理，落实管理的

juejin.cn/post/748295…

github.com/L-excellenc…

• 指标设计
• 采集
• 上报 图片 xhr kafka削峰 Flink数据
• 数据清洗汇总
• 数据统计分析
• 可视化

CDN的基本工作原理

（1）内容分发：CDN服务器将网站或应用的内容（如HTML、CSS、JavaScript文件、图片、视频等）缓存到各地的边缘服务器上。

（2）提供访问路由：当用户请求访问网站时，CDN系统通过智能DNS（域名系统）解析或HTTP重定向等机制，将用户的请求引导到距离用户最近且负载较低的CDN节点上。

（3）缓存加速：因为内容已被缓存到CDN节点，用户的请求可以直接从最近的CDN节点获取数据，而不需要回源服务器，从而减少了数据传输的距离和时间。

（4）负载均衡：CDN系统能够自动检测各节点的健康状况和负载情况，确保流量能够均匀分配到各个节点，避免单一节点过载。

（5）安全性增强：CDN还可以提供DDoS防护、HTTPS加速等安全功能，保护网站和应用免受恶意攻击。