谈 H5 性能优化

• 减少大小

• 加快返回

• 懒加载

• 提前加载

• 渲染性能

• 其他，比如用户体验

资源大小

• 压缩
• 打包工具压缩JS、CSS等文件
• 图片做适当的压缩，或者使用支持图片参数的图片服务
• 静态服务器开启压缩：如 GZIP、BR(Brotli)

• 资源引入层面
• 通过webpack bundle analyzer 分析依赖
• 把比较大的库替换成同等功能小体积的库，如moment ⇒ dayjs
• commonJS 的库不支持Tree-shaking ，可通过 babel-plugin-import 类似插件自动化引入深层级的文件，避免整体引入

• 拆分 webpack chunk（同时便于缓存）

资源速度

• 使用 dns-prefetch 提前获取 IP 地址

• 部署资源到 CDN

• 使用 HTTP2 进行并行请求；HTTP3

• 缓存资源

提前加载

• 使用 prefetch 提前加载资源

• 使用 APP 离线包

• 预请求

• 使用 SSR（相当于在服务器端渲染 HTML 以及获取动态数据，可以较早地完成这些工作）

懒加载

• 图片懒加载

• 组件懒加载

渲染性能

• 通过Chrome Devtools中css overview检测CSS使用

• 通过 performance 工具分析渲染瓶颈

• 使用 Vue 或 React devtools 分析框架的 rerender 情况。

其他

• 监控

• 骨架屏

• 通过 BFF 等手段合并 API，减少 API 数量。