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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/NEWSEKAES/article/details/77546102

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

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>

超简单的页面对吧,就像人生写的前几段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. 其他资源为灰色

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页