如果一个H5很慢,如何排查

查看前端性能指标

• FCP:
  • first contentful paint
  • 第一次有内容的渲染
• LCP:
  • largest contentfull paint
  • 页面最重要的内容已经渲染完成了
• FP:
  • first paint,
  • 表示渲染出第一个像素点
• FMP:
  • first meaningful paint
  • 第一次有意义的渲染
  • 已弃用, 改用LCP
  • 为什么弃用: 没有一个确定的监测标准

Chrome devTools (按f12)

Performance

• 可以查看看性能指标FCP LCP
• 并有网页快照

NetWork

• 查看各个资源加载时间

lightHouse

• 非常流行的第三方性能评测工具
• 支持移动端和pc端

解决方案

如果加载慢

• FCP 时间太长, 说明加载慢
• 优化服务器, 使用CND
• 路由懒加载, 大组件异步加载(减少主包体积)
• 优化http缓存策略

如果渲染慢

• LCP 时间太长, 说明渲染慢
• 优化服务端接口(如: ajax获取数据慢)
• 服务端渲染SSR
• 优化前端组件内部逻辑
  • 时间切片
  • 分帧渲染
  • 虚拟列表