前端性能优化相关

请求阶段

  • http各级缓存
  • CDN加速
  • http2
  • 多域名提升并发
  • 减少请求
    • 雪碧图
  • 减少cookie大小

返回阶段

  • gzip压缩

浏览器处理

  • 首屏优化
    • js位置、减少阻塞
    • 服务端渲染
    • 分页
    • WPA、webworker缓存
    • dom内容缓存
  • 图片相关
    • 响应式图片
    • 字体图标
    • 图片异步加载
    • web格式图片
    • 占位减少跳动
  • 减少无用dom
  • 代码压缩(信息量0,现有框架都会做)
  • 预加载prefetch preload

js相关

  • 合理减少变量访问层级
  • 计算结果缓存
  • 原生方法
  • 及时销毁不用的对象和事件
  • 复杂逻辑优化:空间换时间,O(n)的空间复杂度,有时可用空间变为O(1)
  • 减少重排、重绘
    • 合理使用visibility
    • dom操作使用fregment、虚拟dom、dom离线操作
    • class代替style修改
    • gpu动画
    • 等,网上搜下应该有很多
  • 减少事件绑定(事件委托)
  • 节流、防抖

css相关

  • 样式复用
  • 减少样式层级
  • gpu加速
  • 减少css表达式使用

框架相关(主要是Vue相关)

  • 编译优化
    • external外部包
    • 懒加载
    • 编译缓存(自带)
    • 减少alise
    • 排除不需要参与编译的文件夹
    • happypack多线程编译(历史),新版webpack默认有多线程
    • vite开发过程启动加速
  • 性能优化
    • v-for加key
    • v-if v-show
    • keep-alive
    • 减少组件实例
    • functional组件,降低开销
    • bind once
    • 减少非必要的data数据(减少getter和setter绑定)
    • 代码复用:合理使用mixin、composition-api
    • 前端微服务
  • 上下游
    • 产品:内容分页、骨架屏、Loading展示给用户预期和反馈
    • 业务:接口合并、Promise.all并发请求

思想

  • 各级缓存、空间换时间