文章目录
一、首屏时间
白屏时间：页面渲染完所有内容的时间
- 简单点就是在
<body>标签后写js代码计算，但是不是很准确
<head><title>白屏时间</title></head><body></body><scripttype="text/javascript">const time = Date.now()- performance.timing.navigationStart
console.log('首屏时间结束点：', time)</script>
- 还有一个思路就是利用
MutationObserver监控DOM的变化，变化幅度最大一次时间的就是首屏时间
1.DOM的增加、修改、删除，会触发 MutationObserver
2. 每次 DOM变化可以计算出一个相对时间(time)和 DOM 变化的分数，并存入一个 observerData 数组中
3. 而后处理 observerData 数组，计算 DOM 变化时分数的差值，取 DOM 分数变化最大的时间点作为首屏时间的取值点
4. 因为首屏并不是所有DOM都渲染，所以不能取最后一项DOM加载完的时间
二、白屏时间
白屏时间：页面开始显示内容的时间
- 一般浏览器开始渲染
<body>标签或者解析完<head>标签，就是页面白屏结束的时间点。
<head><title>白屏时间</title></head><scripttype="text/javascript">const time = Date.now()- performance.timing.navigationStart
console.log('白屏时间结束点：', time)</script>
- 如果不支持
performance，可以这样做
<head><title>白屏时间</title><scripttype="text/javascript">
window.start = Date.now();
console.log('白屏时间开始点：', window.start)</script></head><scripttype="text/javascript">const time = Date.now()- window.start
console.log('白屏时间结束点：', time)</script>
本文转载自: https://blog.csdn.net/qq_45677671/article/details/136675036
版权归原作者 一颗不甘坠落的流星 所有， 如有侵权，请联系我们删除。
版权归原作者 一颗不甘坠落的流星 所有， 如有侵权，请联系我们删除。