白屏、首屏时间如何计算

最新推荐文章于 2024-04-19 08:45:27 发布

crazy的蓝色梦想

最新推荐文章于 2024-04-19 08:45:27 发布

阅读量2.3k

点赞数

分类专栏： js进阶篇文章标签： javascript

本文链接：https://blog.csdn.net/qq_41257129/article/details/104167718

版权

js进阶篇专栏收录该内容

35 篇文章 1 订阅

订阅专栏

白屏时间

白屏时间指：输入网址回车 ->浏览器开始显示内容的时间。

计算白屏时间

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

可用Preformance API时： 白屏时间 = firstPaint - performance.timing.navigationStart
不可用Preformance API时：白屏时间 = firstPaint - pageStartTime

首屏时间

首屏时间指：输入网址回车->浏览器首屏内容渲染完成

计算首屏时间

常用方法：

首屏模块标签标记法
统计首屏内加载最慢的图片的时间
自定义首屏内容计算法

1、首屏模块标签标记法

在HTML文档中对标记首屏内容的结束位置。只适用于不需要通过拉取数据以及不考虑图片等资源加载的情况。

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

2、统计首屏内图片完成加载的时间

通常首屏内容加载最慢的就是图片资源，因此我们会把首屏内加载最慢的图片的时间当做首屏的时间。

首屏时间 = 加载最慢的图片的时间点 - performance.timing.navigationStart

3、自定义模块内容计算法

由于统计首屏图片完成加载的时间比较复杂。因此我们在业务中通常会通过自定义模块内容，来简化首屏时间。如下面的做法：

忽略图片等资源加载情况，只考虑页面主要DOM
只考虑首屏的主要模块，而不是严格意义首屏以上的所有内容。

参考文章：

如何计算白屏与首屏时间

crazy的蓝色梦想

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
白屏、首屏时间如何计算

白屏时间白屏时间指：输入网址回车 ->浏览器开始显示内容的时间。计算白屏时间我们通常认为浏览器开始渲染<body>标签或者解析完<head>标签的时刻就是页面白屏结束的时间点。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...
复制链接

扫一扫