前端性能优化的总结表：
| 优化分类 | 优化方法 | 说明 |
|---|---|---|
| 资源加载优化 | 压缩文件 | 压缩HTML、CSS、JS文件，减少文件大小 |
| 使用CDN | 使用内容分发网络(CDN)加速资源加载 | |
| 懒加载和预加载 | 对非首屏资源进行懒加载，关键资源使用<link rel="preload">预加载 | |
| 减少HTTP请求 | 合并文件，使用雪碧图，减少重定向 | |
| 使用HTTP/2 | 多路复用和头部压缩，加快资源并发加载 | |
| JavaScript优化 | 减少DOM操作 | 缓存DOM查询结果，使用DocumentFragment减少重排和重绘 |
| 代码拆分和按需加载 | 使用代码拆分和import()按需加载，减少初次加载体积 | |
| 避免内存泄漏 | 清理未使用的事件监听器，使用WeakMap/WeakSet储存短期引用 | |
| 避免阻塞渲染的JS | 使用async/defer加载非关键JS文件，避免阻塞页面加载 | |
| 优化事件监听 | 使用事件委托，结合throttle或debounce减少高频事件调用 | |
| CSS优化 | 避免CSS阻塞渲染 | 将关键CSS放在<head>中，非关键CSS异步加载 |
| 减少CSS嵌套层级 | 优化CSS选择器层级，提升匹配速度 | |
| 使用CSS动画 | 尽量使用transform和opacity的CSS动画，避免频繁操作引发重排的属性 | |
| 去除未使用的CSS | 使用PurgeCSS等工具清理未使用的CSS代码 | |
| 图片和字体优化 | 使用合适的图片格式 | 优先使用WebP、AVIF等现代图片格式，减少文件体积 |
| 响应式图片加载 | 使用srcset和<picture>标签加载不同分辨率的图片 | |
| 字体加载优化 | 加载必要字体样式，使用display: swap确保字体加载前有替代字体 | |
| 减少渲染和重排 | 避免频繁重排和重绘 | 批量更新样式，合并DOM操作 |
| 使用虚拟DOM | 使用虚拟DOM库（如React）减少实际DOM操作次数，提高渲染效率 | |
| 启用硬件加速 | 使用transform: translateZ(0);等开启硬件加速，提升动画性能 | |
| 提高页面首屏加载速度 | SSR（服务端渲染） | 服务端生成HTML，提高首次渲染速度（适用于动态内容） |
| 预渲染（Prerendering） | 生成静态HTML文件，提升访问速度（适用于静态内容） | |
| 骨架屏（Skeleton Screen） | 使用骨架屏减少用户等待感（适用于数据加载较多页面） | |
| 缓存策略 | HTTP缓存 | 使用Cache-Control、ETag等头部进行静态资源缓存 |
| 本地存储 | 使用localStorage、sessionStorage或IndexedDB缓存用户数据 | |
| Service Worker | 实现离线缓存，支持离线访问页面内容 | |
| 监控与分析 | 性能监控工具 | 使用Lighthouse、PageSpeed Insights等工具分析性能 |
| 用户体验分析 | 使用Google Analytics、Sentry等监测用户交互、报错信息、加载时间 |
