页面白屏原因与优化
分析页面加载白屏的原因及优化方案
问题
导致页面加载白屏时间长的原因有哪些，如何进行优化？
解答
什么是白屏时间
白屏时间是指用户点击链接或输入 URL 后，从屏幕空白到显示第一个画面的时间。白屏时间越短，用户体验越好，可以有效降低跳出率，提升页面留存率。
页面加载过程
从输入 URL 到页面展示的完整流程：
- 浏览器地址栏输入 URL
- 检查浏览器缓存、系统缓存、路由器缓存，有缓存则直接显示
- DNS 解析，获取服务器 IP 地址
- 建立 TCP 连接（三次握手）
- 发送 HTTP 请求
- 服务器处理请求并返回数据
- 浏览器接收 HTTP 响应
- 解析 HTML 源码
- 构建 DOM 树、解析 CSS 样式、执行 JS，最终渲染页面
浏览器渲染机制
浏览器下载 HTML 后的处理流程：
- 解析头部代码，下载样式表
- 继续解析 HTML，构建 DOM 树，同时下载样式
- DOM 树构建完成后，开始构建 CSSOM 树
- 两棵树构建完毕后，构建渲染树
- 进行页面绘制
阻塞情况：
- 内联 JS 代码会阻塞 DOM 树构建
- CSS 文件未下载完成时，会阻塞 JS 执行
- JS 执行被阻塞时，HTML 解析也会暂停
JavaScript 会阻塞 DOM 生成，样式文件会阻塞 JavaScript 执行，因此需要重点关注 JS 文件和样式表文件的加载顺序。
优化方案
1. DNS 解析优化
- 启用 DNS 缓存
- 使用 DNS 预加载策略
- 选择稳定可靠的 DNS 服务器
2. TCP 网络链路优化
- 使用 CDN 加速
- 选择更优质的网络服务
3. 服务端处理优化
- 使用 Redis 缓存
- 优化数据库查询
- 启用 Gzip 压缩
- 优化中间件配置
4. 浏览器渲染优化
- 精简 HTML 代码和结构
- 优化 CSS 文件和结构
- 合理放置 JS 代码，避免使用内联 JS
- 将首屏关键 CSS 内联到 HTML 中
- 延迟加载首屏外的图片
图片懒加载实现：
// 获取屏幕可视区域高度
const viewHeight = document.documentElement.clientHeight;
// 获取元素相对于文档顶部的高度
const offsetTop = element.offsetTop;
// 判断元素是否在首屏
if (offsetTop < viewHeight) {
// 优先加载首屏图片
loadImage(element);
}关键点
- 白屏时间主要受 DNS 解析、TCP 连接、服务器响应、浏览器渲染四个环节影响
- JS 会阻塞 DOM 构建，CSS 会阻塞 JS 执行，需要优化加载顺序
- 将首屏关键 CSS 内联到 HTML 可以加快首屏渲染
- 使用图片懒加载，优先加载首屏可见内容
- 服务端优化包括缓存、压缩、数据库优化等多个方面
目录