[未知]首屏和白屏时间如何计算？

[mqyqingfeng]

[未知]首屏和白屏时间如何计算？

[ATQQ]

使用performance对象

随便打开一个页面在开发工具中实验

const timing = window.performance.timing

贴一张网图

白屏时间

timing.responseEnd – timing.fetchStart

首屏时间(完全加载?)

timing.loadEventStart – timing.fetchStart

[ruohuan]

首屏时间的计算，可以由Native Webview提供的类似onload的方法实现，在ios下对应的是webViewDidFinishLoad，在android下对应的是onPageFinished事件。

白屏的定义有多种。可以认为“没有任何内容”是白屏，可以认为“网络或服务异常”是白屏，可以认为“数据加载中”是白屏，可以认为“图片加载不出来”是白屏。场景不同，白屏的计算方式就不相同。
方法1：当页面的元素数小于x时，则认为页面白屏。比如“没有任何内容”，可以获取页面的DOM节点数，判断DOM节点数少于某个阈值X，则认为白屏。
方法2：当页面出现业务定义的错误码时，则认为是白屏。比如“网络或服务异常”。
方法3：当页面出现业务定义的特征值时，则认为是白屏。比如“数据加载中”。

[lovetingyuan]

是的，根据具体的业务场景来做评估是比较合理的，在界面的关键渲染时间点记录当前时间，或者比较通用的做法是在head前记录时间，在body后或者在DOMContentLoaded触发时记录时间，用差值衡量。实际上白屏时间的统计不需要多么精确，而是需要在大量样本下保持统一的计算方式并且衡量这些样本在不同设备不同网络状况下的平均情况才比较有参考价值

[rudyxu1102]

1. 首屏时间

1.1 参考阿里ARMS

使用ARMS的计算方法，将可见dom元素数量增长最快的时间点作为首屏时间。

• FMP技术方案
• 计算方式

1.2 参考腾讯Aegis

利用 MutationObserver 接口，监听 document 对象的节点变化。

检查这些变化的节点是否显示在首屏中，若这些节点在首屏中，那当前的时间点即为首屏渲染时间。但是还有首屏内图片的加载时间需要考虑，遍历 performance.getEntries() 拿到的所有图片实体对象，根据图片的初始加载时间和加载完成时间去更新首屏渲染时间。

这种方式相比第一种计算性能小一些。

• 计算方式

2. 白屏时间

计算方式：

• domContentLoadEventEnd - fetchStart。
• FCP。首次内容绘制，跟白屏时间相关的指标。支持Chromium, Firefox,Safari浏览器。参考谷歌的计算方式计算