当前位置：网站首页>白屏时间、首屏时间

白屏时间、首屏时间

2022-06-11 10:29:00 【前端同学】

白屏时间

浏览器显示第一个字符或者元素的时间
在这里插入图片描述

<!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对象来计算首屏时间。