前端性能优化

一、加载性能优化

😔 测试腾讯云开发者社区

减少 HTTP 请求

合并文件（CSS/JS 合并）

使用雪碧图（CSS Sprites）

内联小资源（如 Base64 图片或小字体文件）

代码分割与懒加载

路由懒加载：React.lazy + Suspense 或 Vue 异步组件

动态导入：import() 语法按需加载模块

第三方库按需引入（如 Lodash 的 lodash-es）

预加载与预获取

preload：提前加载关键资源（如字体、核心 CSS/JS）

prefetch：预取未来可能需要的资源（如非首屏图片）

服务端优化

CDN 加速：静态资源分发到离用户更近的节点

Gzip/Brotli 压缩：减小传输体积

HTTP/2：多路复用、头部压缩、Server Push

边缘计算：Vercel/Cloudflare Workers 实现就近处理

异步加载脚本

使用 async 或 defer 属性避免渲染阻塞

二、渲染性能优化

减少重排（Reflow）与重绘（Repaint）

使用 transform/opacity 替代 top/left（触发 GPU 加速）

避免强制同步布局（如读取 offsetHeight 后修改样式）

GPU 加速

will-change: transform 或 translateZ(0) 触发独立渲染层

合理使用 CSS 动画代替 JS 动画

图片与媒体优化

懒加载：loading="lazy" 属性或 Intersection Observer API

响应式图片：srcset 和 sizes 适配不同分辨率

使用现代格式：WebP/AVIF（比 JPEG/PNG 小 30%+）

虚拟列表（Virtual List）

仅渲染可视区域内的列表项（如长表格、聊天记录）

防抖与节流

控制高频事件（如 scroll、resize）的执行频率

服务器

alt