代码视界

Hanpeng Chen的个人博客

前端性能指标：白屏和首屏时间的计算

前端 前端 性能监控 2021/01/12

本文于 1172 天之前发表，文中内容可能已经过时。

前言

页面性能优化是前端开发中一个重要的环节，而评判前端性能的优劣有两个比较经常听说的指标：白屏时间和首屏时间。

接下来我们一起来看看什么是白屏时间和首屏时间，如何去计算。

什么是白屏和首屏时间

白屏时间(FP)

白屏时间(First Paint)：是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。

  • 白屏时间 = 页面开始展示的时间点 - 开始请求的时间点

首屏时间(FCP)

首屏时间(First Contentful Paint)：是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。

  • 首屏时间 = 首屏内容渲染结束时间点 - 开始请求的时间点

欢迎关注我的微信公众号：前端极客技术(FrontGeek)

常规计算方式

白屏时间

白屏时间是从用户开始请求页面时开始计算到开始显示内容结束，中间过程包括DNS查询、建立TCP链接、发送首个HTTP请求、返回HTML文档、HTML文档head解析完毕。

因此影响白屏时间的因素：网络、服务端性能、前端页面结构设计。

通常认为浏览器开始渲染<body>或者解析完<head>的时间是白屏结束的时间点。所以我们可以在html文档的head中所有的静态资源以及内嵌脚本/样式之前记录一个时间点，在head最底部记录另一个时间点，两者的差值作为白屏时间

代码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>白屏时间计算-常规方法</title>
  <script>
    window.pageStartTime = Date.now()
  </script>
  <link rel="stylesheet" href="https://b-gold-cdn.xitu.io/ionicons/2.0.1/css/ionicons.min.css">
  <link rel="stylesheet" href="https://b-gold-cdn.xitu.io/asset/fw-icon/1.0.9/iconfont.css">
  <script>
    window.firstPaint = Date.now()
    console.log(`白屏时间：${window.firstPaint - window.pageStartTime}`)
  </script>
</head>
<body>
  <div>这是常规计算白屏时间的示例页面</div>
</body>
</html>

白屏时间 = window.firstPaint - window.pageStartTime

这个方法有个缺点：无法获取解析HTML文档之前的时间信息。

首屏时间

首屏时间要知道两个时间点：开始请求时间点和首屏内容渲染结束时间点。开始请求时间点和白屏时间一样，下面就是如何拿到首屏内容渲染结束时间点。

首屏结束时间应该是页面的第一屏绘制完，但是目前没有一个明确的API可以来直接得到这个时间点，所以我们只能智取，比如我们要知道第一屏内容底部在HTML文档的什么位置，那么这个第一屏内容底部，也称之为首屏线。

现在的问题是：首屏线在哪里？

实际情况分很多种，不同的场景有不同的计算方式。

标记首屏标签模块

这种方式比较简单，通过在HTML文档中，在首屏线的位置添加脚本去获取这个位置的时间。

但是在哪里添加我们只能大约估摸一个位置，以手机屏幕为例，不同型号手机屏幕大小不一样，我们取的位置可能在首屏线上面，也可以在下面，只能得到一个大约的值。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首屏时间计算-标记首屏标签模块</title>
  <script>
    window.pageStartTime = Date.now()
  </script>
  <link rel="stylesheet" href="https://b-gold-cdn.xitu.io/ionicons/2.0.1/css/ionicons.min.css">
  <link rel="stylesheet" href="https://b-gold-cdn.xitu.io/asset/fw-icon/1.0.9/iconfont.css">
</head>

<body>
  <div>首屏时间计算-标记首屏标签模块</div>
  <div class="module-1"></div>

  <div class="module-2"></div>

  <script type="text/javascript">
    window.firstScreen = Date.now();
    console.log(`首屏时间：${window.firstScreen - window.pageStartTime}`)
  </script>
  <div class="module-3"></div>

  <div class="module-4"></div>
</body>

</html>

首屏时间 = window.firstScreen - window.pageStartTime

这种方法的适用场景：

  • 首屏内不需要拉取数据，否则可能拿到首屏线获取时间的时候，首屏还是空白
  • 不需要考虑图片加载，只考虑首屏主要模块

在业务中，较少使用这种算法，大多数页面需要使用接口，所以这种方法就太不常用

但是如果你的页面是静态页面，或者异步数据不影响整体的首屏体验，那么就可以使用这种办法

统计首屏最慢图片加载时间

我们知道在一个页面中，图片资源往往是比较后加载完的，因此可以统计首屏加载最慢的图片是否加载完成，加载完了，记录结束时间。

如何知道首屏内哪张图片加载最慢？

我们可以拿到首屏内所有的图片，遍历它们，逐个监听图片标签的onload事件，并收集到它们的加载时间，最后比较得到加载时间的最大值。

代码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首屏时间计算-统计首屏最慢图片加载时间</title>
  <script>
    window.pageStartTime = Date.now()
  </script>
</head>

<body>
  <img src="https://image.chenhanpeng.com/static/blog-images/blogImages/2021/spring/20210107155629.png" alt="img" onload="load()">
  <img src="https://image.chenhanpeng.com/static/blog-images/blogImages/2020/autumn/article-gzh-qrcode.png" alt="img" onload="load()">
  <script>
    function load() {
      window.firstScreen = Date.now()
    }
    window.onload = function () {
      // 首屏时间
      console.log(window.firstScreen - window.pageStartTime)
    }
  </script>
</body>
</html>

首屏时间 = window.firstScreen - window.pageStartTime

适用场景：

  • 首屏元素数量固定的页面，比如移动端首屏不论屏幕大小都展示相同数量的内容。

但是对于首屏元素不固定的页面，这种方案并不适用，最典型的就是PC端页面，不同屏幕尺寸下展示的首屏内容不同。上述方案便不适用于此场景。

自定义模块计算法

这种算法和标记首屏的方法相似，同样忽略了首屏内图片加载的情况，这个方法主要考虑的是异步数据。

在首屏标签标记法中，是无法计算到异步数据带来的首屏空白的，所以它的适配场景十分有限

自定义模块，就是根据首屏内接口计算比较得出最迟的时间

代码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首屏时间计算-自定义模块计算法</title>
  <script>
    window.pageStartTime = Date.now()
  </script>
</head>

<body>
  <div class="module-1"></div>

  <div class="module-2"></div>
  <script type="text/javascript">
    setTimeout(() => {
      // 假设这里异步加载首屏要显示的文章列表数据
      window.firstScreen = Date.now();
      console.log(window.firstScreen - window.pageStartTime)
    }, 500)
  </script>
  <div class="module-3"></div>
</body>

</html>

window.performance

上面我们学习了几种常规的计算首屏和白屏时间的方法，其实现在w3c提供了一个用来测量网页和web应用程序的API：window.performance，通过这个API，我们可以更方便获取到相应的时间节点。

这个API在IE9以上的浏览器都支持。

window.performance是一个浏览器中用于记录页面加载和解析过程中关键时间点的对象，放置在global环境下，通过JavaScript可以访问到它。

通过以下代码可以探测和兼容performance：

1
2
3
4
5
6
var performance = window.performance || 
    window.msPerformance || 
    window.webkitPerformance;
if (performance) {
    // 你的代码
}

performance属性

我们一起来看下performance都有哪些属性：

  • memory：显示此刻内存占用情况，是一个动态值
    • usedJSHeapSize：JS对象占用的内存数
    • jsHeapSizeLimit：可使用的内存
    • totalJSHeapSize：内存大小限制

正常usedJSHeapSize不大于totalJSHeapSize，如果大于，说明可能出现了内存泄漏。

  • navigation：显示页面的来源信息

    • redirectCount：表示如果有重定向的话，页面通过几次重定向跳转而来，默认为0
    • type：表示页面打开的方式。0-正常进入；1-通过window.reload()刷新的页面；2-通过浏览器的前进后退按钮进入的页面；255-非以上方式进入的页面。

  • onresourcetimingbufferfull：在resourcetimingbufferfull事件触发时会被调用的一个event handler。它的值是一个手动设置的回调函数，这个回调函数会在浏览器的资源时间性能缓冲区满时执行。

  • timeOrigin：一系列时间点的基准点，精确到万分之一毫秒。

  • timing：一系列关键时间点，包含网络、解析等一系列的时间数据。

timing中的时间点

下面我们来看下timing中的各个时间点：

  • navigationStart：同一个浏览器上一个页面卸载(unload)结束时的时间戳。如果没有上一个页面，这个值会和fetchStart相同

  • unloadEventStart: 上一个页面unload事件抛出时的时间戳。如果没有上一个页面，这个值会返回0。

  • unloadEventEnd: 和 unloadEventStart 相对应，unload事件处理完成时的时间戳。如果没有上一个页面,这个值会返回0。

  • redirectStart: 第一个HTTP重定向开始时的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0

  • redirectEnd: 最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0

  • fetchStart: 浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。

  • domainLookupStart: DNS 域名查询开始的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和fetchStart一致。

  • domainLookupEnd: DNS 域名查询完成的时间。如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等

  • connectStart: HTTP（TCP） 域名查询结束的时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 fetchStart一致。

  • connectEnd: HTTP（TCP） 返回浏览器与服务器之间的连接建立时的时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。

  • secureConnectionStart: HTTPS 返回浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，则返回0。

  • requestStart: 返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳。

  • responseStart: 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。

  • responseEnd: 返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时。（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳。

  • domLoading: 当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时）的时间戳。

  • domInteractive: 当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的时间戳。

  • domContentLoadedEventStart: 当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的时间戳。

  • domContentLoadedEventEnd: 当所有需要立即执行的脚本已经被执行（不论执行顺序）时的时间戳。

  • domComplete: 当前文档解析完成，即Document.readyState 变为 ‘complete’且相对应的readystatechange 被触发时的时间戳

  • loadEventStart: load事件被发送时的时间戳。如果这个事件还未被发送，它的值将会是0。

  • loadEventEnd: 当load事件结束，即加载事件完成时的时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0

通过上面这些时间点，我们看能计算到哪些时间：

  • 重定向耗时：redirectEnd - redirectStart
  • DNS查询耗时：domainLookupEnd - domainLookupStart
  • TCP链接耗时：connectEnd - connectStart
  • HTTP请求耗时：responseEnd - responseStart
  • 解析dom树耗时：domComplete - domInteractive
  • 白屏时间：responseStart - navigationStart
  • DOM ready时间：domContentLoadedEventEnd - navigationStart
  • onload时间：loadEventEnd - navigationStart

资源性能API

performance.timing记录的是用于分析页面整体性能指标。如果要获取个别资源（例如JS、图片）的性能指标，就需要使用Resource Timing API。

performance.getEntries()方法，包含了所有静态资源的数组列表；每一项是一个请求的相关参数有name，type，时间等等。

除了performance.getEntries之外，performance还包含一系列有用的方法，比如：

  • performance.now()
  • Performance.getEntriesByName()
  • ….

上面这些方法我不具体介绍，大家可以自行查阅相关文档了解，这里我主要说一下我们可以利用getEntriesByName()这个方法来计算首屏时间：

首屏时间：performance.getEntriesByName(“first-contentful-paint”)[0].startTime - navigationStart

欢迎关注我的微信公众号：前端极客技术(FrontGeek)

我该计算首屏时间还是白屏时间？

在评估页面是否开始渲染方面，首屏时间会比白屏时间更精确，但是二者的结束时间往往很接近。所以要根据自己的业务场景去决定到底该用哪种计算方式。

对于交互性比较少的简单网页，由于加载比较快，所以二者区别不大，因此，可以根据喜好任选一种计算方式。

对于大型的复杂页面，你会发现由于需要处理更多复杂的元素，白屏时间和首屏时间相隔比较远，这时候，计算首屏时间会更有用。

白屏和首屏的优化

目前白屏常见的优化方案有：

  • SSR
  • 预渲染
  • 骨架屏

优化首屏加载时间的方法：

  • CDN分发（减少传输距离）
  • 后端在业务层的缓存
  • 静态文件缓存方案
  • 前端的资源动态加载
  • 减少请求的数量
  • 利用好HTTP压缩

白屏时间和首屏时间的优化方法不止上面这些，感兴趣的小伙伴可以自行查找相关内容。

欢迎关注微信公众号： 『前端极客技术』『代码视界』
赏
支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励

转载声明： 商业转载请联系作者获得授权,非商业转载请注明出处 © 代码视界
Copyright © 2019 | Powered by Hexo | Theme by Snippet