时间线参考

时间线模式可以显示记录触发的所有事件

常见的时间线事件属性

1 .Aggregated time:对于带嵌套事件的事件，每个类别的事件所用的时间
2 .Call Stack:对于带子事件的事件，每个类别的事件所用的时间
3 .CPU time:记录的事件所花的cpu时间
4 .Details:有关事件的其他详细信息
5 .Duration:事件及其所有子事件完成所需的时间，时间戳是事件发生的时间。相对于记录开始的时间
6 .sleftime:时间花费的事件，不包括子事件
7 .Used heap Size:记录事件时使用的内存大小，以及上次采样依赖以使用堆大小的增减变化

loading事件

1 .Parse HTML:Chrome执行HTML解析算法
2 .Finish Loading 网络请求已经完成
3 .Recieve Data 请求的数据已被接收，存在一个或者多个receive data事件
4 .Recieve Response 请求的初始HTTP响应
5 .Send Request 网络请求已被发送
6 .属性

1 .resource 请求资源的地址
2 .review 请求资源的预览 仅图片
3 .request method 用于请求的http方法
4 .status code http响应代码
5 .MIME type 请求的资源的mime类型
6 .Encoded Data Length 请求的资源的长度

scripting事件

1 .Animation Frame Fired 预定的动画帧被触发，其回调处理程序被调用
2 .Cancel Animation Frame 预定的动画帧被取消
3 .GC event 发生垃圾回收
4 .DOMContentLoaded 浏览器触发，页面的所有DOM内容都已经被加载和解析，触发这个事件
5 .Evaluate Script 脚本已被评估
6 .Event js事件
7 .Function call 发生*js函数调用，只有浏览器进入js引擎才会出现
8 .Install Timer 创建了定时器
9 .request Animation Frame 调用已预订的一个新帧
10 .Remove Timer 之前创建的定时器已被移除
11 .time 一个脚本调用了 console.time()
12 .time end 一个脚本调用了console.timeEnd()
13 .timer fired 使用setTimerval 创建的定时器已被触发
14 .XHR Ready State Change xmlHttpRequest的状态发生变化
15 .xhr load xmlhtrprequest已结束加载
16 .事件属性

1 .timer id 定时器id
2 .timeout 定时器指定的超时
3 .repeats 指定定时器是否重复的布尔值
4 .Function call 已调用一个函数

rendering 事件

1 .invalidate layout 页面布局被dom更改声明为无效
2 .Layout 页面布局已被执行
3 .Recalculate style chrome重新计算了元素样式
4 .Scroll 嵌套视图的内容被滚动
5 .属性

1 .layout invalidated 对于layout记录，导致布局失效的代码的堆叠追踪
2 .Nodes that need layout 对于layout记录，被标记为需要重新布局启动前布局的节点的数量
3 .layout tree size 对于布局记录，重新布局根目录下节点的总数
4 .layout scope 
5 .elements affected 对于recalculate样式记录，受样式重新计算影响的元素的数量
6 .Styles invalidated 对于Recalculate 样式记录，导致样式失效的代码的追踪堆叠

Painting事件

1 .Composite Layers chrome 的渲染引擎合成了图像层
2 .image decode一个图像资源被解码
3 .image resize 一个图像的大小相对于其原生尺寸发生了变化
4 .paint 合成的图层被绘制到显示画面的一个区域。讲鼠标悬停到记录上会突出显示已被更新的显示画面区域
5 .属性

1 .Location 绘制矩形的x,y坐标
2 .dimensions 已绘制区域的高度和宽度