前端性能优化汇总

凉拌西红柿
53 阅读5分钟

1. 性能优化关联项

image.png 汇总了场景前端性能优化的问题,并进行了相关问题的扩展,相关大纲如下:

  • 加载优化(让页面更快出现)
    • 常见场景题/问题
      • SPA首屏加载慢怎么解决?
      • 后端一次性返回10万条数据如何处理?
      • 图片太多影响加载速度如何优化?
      • 浏览器缓存机制是怎么样的?
    • 核心优化逻辑和关联策略
      • 网络层面
        • CDN加速
        • Gzip压缩
        • HTTP缓存(强缓存/协商缓存)
        • HTTP/2升级
      • 资源层面
        • 路由懒加载
        • 代码拆分(Code Splitting)
        • Tree Shaking
        • 图片优化(WebP格式,压缩,响应式图片srcset)
        • 雪碧图
      • 数据层面
        • 分页加载
        • 虚拟滚动/列表
        • 数据分片(时间分片)
  • 渲染与运行时优化(让页面操作更流畅)
    • 常见场景题/问题
      • 什么是重排和重绘?如何避免?
      • 如何避免不必要的渲染(如React/vue)?
      • 长列表滚动卡顿怎么办?
      • v-if和v-for为什么不能一起使用?
    • 核心优化逻辑和关联策略
      • 渲染流程
        • 理解关键渲染路径,将CSS放头部,JS放底部
      • JavaScript执行
        • 防抖(Debounce)与节流(Throttle)
        • 避免长任务
        • 使用requestAnimationFrame优化动画
      • 框架层面
        • React的React.memo,useMemo,useCallback
        • Vue的v-once
        • 合理使用computed
        • 避免不必要的数据响应式(Object.freeze)
      • 样式与DOM
        • 减少DOM操作
        • 使用CSS3硬件加速(transform:translated3d())
        • 避免复杂CSS选择器
  • 代码与架构优化(从根源上提升质量)
    • 常见场景题/问题
      • 如何写一个防抖/节流函数?
      • 如何预防内存泄漏?
      • 如何对项目进行重构?
      • 如何进行权限设计?
    • 核心优化逻辑和关联策略
      • 编码规范
        • 模块化,组件化
        • 使用事件委托
        • 避免内存泄漏(清除定时器,解绑全局事件)
      • 工程化
        • Webpack配置优化(如happyPack)
        • 接入CI/CD
        • 代码规范(ESLint)
      • 架构设计
        • 选择合适的存储(IndexedDB缓存结构化数据)
        • 设计可扩展的API
        • 引入SSR/静态化
  • 服务器与网络优化(打通最后一公里)
    • 常见场景题/问题
      • CDN是什么?原理是什么?
      • cookie是如何携带的?如何优化?
      • HTTP/2有哪些优势?
    • 核心优化逻辑和关联策略
      • 传输协议
        • 使用CDN分发静态资源
        • 配置keep-alive
        • 利用HTTP/2多路复用
      • 服务端配置
        • 启用Gzip压缩
        • 配置Etag
        • 设置缓存过期的时间
      • 数据交换
        • 减少Cookie大小,静态资源使用无Cookie域名
        • 接口请求合并
        • 使用GET for AJAX(使用时)

在开始前端性能优化工作之前,首先要做到的第一点,就是要先确认问题的原因.
举个例子,现在要解决一个性能极差的项目,如果项目功能较多,在碰上代码不熟悉,根本无从下手进行更改.
所以在准备优化项目之前,要循序一个核心逻辑:先排查定位,在分级优化,最后验证复盘.
遵循从易到难,从前端到后端的排查顺序,优先解决影响最大的性能问题,用量化工具衡量优化效果,从而形成完整的性能优化闭环.毕竟有数据有真相,也好拿出来证明自己的能力.

2. 整体优化思路

2.1 建立衡量标准,明确优化目标

  • 确定核心指标: 加载指标(FCP,LCP,TTI),交互指标(FID,TBT),视觉稳定性指标(CLS).相关信息可以参考下Google的Core Web Vitals.可以大概的参考下这个网站:Web Vitals
  • 设定优化目标: 比如"首屏时间LCP从5.2s优化到2.5s以内"等.
  • 选型工具: 确定工具,比如Lighthouse,Chrome DevTools,WebPageTest等进行统一测量,保证前后对比的一致性.

image.png 前端性能核心标准含义可参考(前端性能核心标准含义)

2.2 全面体检,定位瓶颈

  • 使用Lighthouse生成整体报告,获取关键指标和优化建议.
  • 用Chrome DevTools的Performance面板记录页面加载或者是交互的过程,分析长任务,渲染瓶颈,JS执行时间.
  • 用Network面板查看资源加载时序,找出阻塞渲染的资源,重复请求或者大体积文件.
  • 检查代码,比如是否有内存泄漏(Memory面板),是否合理使用缓存,是否存在不必要的渲染.
  • 工具配合使用,从网络,渲染,代码三个方面定位问题.

推荐一个如何用工具定位性能瓶颈的文档,里面有一个简单举例说明:如何用工具定位性能瓶颈

2.3 制定优化方案,分层解决问题

  • 加载: 减少请求数量,压缩资源大小,缓存,合理使用懒加载,CDN,提取预加载关键资源.
  • 运行: 优化JS执行(长任务拆分),减少页面重排重绘,使用虚拟列表,防抖节流.
  • 构建: 代码分割,Tree Shaking,Scope Hoistring,优化第三方库的引入.
  • 架构: SSR/静态化,服务端优化,缓存策略,HTTP/2.

2.4 分步实施,从点到面

  • 按照优先级排序,先解决阻塞渲染的关键问题(如未优化的图片,未压缩的CSS/JS),然后再优化运行时性能.
  • 每次只改一个点,并立即测量并验证结果,避免同时多个改动,无法去评估每个优化的收益.

2.5 持续监控,防止回退

  • 引入性能监控工具(如Lighthouse CI,Web Vitals的JS库)到CI/CD流程.
  • 设置性能预算,超过阈值进行告警或构建失败.
avatar
文章
阅读
粉丝