白屏时间
浏览器显示第一个字符或者元素的时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白屏</title>
<script type="text/javascript">
// 不兼容performance.timing 的浏览器,如IE8
window.pageStartTime = Date.now();
</script>
<!-- 页面 CSS 资源 -->
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="page.css">
<script type="text/javascript">
// 白屏时间结束点
window.firstPaint = Date.now();
</script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
可使用 Performance API 时
白屏时间 = firstPaint - performance.timing.navigationStart;
可使用 Performance API 时
白屏时间 = firstPaint - pageStartTime;
首屏时间
首屏时间是指用户打开网站开始,到浏览器首屏内容渲染完成的时间,dom处于比较稳定的阶段。
对于用户体验来说,首屏时间是用户对一个网站的重要体验因素。通常一个网站,如果首屏时间在5秒以内是比较优秀的,10秒以内是可以接受的,10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。
在 SSR(服务端渲染)的应用中,我们认为html的body渲染完成的时间就是首屏时间。我们通常使用 W3C 标准的Performance对象来计算首屏时间。
Performance经常被用于采集性能数据,因为对象内置了几乎所有常用前端需要的性能参数。
但是随着 Vue和React等前端框盛行, 导致Performance无法准确的监控到页面的首屏时间。因为页面的body是空,浏览器需要先加载js, 然后再通过js来渲染页面内容。那我们使用什么数据来当做首屏时间呢?
总结为一句话,就是SSR使用Dom渲染结束的时间,SPA的项目使用FMP的时间。