深入理解白屏时间及优化策略
在前端性能优化中，白屏时间（First Paint Time）是一个非常重要的指标。指的是用户输入网址按下回车键，到浏览器开始渲染页面内容的时间段。在这段时间内，用户看到的只是一个空白页面，因此白屏时间的长短影响了用户的体验。
什么是白屏时间
白屏时间指用户发起页面请求到浏览器首次开始渲染页面内容的时间，白屏时间包含以下几个阶段：
1、DNS解析：浏览器将域名解析为IP地址
2、建立TCP连接：浏览器与服务器建立TCP连接（三次握手）
3、发送 HTTP 请求：浏览器向服务器发送HTTP请求
4、服务器响应：服务七处理请求并返回响应数据
5、浏览器解析HTML：浏览器解析HTML文档并构建DOM树
6、浏览器渲染页面：浏览器根据DOM 树和 CSS 树生成渲染树，开始渲染页面
7、页面展示第一个标签：浏览器首次将页面内容渲染到屏幕上
白屏时间的影响因素
1、网络性能：网络延迟、带宽、DNS解析时间等都会影响白屏时间，如果网络状况不佳，DNS解析和TCP建立的时间会变长，从而导致白屏时间的增加
2、服务器性能：服务器的响应速度、处理能力也会影响白屏时间。如果服务器响应慢，浏览器需要等待更长时间才能接收到HTML文档。
3、前端页面结构：HTML文档的大小、复杂度、外部资源的加载顺序也都会影响白屏时间。如果HTML的文档过大或包含大量的外部资源，浏览器需要更长时间来解析和渲染页面
4、浏览器性能：浏览器的渲染引擎、缓存机制等也会影响白屏时间。不同的浏览器渲染性能可能存在差异，导致白屏时间不同。
如何测量白屏的时间
方法一：基于时间戳
在HTML文档的 <head>标签中插入js代码记录页面开始加载的时间戳，然后再<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 可以精确的测量白屏时间。PerformanceAPI 提供了 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>
