第 137 题：如何在 H5 和小程序项目中计算白屏时间和首屏时间，说说你的思路

[Loading-m]

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

开始请求时间点可以通过Performance Timing.navigation Start 。那么页面开始展示的时间点怎么获取呢。已经知道渲染过程是逐步完成的，而且页面解析是按照文档流从上至下解析的，因此一般认为开始解析body的时间点就是页面开始展示的时间。所以可以通过在head标签的末尾插入script来统计时间节点作为页面开始展示时间节点。但是这种方式需要打点，因此也有很多项目为了简化白屏时间的获取会选择忽略head解析时间直接用Performance Timing.dom Loading 来表示页面开始展示的时间，即使用domloading-navigation Start来表示白屏时间。

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

同样开始请求时间点可以通过Performance Timing.navigation Start获取。首屏内容渲染结束的时间点通常有以下几种方法获取：

（1）首屏模块标签标记法

适用于于首屏内容不需要通过拉取数据才能生存以及页面不考虑图片等资源加载的情况。通过在 HTML 文档中对应首屏内容的标签结束位置，使用内联的 JavaScript 代码记录当前时间戳作为首屏内容渲染结束的时间点。

（2）统计首屏内加载最慢的图片的时间

通常首屏内容加载最慢的就是图片资源，因此可以把首屏内加载最慢的图片加载完成的时间作为首屏时间。由于浏览器对每个页面的 TCP 连接数有限制，使得并不是所有图片都能立刻开始下载和显示。因此在 DOM树 构建完成后会通过遍历首屏内的所有图片标签，并且监听所有图片标签 onload 事件，最终遍历图片标签的加载时间获取最大值，将这个最大值作为首屏时间。

（3）自定义首屏内容计算法

由于统计首屏内图片完成加载的时间比较复杂。所以在项目中通常会通过自定义模块内容，来简化计算首屏时间。例如忽略图片等资源加载情况，只考虑页面主要 DOM；只考虑首屏的主要模块，而不是严格意义首屏线以上的所有内容。

可交互时间=用户可以正常进行事件输入时间点-开始请求时间点。

PerformanceTiming有一个domInteractive属性，代表了DOM结构结束解析的时间点，就是Document.ready State属性变为“interactive”

[JakeVivit]

这篇blog挺详细 ==> https://lz5z.com/Web%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-%E9%A6%96%E5%B1%8F%E5%92%8C%E7%99%BD%E5%B1%8F%E6%97%B6%E9%97%B4/

[jdkwky]

首屏时间 fiddler抓包计算时间总和

[zgl2007dj]

好像和小程序没什么关系

[cutie6]

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

开始请求时间点可以通过Performance Timing.navigation Start 。那么页面开始展示的时间点怎么获取呢。已经知道渲染过程是逐步完成的，而且页面解析是按照文档流从上至下解析的，因此一般认为开始解析body的时间点就是页面开始展示的时间。所以可以通过在head标签的末尾插入script来统计时间节点作为页面开始展示时间节点。但是这种方式需要打点，因此也有很多项目为了简化白屏时间的获取会选择忽略head解析时间直接用Performance Timing.dom Loading 来表示页面开始展示的时间，即使用domloading-navigation Start来表示白屏时间。

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

同样开始请求时间点可以通过Performance Timing.navigation Start获取。首屏内容渲染结束的时间点通常有以下几种方法获取：

（1）首屏模块标签标记法

适用于于首屏内容不需要通过拉取数据才能生存以及页面不考虑图片等资源加载的情况。通过在 HTML 文档中对应首屏内容的标签结束位置，使用内联的 JavaScript 代码记录当前时间戳作为首屏内容渲染结束的时间点。

（2）统计首屏内加载最慢的图片的时间

通常首屏内容加载最慢的就是图片资源，因此可以把首屏内加载最慢的图片加载完成的时间作为首屏时间。由于浏览器对每个页面的 TCP 连接数有限制，使得并不是所有图片都能立刻开始下载和显示。因此在 DOM树 构建完成后会通过遍历首屏内的所有图片标签，并且监听所有图片标签 onload 事件，最终遍历图片标签的加载时间获取最大值，将这个最大值作为首屏时间。

（3）自定义首屏内容计算法

由于统计首屏内图片完成加载的时间比较复杂。所以在项目中通常会通过自定义模块内容，来简化计算首屏时间。例如忽略图片等资源加载情况，只考虑页面主要 DOM；只考虑首屏的主要模块，而不是严格意义首屏线以上的所有内容。

可交互时间=用户可以正常进行事件输入时间点-开始请求时间点。

PerformanceTiming有一个domInteractive属性，代表了DOM结构结束解析的时间点，就是Document.ready State属性变为“interactive”

'Performance Timing.navigation Start' 这种表达里的空格容易造成误解，直接写成 'window.performance.timing.navigationStart' 更好理解些

[JaykeyGuo]

小程序中Performance.timing所有的参数

根据时间排序后：

在浏览器中，白屏时间是指输入URL到页面开始展示内容的时间，就是输入URL开始DNS查询的时间点到FP的时间点，FP的时候页面DOM开始绘制。 对应到小程序上就是开始请求的时间到DOM开始加载的时间点： domLoading - navigationStart

首屏时间，在浏览器中是从浏览器输入地址并回车后到首屏内容开始渲染的时间对应FCP，页面出现视觉变化。 对应到小程序的话是请求开始的时间到页面渲染然完成的时间。 domInteractive - navigationStart

---

上面的理解是最近学习，如有不对的地方欢迎讨论

[kingda]

https://developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming The time to first-paint was 白屏时间。 The time to first-contentful-paint was 首屏时间。