Chrome页面性能工具(performance，以前的timeline)

来源：互联网发布：怎么申请淘宝中国质造编辑：程序博客网时间：2024/06/07 01:31

Chrome页面性能工具(performance，以前的timeline)——初探

先默默给自己一个例行奖励：写完这篇，我就去看番

1.简单页面

下面先自己写一个简单页面吧，多简单呢，如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Page performance</title></head><style>    ul{        margin: 20px;        padding: 5px;        border: none;    }    li{        min-width: 100px;        text-align: center;        font-size: 25px;        font-family: "Microsoft PhagsPa";        margin: 5px 0;        list-style-type: none;    }</style><body><ul>    <li>1</li>    <li>2</li>    <li>3</li></ul></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

超简单的页面对吧，就像人生写的前几段HTML代码一样吧。嗯，那就怀着这样的想法，接受超巨细节信息的轰炸吧！
预览1

从上到下分别为4个区域
1：具体条，包含录制，刷新页面分析，清除结果等一系列操作
2：overview总览图，高度概括随时间线的变动，包括FPS，CPU，NET
3：火焰图，从不同的角度分析框选区域。例如：Network，Frames, Interactions, Main等
4：总结区域：精确到毫秒级的分析，以及按调用层级，事件分类的整理

注意，在2，3区域里：
1. 灰色的虚线表示一帧，通过两帧之间的绿色区域的运算时间，可以求得当前的FPS（事实上当你鼠标放在绿色条上时会出现类似‘78.8ms ~ 13fps’的字样）;
2. 黄色的虚线会有 ‘FMP at ***ms’ 的字样，经过我查询，暂确定为[ first meaning paint ]，即首次有效绘制；而这条线会紧跟paint之后，并在composite之前。
3. 蓝色的虚线表示DOMContentLoaded事件
4. 红色的虚线表示load事件
5. 绿色的虚线为 first paint事件

在network里面，在network里面，在network里面（重要事件说三遍）：
1. HTML 文件为蓝色。
2. 脚本为黄色。
3. 样式表为紫色。
4. 媒体文件为绿色。
5. 其他资源为灰色。

阅读全文

0 0