白屏加载优化

1️⃣ 白屏问题

白屏问题，是指页面在加载过程中，由于某些原因，页面长时间无法显示内容，导致用户看到一片空白。

而【白屏时间】则是指用户点击一个链接或打开浏览器输入 URL 地址后，从屏幕空白到显示第一个画面的时间。

当用户点开一个链接或者是直接在浏览器中输入 URL 开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的体验，减少用户的跳出，提升页面的留存率。

简单来说，白屏时间越短，用户体验越好。

2️⃣ 为什么会出现白屏？

要了解白屏问题的出现原因，可以先去了解一下 从输入 URL 到页面展示在浏览器中，中间都经历了啥？ 这篇文章。

简单来说，正是这些流程的耗时，导致了白屏问题的出现。

3️⃣ 白屏加载优化

白屏加载优化，主要从以下几个方面进行优化：

1. DNS解析优化

针对 DNS Lookup 环节，我们可以针对性的进行 DNS 解析优化。

• DNS 缓存优化
• DNS 预加载策略
• 稳定可靠的 DNS 服务器

2. TCP 网络链路优化

…

3. 服务端处理优化

服务端的处理优化，是一个非常庞大的话题，会涉及到如 Redis 缓存、数据库存储优化或是系统内的各种中间件以及 Gzip 压缩等…

4. 浏览器下载、解析、渲染页面优化

根据浏览器对页面的下载、解析、渲染过程，可以考虑一下的优化处理：

• 尽可能的精简 HTML 的代码和结构
• 尽可能的优化 CSS 文件和结构
• 一定要合理的放置 JS 代码，尽量不要使用内联的 JS 代码
• 将渲染首屏内容所需的关键 CSS 内联到 HTML 中，能使 CSS 更快速地下载。在 HTML 下载完成之后就能渲染了，页面渲染的时间提前，从而缩短首屏渲染时间；
• 延迟首屏不需要的图片加载，而优先加载首屏所需图片；

🎯 总结

产生原因：

• 资源加载缓慢：HTML、CSS、JavaScript 文件、图片等资源加载缓慢，导致页面内容无法及时显示。
• 服务器响应时间长：服务器处理请求的时间较长，导致页面内容无法及时返回。
• 浏览器解析时间长：浏览器解析 HTML、CSS、JavaScript 文件的时间较长，导致页面内容无法及时渲染。
• 网络延迟：用户与服务器之间的网络延迟较大，导致页面内容无法及时传输。
• 浏览器缓存策略：浏览器缓存策略不合理，导致页面内容无法从缓存中获取，需要重新加载。

优化建议：

• 压缩资源文件：对 HTML、CSS、JavaScript 文件、图片等进行压缩，减少文件大小，加快加载速度。
• 使用 CDN：将静态资源（如图片、CSS、JavaScript 文件）托管在 CDN 上，提高资源加载速度。
• 优化服务器响应时间：优化服务器配置，提高服务器处理请求的速度。
• 减少 HTTP 请求：合并 CSS、JavaScript 文件，减少 HTML 页面中的图片数量，减少 HTTP 请求的数量。
• 使用浏览器缓存：设置合理的浏览器缓存策略，让页面内容可以从缓存中获取，加快页面加载速度。
• 优化网络环境：优化网络环境，减少网络延迟，提高页面内容的传输速度。