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. 其他资源为灰色。