统计页面首屏时间，很多人第一步就错了

前言

前端页面性能对用户留存、用户直观体验有着重要作用。这样的话如何更好的监控前端页面性能就变的十分重要。前端页面的性能监控主要分为两个方式：

一种叫做 合成监控 Synthetic Monitoring, SYN。就是在一个模拟场景里，提交一个需要做性能审计的页面，通过一系列的工具、规则去运行页面，提取一些性能指标，得出一个审计报告。合成监控中最近比较流行的是 Google 的 Lighthouse

另一种是 真实用户监控Real User Monitoring，RUM。监控真实的用户访问数据，上报数据到服务器，然后经过数据清洗加工，得到最终的性能数据。

在前端性能监控中有一个非常重要的指标就是首屏时间，因为首屏时间直接反应了用户多久能看到页面的主要内容，这决定了用户体验。这样的话，如何取到准确的首屏时间对我们来说就变的非常重要。本文就结合之前的实践，聊一聊首屏时间如何计算。

Performance

在 SSR（服务端渲染）的应用中，我们认为html的body渲染完成的时间就是首屏时间。我们通常使用 W3C 标准的Performance对象来计算首屏时间。

Performance经常被用于采集性能数据，因为对象内置了几乎所有常用前端需要的性能参数。

image

Performance包含了四个属性：memory、navigation、timeOrigin、timing，以及一个事件处理程序onresourcetimingbufferfull。下面我们简单介绍一下Performance的api。

memory

memory这个属性提供了一个可以获取到基本内存使用情况的对象