首屏和白屏时间

最新推荐文章于 2024-07-18 10:24:18 发布

swallow_7

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量269

点赞数 1

分类专栏： web性能优化学习总结文章标签： web javascript

本文链接：https://blog.csdn.net/weixin_42509956/article/details/91898194

版权

学习总结同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

web性能优化

1 篇文章 0 订阅

订阅专栏

定义

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

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

计算方式

白屏时间

通常认为，浏览器开始渲染 <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：

<!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 即可获得近似的首屏时间。

swallow_7

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
首屏和白屏时间

定义白屏时间：从用户输入网址并点击回车，到浏览器开始显示内容（出现第一个字符或元素）的时间。首屏时间：从用户输入网址并点击回车，到首屏内容（第一个页面）渲染完成的时间计算方式白屏时间通常认为，浏览器开始渲染 <body> 或者解析完 <head> 的时间是白屏结束的时间点。<!DOCTYPE html><html lang="...
复制链接

扫一扫