教育平台型网站建设官方网站百度一下
文章目录
- 一、首屏时间
- 二、白屏时间
一、首屏时间
白屏时间：页面渲染完所有内容的时间
- 简单点就是在
<body>标签后写js代码计算，但是不是很准确
<head><title>白屏时间</title>
</head>
<body></body>
<script type="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>
<script type="text/javascript">
const time = Date.now() - performance.timing.navigationStart
console.log('白屏时间结束点：', time)
</script>
- 如果不支持
performance，可以这样做
<head><title>白屏时间</title><script type="text/javascript">window.start = Date.now();console.log('白屏时间开始点：', window.start)</script>
</head>
<script type="text/javascript">
const time = Date.now() - window.start
console.log('白屏时间结束点：', time)
</script>