关于前端的性能优化
性能优化主要涵盖了以下四个方面：
(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)
减少网络请求：合并文件、使用 CDN、启用缓存。
优化资源加载：代码分割、懒加载、图片压缩。
提升渲染性能：减少重绘回流、防抖节流、使用 Web Worker。
监控和迭代：定期使用工具检测性能，持续优化。
一、网络层面优化
- 减少 HTTP 请求
合并文件：将多个 CSS 或 JavaScript 文件合并成一个，减少请求次数。
使用 CSS Sprites：将多个小图标合并成一张大图，通过 CSS background-position 展示不同部分。
内联关键 CSS：将首屏渲染所需的关键 CSS 直接内联在 HTML 中，避免额外的请求。 - 优化资源加载
启用 HTTP/2 或 HTTP/3：支持多路复用，减少连接建立开销。
使用 CDN：将静态资源部署到 CDN 节点，利用边缘计算加速资源访问。
资源压缩：对 HTML、CSS、JavaScript 进行压缩，减少文件体积。
启用 Gzip/Brotli 压缩：在服务器端启用 Gzip 或 Brotli 压缩，减少传输数据量。 - 缓存策略
强缓存：通过 Cache-Control 和 Expires 头设置资源缓存时间。
协商缓存：通过 Last-Modified 和 ETag 头判断资源是否更新。
Service Worker：使用 Service Worker 缓存资源，实现离线访问和缓存控制。
二、资源加载优化
- 代码层面优化
代码分割（Code Splitting）：使用 Webpack 等工具将代码按路由或功能分割成多个 chunk，按需加载。
懒加载（Lazy Loading）：对图片、视频等资源进行懒加载，仅在进入视口时加载。
预加载（Preload）和预连接（Preconnect）：通过 和 提前加载关键资源或建立连接。