首屏时间计算

首屏时间是什么？

首屏时间是指用户打开网站开始,到浏览器首屏内容渲染完成的时间,dom处于比较稳定的阶段

怎么计算？

方法1 利用DOMContentLoaded

方法1. 利用DOMContentLoaded但该缺陷也很严重
先说使用

window.addEventListener('DOMContentLoaded', (event) => {
      console.log('DOM fully loaded and parsed');
      console.log('time: '+new Date()-fetchStart or startTime)//fetchStart或者startTime可以通过performance API获取，fetchStart可以理解为资源拉取的时间
      debugger;
});

DOMContentLoaded是在文档解析完之后触发的事件,但非常有局限，

1. 首先它会受带async的script标签解析而不精确

2. 异步数据无能为力
动态网页的异步数据到达时可能才是dom处于比较稳定的阶段，这时候计算首屏时间比较合理，但是DOMContentLoaded会在异步数据到达之前就触发了,所以会计算失效。

方法2 利用React/vue 的生命周期

如题,拿vue举例，直接找到根组件在mounted事件中打上

mounted(){
  console.log('time: '+new Date()-fetchStart or startTime)//fetchStart或者startTime可以通过performance API获取
}

缺陷：

1. 受限于技术栈，不够通用，但可以足够精确。
2. 入侵业务

方法3 利用MutationObserver监听DOM变化波动

直接参考# 别再用performance计算首屏时间了即可，但本文貌似有些错误。
比如对DOMContentLoaded的解读太潦草有误导性，并不是vue或者react有问题（亲测，如下图） ，而是在于异步事件，所以直接看第四点他们的MutationObserver，这个非常有价值
大体思路就是通过一定算法给dom每次变化计算一个得分，然后计算相邻dom得分变化差值，找到最大变化节点，节点的时间-fetchStart/startTime来作为首屏时间。