白屏时间是指浏览器从响应用户输入网址地址,到浏览器开始显示内容的时间。
白屏时间 = 地址栏输入网址后回车 - 浏览器出现第一个元素
影响白屏时间的因素:网络,服务端性能,前端页面结构设计。
首屏时间是指浏览器从响应用户输入网络地址,到首屏内容渲染完成的时间。
首屏时间 = 地址栏输入网址后回车 - 浏览器第一屏渲染完成
影响首屏时间的因素:白屏时间,资源下载执行时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白屏时间</title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<script>
window.logInfo = {}; //统计页面加载时间
window.logInfo.openTime = performance.timing.navigationStart;
window.logInfo.whiteScreenTime = +new Date() - window.logInfo.openTime;
document.addEventListener('DOMContentLoaded',function (event) {
window.logInfo.readyTime = +new Date() - window.logInfo.openTime;
});
window.onload = function () {
window.logInfo.allloadTime = +new Date() - window.logInfo.openTime;
var timname = {
whiteScreenTime: '白屏时间',
readyTime: '用户可操作时间',
allloadTime: '总下载时间'
};
var logStr = '';
for (var i in timname) {
console.warn(timname[i] + ':' + window.logInfo[i] + 'ms');
logStr += '&' + i + '=' + window.logInfo[i] + 'ms';
}
(new Image()).src = '/?action=speedlog' + logStr;
};
</script>
</head>
<body>
<div>123</div>
</body>
</html>