前端性能优化方式，记住它

flyliu
53 阅读2分钟

核心概念

我问了deepseek,如何才能记住性能优化的这些方式,不要让看到时候,知道有,想的时候,全是空 AI说从外到内,从大到小 外就是网络,内就是代码.大就是瓶颈,小就是细节

关键原理

网络传输优化

所以我们先来看,网络优化有哪些方式

  1. 压缩: 启用GZip或者Brotli压缩,减少传输的数据量
  2. http2: 启用http2,支持多路复用,减少请求次数
  3. 缓存: 合理利用浏览器缓存,减少重复请求
  4. 预加载: 利用link标签的preload属性,提前加载资源

资源加载优化

  1. 压缩合并资源:移除无用代码,合并小文件,减少http请求次数
  2. 图片优化: 压缩图片,使用webp格式,懒加载,雪碧图
  3. 按需加载/懒加载:vue或者react实现路由和组件的懒加载
  4. CDN加速

代码优化

  1. 减少重绘重排
  • transform和opacity实现动画
  • 批量修改dom
  1. JavaScript性能
  • 防抖节流
  • 避免长任务: 避免在主线程上执行耗时操作,如动画,计算等
  • 事件委托: 利用事件冒泡,将事件处理函数绑定在父元素上,减少事件处理函数的数量
  • 避免全局变量: 减少全局变量的使用,避免变量污染
  1. 代码分割和Tree Shaking
  • 代码分割: 将代码分割成多个模块,按需加载
  • Tree Shaking: 移除未使用的代码,减少代码体积

渲染优化

  1. 服务端渲染SSR: 利用服务端渲染,将页面渲染成html字符串,返回给浏览器,减少浏览器渲染时间
  2. 骨架屏: 利用骨架屏,在页面加载完成之前,显示一个简单的页面结构,减少用户等待时间
  3. 虚拟列表: 利用虚拟列表,只渲染可见区域的列表项,减少渲染数量,提高渲染性能

移动端专项

  1. 触控优化
  • 为滚动监听事件添加`{passive: true},提升滚动性能
  • 避免使用 touch-actionCSS 属性控制触摸行为
  1. 内存优化
  • 及时释放不再使用的对象,避免内存泄漏
  • 避免使用setInterval和setTimeout等定时器,因为它们会一直运行,直到页面关闭

其实上面这些分类也有点你中有我我中有你

从vue+webpack/vite的角度考虑优化方式的话: 缓存,分割,压缩这些都是和打包过程相关的 路由组件的懒加载这是vue的优化点 虚拟列表也算是vue中的优化点

图表

flowchart TD
    A[前端性能优化] --> B[网络传输优化]
    A --> C[资源加载优化]
    A --> D[代码执行优化]
    A --> E[渲染性能优化]
    A --> F[构建工具优化<br>Webpack/Vite]

    B --> B1["压缩(GZip/Brotli)"]
    B --> B2["HTTP/2/3<br>多路复用"]
    B --> B3["缓存策略<br>强缓存/协商缓存"]
    B --> B4["预加载/预连接<br>preload/preconnect"]

    C --> C1["Tree Shaking & 压缩<br>移除无用代码"]
    C --> C2["代码分割 & 懒加载<br>路由/组件级"]
    C --> C3["图片优化<br>WebP/懒加载/压缩"]
    C --> C4["CDN加速 & 静态资源优化"]

    D --> D1["减少重排与重绘"]
    D --> D2["防抖(Debounce) & 节流(Throttle)"]
    D --> D3["事件委托"]
    D --> D4["Web Workers<br>处理长任务"]

    E --> E1["服务端渲染(SSR)"]
    E --> E2["骨架屏(Skeleton)"]
    E --> E3["虚拟列表<br>Virtual Scroller"]
    E --> E4["优化关键渲染路径"]

    F --> F1["Vite: 依赖预构建<br>optimizeDeps"]
    F --> F2["Vite: Rollup 分包策略<br>manualChunks"]
    F --> F3["Webpack: DLLPlugin<br>拆分第三方库"]
    F --> F4["Webpack: 缓存配置<br>提升构建速度"]
avatar
文章
阅读
粉丝