页面卡顿分析
踏歌行 2023-12-23
浏览器
阅读量：
# 可能的原因
# 长时间占用js线程
- 浏览器包括js线程和GUI线程，而二者是互斥的
# 内存占用过高
- 内存泄漏：
- 全局变量引起的内存泄露
- 定时器引起内存泄露
- dom删除时没有解绑事件
- 循环引用
# 渲染不及时，页面掉帧
- 网络请求太多
- dom节点太多，渲染的比较慢
# Chrome DevTools 工具
# Performance 性能
官方文档-分析运行时性能 (opens new window)
- FPS
- FPS 上方出现红色条时就意味着出现长时间帧（帧率下降）
- CPU
- CPU 中面积图如果充满色彩就表示该时间段 CPU 已达到极限
- NET网络
- 深蓝色表示存在高优先级的资源请求的时间段，浅蓝色表示存在低优先级的资源请求的时间段
- HEAP 堆
- 与开启 Memory 后的 JS heap 线形图 可以录制查看帧数丢弃情况
- 火焰图
- 查看长任务：超过50ms 的任务被称之为长任务，会被红色角标标记。
- 搜索框：按 Command+F (Mac) 或 Control+F（Windows、Linux）打开底部的搜索框，可对火焰图中的活动进行搜索，支持正则。
- 摘要
- 摘要，展示点选活动或某时间段所有活动的各阶段时间耗时。
- Bottom-up 自下而上
- 通常用于查看选择的时间段中直接花费时间最多的活动。
- Call tree 调用树
- 通常用于查看选择的时间段中导致最多耗时的根活动。
- Event log 事件日志
- 用于按照活动的发生顺序查看活动。
# Performance insights 性能数据分析
官方文档-效果数据分析 (opens new window)
实验性质的工具，优点是简单易用，信息精简
- 局部偏移 Cumulative Layout Shift (CLS)
- 定量计算出用户遇到意料之外的布局偏移的频率
- 网络
- Renderer(mmain)
- Compositor(Main)
# Lighthouse
掘金-看懂 Lighthouse 中 Performance 核心指标 (opens new window) 官方文档-Lighthouse (opens new window)
模式：
- 导航
- 时间跨度
- 快照
分析
- 性能
- First Contentful Paint
- Largest Contentful Paint
- Total Blocking Time
- Cumulative Layout Shift
- Speed Index
- 无障碍
- 最佳做法
- https
- CSP 内容安全政策
- PWA 渐进式Web应用
Lighthouse诊断信息