蔚来面试题：计算白屏时间
深入理解白屏时间及其优化策略
在前端性能优化中，白屏时间（First Paint Time）是一个非常重要的指标。它指的是从用户输入网址并按下回车键，到浏览器开始渲染页面内容的时间段。在这段时间内，用户看到的只是一个空白页面，因此白屏时间的长短直接影响了用户的体验。本文将详细探讨白屏时间的定义、影响因素、测量方法以及优化策略，并结合代码示例进行说明。
什么是白屏时间？
白屏时间是指从用户发起页面请求到浏览器首次开始渲染页面内容的时间。具体来说，白屏时间包括以下几个阶段：
- DNS解析：浏览器将域名解析为IP地址。
- 建立TCP连接：浏览器与服务器建立TCP连接（三次握手）。
- 发起HTTP请求：浏览器向服务器发送HTTP请求。
- 服务器响应：服务器处理请求并返回响应数据。
- 浏览器解析HTML：浏览器解析HTML文档并构建DOM树。
- 浏览器渲染页面：浏览器根据DOM树和CSSOM树生成渲染树，并开始渲染页面。
- 页面展示第一个标签：浏览器首次将页面内容渲染到屏幕上。
白屏时间的长短直接影响了用户对网站的第一印象。如果白屏时间过长，用户可能会感到不耐烦，甚至直接关闭页面。因此，优化白屏时间是前端性能优化的重要目标之一。
白屏时间的影响因素
白屏时间的长短受到多种因素的影响，主要包括以下几个方面：
- 网络性能：网络延迟、带宽、DNS解析时间等都会影响白屏时间。如果网络状况不佳，DNS解析和TCP连接建立的时间会变长，从而导致白屏时间增加。
- 服务器性能：服务器的响应速度、处理能力等也会影响白屏时间。如果服务器响应缓慢，浏览器需要等待更长的时间才能接收到HTML文档。
- 前端页面结构：HTML文档的大小、复杂度、外部资源的加载顺序等都会影响白屏时间。如果HTML文档过大或包含大量外部资源，浏览器需要更长的时间来解析和渲染页面。
- 浏览器性能：浏览器的渲染引擎性能、缓存机制等也会影响白屏时间。不同浏览器的渲染性能可能存在差异，导致白屏时间不同。
如何测量白屏时间？
测量白屏时间的方法有多种，下面介绍两种常用的方法：基于时间戳的方法和基于Performance API的方法。
方法一：基于时间戳的方法
在HTML文档的<head>标签中插入JavaScript代码，记录页面开始加载的时间戳。然后在<head>标签解析完成后，记录另一个时间戳。两者的差值即为白屏时间。
<!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://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/ionicons/2.0.1/css/ionicons.min.css~tplv-t2oaga2asx-image.image">
<link rel="stylesheet" href="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/asset/fw-icon/1.0.9/iconfont.css~tplv-t2oaga2asx-image.image">
<script>
// head 解析完成后，记录时间
window.firstPaint = Date.now();
console.log(`白屏时间：${firstPaint - pageStartTime}ms`);
</script>
</head>
<body>
<div class="container"></div>
</body>
</html>
方法二：基于Performance API的方法
使用Performance API可以更精确地测量白屏时间。Performance API提供了PerformanceObserver接口，可以监听页面的首次绘制（first-paint）事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/ionicons/2.0.1/css/ionicons.min.css~tplv-t2oaga2asx-image.image">
<link rel="stylesheet" href="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/asset/fw-icon/1.0.9/iconfont.css~tplv-t2oaga2asx-image.image">
<!-- 只是为了让白屏时间更长一点 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.13/vue.global.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<img
src="https://img.36krcdn.com/hsossms/20250217/v2_61ae954a0c4c41dba37b189a20423722@000000_oswg66502oswg900oswg600_img_000?x-oss-process=image/format,jpg/interlace,1"
alt="">
<img
src="https://img.36krcdn.com/hsossms/20250217/v2_9e1df42e783841e79ff021cda5fc6ed4@000000_oswg41322oswg1026oswg435_img_000?x-oss-process=image/format,jpg/interlace,1"
alt="">
<img
src="https://img.36krcdn.com/hsossms/20250217/v2_0376475b9a6a4dcab3f7b06a1b339cfc@5888275_oswg287301oswg729oswg545_img_000?x-oss-process=image/format,jpg/interlace,1"
alt="">
<img
src="https://img.36krcdn.com/hsossms/20250217/v2_e3213623ab5c46da8a6f9c339e1bd781@5888275_oswg1251766oswg1080oswg810_img_000?x-oss-process=image/format,jpg/interlace,1"
alt="">
<img
src="https://img.36krcdn.com/hsossms/20250217/v2_919d4445116f4efda326f651619b4c69@5888275_oswg169476oswg598oswg622_img_000?x-oss-process=image/format,jpg/interlace,1"
alt="">
<img
src="https://img.36krcdn.com/hsossms/20250217/v2_0457ccbedb984e2897c6d94815954aae@5888275_oswg383406oswg544oswg648_img_000?x-oss-process=image/format,jpg/interlace,1"
alt="">
<script>
// 性能 观察器 观察者模式
const observer = new PerformanceObserver((list) => {
// 获取所有的 性能 指标
const entries = list.getEntries();
for(const entry of entries) {
// body 里的第一个 标签的渲染
// 'first-paint' 表示页面首次开始绘制的时间点，也就是白屏结束的时间点
if(entry.name === 'first-paint') {
const whiteScreenTime = entry.startTime;
console.log(`白屏时间：${whiteScreenTime}ms`);
}
}
})
// 首次绘制 first-paint
// 首次内容绘制 first-contentful-paint 事件
// observe 监听性能指标
// buffered 属性设置为 true，表示包含性能时间线缓冲区中已经记录的相关事件
// 这样即使在创建 PerformanceObserver 之前事件已经发生，也能被捕获到
observer.observe({ type: 'paint', buffered: true });
</script>
</body>
</html>
总结
白屏时间是前端性能优化中的一个重要指标，直接影响用户的体验。通过理解白屏时间的定义、影响因素以及测量方法，开发者可以有针对性地进行优化。
作者：blzlh
来源：juejin.cn/post/7475652009103032358
来源：juejin.cn/post/7475652009103032358
