<!DOCTYPE html>
<html lang="en">
<head>
<script>
const startTime = new Date()
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const endTime = new Date()
console.log('白屏时间1：', endTime.valueOf() - startTime.valueOf())
console.log('白屏时间2：', endTime - window.performance.timing.navigationStart)
</script>
</head>
<body>
<p>白屏时间：从地址栏enter 到页面开始展示之前</p>
<p>首屏时间：从地址栏enter 到页面不滚动的情况下第一屏页面展示出来时间（而不是出现内容，或者部分元素没有展示）</p>
<script>
// 这样写主要是页面只有两个 p 标签，如果页面高度大与显示高度，则需要在页面首屏线位置插入此段script 而且不考虑渲染树->展示等时间
// 如果页面中异步请求数据，或者图片，还要加上最慢的图片请求时间和异步接口请求返回时间
const firstScreenTime = new Date()
console.log('首屏时间1：', firstScreenTime.valueOf() - startTime.valueOf())
console.log('首屏时间2：', firstScreenTime - window.performance.timing.navigationStart)
</script>
</body>
</html>
。。。图片来自网络
