什么是白屏与首屏时间？
白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。
白屏时间 = 地址栏输入网址后回车 - 浏览器出现第一个元素
影响白屏时间的因素：网络、服务端性能，前端页面结构设计
首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。
首屏时间 = 地址栏输入网址后回车 - 浏览器第一屏渲染完成
影响首屏时间的因素：白屏时间，资源下载执行时间
计算白屏时间
通常认为浏览器开始渲染<body>或者解析完<head>的时间是白屏结束的时间点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白屏时间</title>
<script>
// 开始时间
window.pageStartTime = Date.now();
</script>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<!-- ...页面css资源 -->
<script>
// 白屏结束时间
window.firstPaint = Date.now()
</script>
</head>
<body>
<div>123</div>
</body>
</html>
白屏时间 = firstPaint - pageStartTime
计算首屏时间
1. 首屏模块标签标记法
由于浏览器解析HTML是按照顺序解析的，当解析到某个元素的时候，觉得首屏完成了，就在此元素后面加入<script>计算首屏完成时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首屏时间</title>
<script>
// 开始时间
window.pageStartTime = Date.now();
</script>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<!-- ...页面css资源 -->
</head>
<body>
<div>123</div>
<div>456</div>
// 首屏可见内容
<script>
// 首屏结束时间
window.firstPaint = Date.now();
</script>
// 首屏不可见内容
<div class=" "></div>
</body>
</html>
首屏时间 = firstPaint - pageStartTime
2. 统计首屏内加载最慢的图片/iframe
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首屏时间</title>
<script>
window.pageStartTime = Date.now()
</script>
</head>
<body>
<img src="https://lz5z.com/assets/img/google_atf.png" alt="img" onload="load()">
<img src="https://lz5z.com/assets/img/css3_gpu_speedup.png" alt="img" onload="load()">
<script>
function load () {
window.firstScreen = Date.now()
}
window.onload = function () {
// 首屏时间
console.log(window.firstScreen - window.pageStartTime)
}
</script>
</body>
</html>
网友评论