浏览器调试工具：性能(Performance)面板.md

浏览器调试工具：性能(Performance)面板

目录

• 快捷键
• 页面执行过程

快捷键

调试工具的快捷键：

1. 打开调试工具：Ctrl + Shift + I
2. 切换到下一个面板：Ctrl + ]
3. 切换到上一个面板：Ctrl + [
4. 打开页面中某文件：Ctrl + P
5. 打开页面执行命令：Ctrl + Shift + P
6. 打开调试工具设置：Shift + ?

性能(Performance)面板快捷键：

1. 开始记录(不同时间下执行的内容)：Ctrl + E

2. 开始记录，并刷新当前页面：Ctrl + Shift + E

3. 使用 鼠标拖动或滚轴可以查看不同阶段执行内容，对应的快捷键：

   快捷键	对应效果
   W	放大
   A	向左移动
   S	缩小
   D	向右移动

页面执行过程

页面执行过程的 3 个执行任务：

1. 第1任务：解析(Parse) HTML

2. 第2任务：计算脚本(Evaluate Script)、编译脚本(Compile Script)

3. 第3任务：绘制网页

   绘制过程(缩写字母)	对应含义
   DCL (Dom Content Loaded)	页面加载和解析完成
   FP (First Paint)	首次绘制
   FCP (First Contentful Paint)	首次内容绘制
   LCP (Largest Contentful Paint)	最大内容渲染
   L (onLoad)	页面依赖资源全部加载完毕
   FMP (First Meaningful Paint)	首次有效绘制

   补充说明：不同的网页代码、不同的网页框架，在页面绘制过程中，上述 3 个任务执行的顺序不同，有些是交替进行的。