一、首屏时间计算
首屏时间（First Contentful Paint，FCP）是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。计算首屏时间的方法主要有以下几种：
使用浏览器的Performance API：这是最直接且准确的方法。通过window.performance.timing对象，我们可以获取到页面加载过程中的各个关键时间点，包括导航开始时间（navigationStart）和首屏内容渲染结束时间。首屏时间即为这两者之差。
监听DOMContentLoaded和load事件：在某些情况下，如果无法使用Performance API，可以通过监听页面的DOMContentLoaded和load事件来近似估计首屏时间。DOMContentLoaded事件触发时，表示HTML文档已被完全加载和解析，而load事件则表示页面上的所有资源（包括图片、脚本等）都已加载完成。虽然这种方法不够精确，但可以作为一种替代方案。
自定义计时器：在页面加载开始时（例如在<head>标签内）启动一个计时器，并在首屏内容渲染完成时（例如通过检测特定DOM元素的出现）停止计时器。这种方法需要手动设置，但可以提供更灵活的控制。
二、白屏时间计算
白屏时间（First Paint，FP）是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。计算白屏时间的方法如下：
使用浏览器的Performance API：与首屏时间类似，可以通过window.performance.timing对象来获取白屏时间。具体来说，白屏时间等于页面开始展示的时间点（如responseStart或domLoading）减去开始请求的时间点（navigationStart）。
自定义计时器：在页面加载开始时启动一个计时器，并在页面开始显示内容时（例如通过检测页面背景色的变化或特定元素的渲染）停止计时器。这种方法同样需要手动设置，但可以用于更精确地测量白屏时间。
注意事项
由于不同浏览器和设备可能存在差异，因此在实际应用中可能需要结合多种方法来综合评估首屏和白屏时间。
在进行性能优化时，除了关注首屏和白屏时间外，还应考虑其他性能指标，如页面加载速度、资源加载效率等。
为了确保测量结果的准确性，建议在相同的网络环境和设备条件下进行多次测试并取平均值。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/2401_87873725/article/details/147158282
