本文是学习&研究笔记，若有错误还请指正！

相关文章

当页面卡顿、慢时可以使用Performance来分析问题原因所在。

面板

Performance，即运行时性能表现，面板如下：

使用

使用隐身窗口，打开项目（比如在线测试DEMO）
点击录制按钮（黑点），开始记录此段时间内页面运行性能
点击stop停止

面板功能分析

如下划分成4个区域

区域1：控制面板

Screenshots 截图：默认勾选，每一帧都会截图。关闭后区域二下面部分会去除（下图红框标记那里）
通过在时间线上移动观察页面的变化
Memory 内存消耗记录：勾选后可以看到各种内存消耗曲线

【以下配置都是用来模拟手机、慢网络下使用的，无需可以跳过】

Disable javaScript samples 关闭javaScript样本：减少在手机运行时的开销，模拟手机运行时勾选
Network 网络模拟：可以模拟在3G,4G等网络条件下运行页面
Enable advanced paint instrumentation(slow) 记录渲染事件的细节：选择frames中的一块，可以看到区域四多了个Layers
CPU CPU限制：主要为了模拟底CPU下运行性能

区域2：概览面板（overview）

1 . FPS

FPS：每秒帧数，对于动画而言标准是保持在60FPS

☆ 优化

绿色越高越好，出现红色则表示FPS低（这就是你为啥觉得页面卡顿了），你可以在区域三Frames中看到具体的FPS值（见下面第二图）。

☆ 测试

多点几次DEMO的 ADD 10 按钮，直到感觉画面不流畅为止，开启分析记录，如下

点击方块可以看到57.1ms内共有18fps

2 . CPU

CPU: 处理各个任务花费的时间，选择一段CPU统计可以在区域四的Summary看到统计表格

Scripting 脚本
Rendering 渲染
Painting 绘制
Loading 加载
ldle 闲置

☆ 优化

比重占的大的颜色可能有问题，如上图中的紫色部分Rendering，表示渲染耗费时间久

3 . NET

NET：各个请求花费时间这块可以再network里看，更清晰些

区域3：线程面板

1 . Frames

Frames：帧线程，鼠标悬浮绿色块可以看到fps

2. Main

Main：主线程，负责执行Javascript, 解析HTML/CSS, 完成绘制。可以看到主线程调用栈和耗时情况，每个长条都是一个事件，悬浮可以看到耗时和事件名

x轴指时间最上面的第一条就是事件触发的地方，直到结束，这条线是最长的
y轴指调用栈上面的event调用了下面的子event，越到下面数量越少（瀑布）

颜色代表各个事件类型，以下列出一些常见的事件

3. Raster

Raster：Raster线程，负责完成某个layer或者某些块(tile)的绘制。

区域4：统计面板

统计面板选择因点击选择不同的目标统计的内容不同

Summary 统计图：展示各个事件阶段耗费的时间
Bottom-Up 排序：可以看到各个事件消耗时间排序 (1)self-time 指除去子事件这个事件本身消耗的时间 (2)total-time 这个事件从开始到结束消耗的时间（包含子事件）
Call Tree 调用栈：Main选择一个事件，可以看到整个事件的调用栈（从最顶层到最底层，而不是只有当前事件）
Event Log 事件日志 (1) 多了个start time，指事件在多少毫秒开始触发的 (2) 右边有事件描述信息

开启实时监控

在控制ctrl+shift+p打开命令行
搜索Show Rendering
勾选FPS Meter

扩展：浏览器渲染过程

参考文档

https://segmentfault.com/a/1190000011516068#articleHeader0

http://www.bubuko.com/infodetail-2139139.html

http://www.xue63.com/toutiaojy/20180809A1URC200.html

http://www.css88.com/doc/chrome-devtools/rendering-tools/

https://www.cnblogs.com/hellotyc/p/7111518.html

更多内容点这里：官方文档