Performance

Chrome官方Demo

操作方式

• F12，进入Performance界面
• ⚙️中的CPU下拉框可以模拟性能较差的设备
• 点击左上角小圆点开始录制，再次点击结束录制，并显示性能报告

内容含义

• 红条所在的区间表示FPS较低
• 下方的绿、橙、紫条是CPU图表。CPU图表中的各种颜色与最下方的Summary扇形面板颜色一一对应。如果你看到了某个处理占用了大量的时间，那么这可能就是一个可以找到性能瓶颈的线索。
• Frames
  鼠标放在该栏可以看到每个时间点的FPS值
• Main
  展示了主线程运行状况。X轴代表着时间。每个长条代表着一个event。长条越长就代表这个event花费的时间越长。Y轴代表了调用栈（call stack）。在栈里，上面的event调用了下面的event。
  事件条右上角如果带有红色箭头表示可能是该事件引起的性能问题,双击可以看到详细信息，再次点击可以跳转到对应代码位置

Navigation Timing API

Performance

返回一个Performance对象。该对象由High Resolution Time API定义，Navigation Timing API 在此基础上增加了两个属性：timing 和 navigation

performance.timing

//测量感知加载时间
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
console.log("User-perceived page loading time: " + page_load_time);

//计算页面加载所需的总时长：
var perfData = window.performance.timing;
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

//计算请求返回时长：
var connectTime = perfData.responseEnd - perfData.requestStart;

performance.navigation

对象存储了两个属性，它们表示触发页面加载的原因。

• TYPE_NAVIGATE 0
  导航开始于点击链接、或者在用户代理中输入 URL、或者表单提交、或者通过除下表中 TYPE_RELOAD 和 TYPE_BACK_FORWARD 的脚本初始化操作。
• TYPE_RELOAD 1
  通过刷新操作或者 location.reload() 方法导航。
• TYPE_BACK_FORWARD 2
  通过历史遍历操作导航。
• TYPE_UNDEFINED 255
  其他非以上类型的导航。