[!info] related notes

• 相关 MOC: 浏览器开发者工具 MOC, 前端性能优化 MOC
• 关系笔记: Performance 面板

DevTools Performance MOC

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

这张地图覆盖什么

这张地图覆盖 Performance 面板里最重要的读图能力：火焰图、长任务、布局偏移、Web Vitals 和 CPU / Network 节流模拟。

从这里开始

1. 先看 Performance 面板
2. 再看 火焰图
3. 然后补 长任务调试

核心笔记

• 火焰图
• 长任务调试
• Layout Shift 调试
• Web Vitals 调试
• CPU 与 Network Throttling

关系与对比入口

• 浏览器渲染过程
• 长任务优化
• CLS
• 性能指标体系
• 页面卡顿排查路线
• 页面加载性能排查

Related notes

• 浏览器开发者工具 MOC
• 前端性能优化 MOC
• Performance 面板
• 火焰图