本文会忽略一些过于基础的知识和细节
持续更新，欢迎关注~2019-9-26 15:08:58
当页面卡顿、慢时可以使用Performance来分析问题
Performance 面板如下划分成4个区域，可以使用在线测试DEMO进行测试
区域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测试
多点几次DEMO的 ADD 10 按钮，直到感觉画面不流畅为止，开启分析记录，如下
点击方块可以看到57.1ms内共有18fps
2 . CPU
CPU: 处理各个任务花费的时间，选择一段CPU统计可以在区域四的Summary看到统计表格
-
Scripting脚本 -
Rendering渲染 -
Painting绘制 -
Loading加载 -
ldle闲置
☆ 优化
比重占的大的颜色可能有问题，如上图中的紫色部分Rendering，表示渲染耗费时间久
3 . NET
NET：各个请求花费时间
在下面的network里查看
注：各颜色表示的意义可以在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
layers 层
页面是分层的，可以在
-
More tools -> Layers查看当前页面的层级分布 -
Performance -> frame选中一个块，然后在最下面的Layers页里查看
一些概念
FP 首次绘制，浏览器第一次显示内容
FCP 首次内容绘制 ，浏览器第一次显示来自DOM的内容
FMP 首次重要绘制，在网页上，几乎总有一部分内容比其他部分更重要。 如果页面最重要的部分能迅速加载，用户可能不会注意到其余部分是否加载。【这部分内容往往只有开发者清楚，浏览器无法给出指标】
TTI 可交互时间
DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后（无需等待样式表、图像和子框架的完成加载）
load 需等待样式表、图像和子框架的完成加载
扩展：浏览器渲染过程
参考文档
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
https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/