首屏和白屏时间

定义

白屏时间：从用户输入网址并点击回车，到浏览器开始显示内容（出现第一个字符或元素）的时间。

首屏时间：从用户输入网址并点击回车，到首屏内容（第一个页面）渲染完成的时间

计算方式

 白屏时间

通常认为，浏览器开始渲染 <body> 或者解析完 <head> 的时间是白屏结束的时间点。

<!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>

 白屏时间的计算公式：

 白屏时间 = firstPaint - performance.timing.navigationStart

 或者 = firstPaint - pageStartTime

 首屏时间

 计算首屏时间的方法有：

  1. 首屏模块标签标记法：适用于首屏内容不需要拉取数据以及页面不考虑图片等资源加载的（理想）情况
  2. 统计首屏内加载最慢的图片的时间

方法1：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首屏</title>
  <script type="text/javascript">
    window.pageStartTime = Date.now();
  </script>
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
</head>
<body>
  <!-- 首屏可见模块1 -->
  <div class="module-1"></div>
  <!-- 首屏可见模块2 -->
  <div class="module-2"></div>
  <script type="text/javascript">
    window.firstScreen = Date.now();
  </script>
  <!-- 首屏不可见模块3 -->
  <div class="module-3"></div>
    <!-- 首屏不可见模块4 -->
  <div class="module-4"></div>
</body>
</html>

此时首屏时间等于 firstScreen - performance.timing.navigationStart

事实上首屏模块标签标记法 在业务中的情况比较少，大多数页面都需要通过接口拉取数据才能完整展示，因此我们会使用 JavaScript 脚本来判断首屏页面内容加载情况。

方法2：

 通常首屏中加载最慢的就是图片资源，因此可以把首屏中加载最慢的图片的时间当作首屏的时间。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首屏</title>
    <script>
        // 不兼容 performance.timing 的浏览器
        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 - performance.timing.navigationStart)
        }
    </script>
</body>
</html>

遍历首屏内所有的图片标签，监听所有图片标签的 onload 时间，最终遍历图片标签的加载时间的最大值，并用这个最大值减去 navigationStart 即可获得近似的首屏时间。

posted @ 2019-06-15 13:06  湛蓝的家  阅读(508)  评论(0)  编辑  收藏  举报