检查首屏时间
2021-01-14 本文已影响0人
我是Msorry
输入网址,到页面完全渲染的时间
DNS查询→建立TCP连接→发起请求→接收响应→处理HTML元素→元素加载完成
首屏模块标签标记法
由于浏览器解析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="">
</head>
<body>
<div>123</div>
<div>456</div>
// 首屏可见内容
<script>
// 首屏结束时间
window.firstPaint = Date.now();
</script>
// 首屏不可见内容
<div class=" "></div>
</body>
</html>
首屏时间 = firstPaint - pageStartTime
统计首屏内加载最慢的图片
<!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>
这种方案比较适合首屏元素数量固定的页面
