谈 H5 性能优化
🌐

谈 H5 性能优化

Tags
前端
Published
March 18, 2023
Author
前端性能优化是一个老生常谈的问题了,最近面试也经常遇到这个问题
本文主要也是提供一个自己回答此类问题的大纲
 
首先,此类问题可以分为几种大致的思路,下面也围绕这几点做一些内容的扩充:
  • 减少大小
  • 加快返回
  • 懒加载
  • 提前加载
  • 渲染性能
  • 其他,比如用户体验
 

资源大小

  • 压缩
    • 打包工具压缩JSCSS等文件
    • 图片做适当的压缩,或者使用支持图片参数的图片服务
    • 静态服务器开启压缩:如 GZIPBR(Brotli)
  • 资源引入层面
    • 通过webpack bundle analyzer 分析依赖
    • 把比较大的库替换成同等功能小体积的库,如momentdayjs
    • commonJS 的库不支持Tree-shaking ,可通过 babel-plugin-import 类似插件自动化引入深层级的文件,避免整体引入
  • 拆分 webpack chunk(同时便于缓存)

资源速度

  • 使用 dns-prefetch 提前获取 IP 地址
  • 部署资源到 CDN
  • 使用 HTTP2 进行并行请求;HTTP3
  • 缓存资源

提前加载

  • 使用 prefetch 提前加载资源
  • 使用 APP 离线包
  • 预请求
  • 使用 SSR(相当于在服务器端渲染 HTML 以及获取动态数据,可以较早地完成这些工作)

懒加载

  • 图片懒加载
  • 组件懒加载

渲染性能

  • 通过Chrome Devtoolscss overview检测CSS使用
  • 通过 performance 工具分析渲染瓶颈
  • 使用 VueReact devtools 分析框架的 rerender 情况。

其他

  • 监控
  • 骨架屏
  • 通过 BFF 等手段合并 API,减少 API 数量。