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

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

1.简单页面

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page performancetitle>
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>1li>
    <li>2li>
    <li>3li>
ul>
body>
html>

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

从上到下分别为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. 其他资源为灰色

你可能感兴趣的:(Chrome开发工具)