性能采集

性能采集指标：

• 白屏时间 responseEnd - fetchStart

时机	含义
fetchStart	发起 HTTP 请求的时间戳，这个时刻在检查应用缓存时间之前。
responseEnd	浏览器从服务器、缓存或本地资源接收响应的最后一个字节或连接被关闭时的时间戳。比用户真正感知到的白屏时间要长。

• 首屏时间 loadEventStart - fetchStart

时机	含义
loadEventStart	load事件触发的时间戳
DOMContentLoaded	浏览器已经加载了 html，dom 树已经构建完毕，img和样式表等外部资源可能并没有下载完毕
load	浏览器已经加载了所有的资源

• 资源加载耗时 loadEventStart-domContentLoadedEventEnd

可以特指为图片， iframe 加载耗时。

时机	含义
domContentLoadedEventEnd	同步脚本执行完毕

• 可交互事件 domInteractive - fetchStart

domContentLoadedEventEnd 之前的一点时间，相差不超过 1ms，可以认为用户可以划动页面，进行点击输入等操作。

业界标准

• FCP First Contentful Paint 首次内容渲染时间

performance.getEntriesByType('paint')，取第二个pain的时间，或者通过Mutation Observer观察到首次节点变动的时间。

• FMP First Meaningful Paint 首次有意义的渲染帧。

从页面加载开始，到大部分或者主要内容已经在首屏上渲染的时间点。目前无统一标准。

• LCP Largest Contentful Paint 最大内容绘制时间。

在视窗内，最大的内容元素被渲染的时间。

• FID First Input Delay 首次输入延迟。

测量用户首次与您的站点交互时的时间（即当他们单击链接/点击按钮/使用自定义的JavaScript驱动控件时）到浏览器实际能够回应这种互动的时间。

• CLS Cumulative Layout Shift 累计布局偏移

它是用来衡量视觉界面稳定性的一个指标。

• SI Speed Index（SI）是用来衡量页面可见内容填充快慢的指标。

计算过程使用是开源工具 speedline，speedline 通过对页面进行视频录制，并统计首帧与最后一帧变化的时间差来计算 speed Index 的值。

• TTI Time To Interactive，可交互时间。

指的是应用在视觉上都已渲染出了，完全可以响应用户的输入了。是衡量应用加载所需时间并能够快速响应用户交互的指标

前端性能优化之谈谈通用性能指标及上报策略
当我们谈前端性能的时候，我们谈的是什么

判断页面接口耗时

var aipList = performance.getEntriesByType('resource')

var apiFiltered = aipList.filter(item => {
  return item.initiatorType === "xmlhttprequest" && /i.magazine.heytapmobi.com/g.test(item.name)
})