前端性能优化的N种方案

前端性能优化主要通过减少资源加载时间、提升渲染效率、优化代码结构等方式实现，以下是关键方案：

1. 图片优化

• 采用webp/avif格式替代JPEG/PNG，压缩图片体积；
• 使用懒加载技术延迟首屏图片加载；
• CDN加速，通过CDN分发静态资源，提升全球用户访问速度；

2. 接口优化

• 尽量减少首屏接口请求数量
• 控制台找出耗时较长的接口，通知后端人员进行优化
• 配置项接口进行前端本地缓存

3. 文件包优化

• 将多个CSS或JS文件合并为一个，减少HTTP请求数量
• 压缩HTML/CSS/JS文件，减少传输体积

4. 代码优化

• 减少重排和重绘；

  • 当页面中某个元素的外观（如颜色、背景、边框等）发生变化，但位置和大小没有改变时，浏览器会触发重绘（Repaint）。

  • 当页面中元素的几何属性（位置、大小、结构）发生变化时，浏览器需要重新计算布局，这个过程叫重排（Reflow）或回流。

  • 重排一定会引起重绘，但重绘不一定会引起重排

    引起重排的常见操作：

    1. 添加或删除可见的 DOM 元素；
    2. 元素尺寸或位置变化；
    3. 浏览器窗口尺寸变化；
    4. 改变字体大小；
    5. 查询布局信息（如 offsetTop、clientHeight、getComputedStyle() 等）。

持续更新中。。。。