# Chrome Developer Tools

# 分析面板介绍

Network : 页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议(http1/http2/quic...)、资源类型、资源大小、资源时间线等情况

Performance : 页面各项性能指标的火焰图，这里能看到白屏时间、FPS、资源加载时间线、longtask、内存变化曲线等等信息

Memory : 可以记录某个时刻的页面内存情况，一般用于分析内存泄露

JavaScript Profiler : 可以记录函数的耗时情况，方便找出耗时较多的函数

Layers : 展示页面中的分层情况

# 主题设置

修改为 Dark 主题，然后关闭窗口重新打开，黑色主题就生效。

# 增加自定义设备

# Performance 介绍

performance 面板有如下四个窗格：

1. controls。开始记录，停止记录和配置记录期间捕获的信息
2. overview。页面性能的高级汇总
3. 火焰图。 CPU 堆叠追踪的可视化
4. 统计汇总。以图表的形式汇总数据

Overview  窗格包含以下三个图表：

1. FPS：每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿。
2. CPU：CPU 资源。此面积图指示消耗 CPU 资源的事件类型
3. NET：每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）

# 概览图

• HTML 文件为蓝色
• 脚本为黄色
• 样式表为紫色
• 媒体文件为绿色
• 其他资源为灰色

# 按钮组

上图，从左到右分别代表的是：

1. 手动开始记录，开始后需要手动结束
2. 自动重启页面，并记录整个页面加载的过程。这个是最常用的，一般大概分析页面性能的时候都是点这个就够了
3. 清除性能录制的记录
4. 上传页面性能录制的数据
5. 下载页面性能录制的数据
6. 选择要展示的性能记录。你可能进行了多次分析，这里可以切换去看每次的结果
7. 是否捕捉页面加载过程的截图，这个一般都要勾选
8. 是否记录内存变化，这个一般都要勾选
9. 垃圾回收，点击了即进行一次垃圾回收

# 火焰图介绍

在火焰图上看到一到三条垂直的虚线：

• 蓝线代表 DOMContentLoaded 事件
• 绿线代表首次绘制的时间
• 红线代表 load 事件

在火焰图中选择事件时，Details 窗格会显示与事件相关的其他信息。

# 问题分析

JavaScript 计算，特别是会触发大量视觉变化的计算会降低应用性能。不要让时机不当或长时间运行的 JavaScript 影响用户交互。

下面是一些常见 JavaScript 问题

1. 大开销输入处理程序影响响应或动画

让浏览器尽可能晚地处理触摸和滚动，或者绑定侦听

2. 时机不当的 JavaScript 影响响应、动画、加载

使用 requestAnimationFrame、使 DOM 操作遍布各个帧、使用网络工作线程

3. 长时间运行的 JavaScript 影响响应

将纯粹的计算工作转移到 web worker 中。如果需要 DOM 访问权限，配合使用 requestAnimationFrame