首屏白屏问题

[晓圆]

为什么会首屏白屏

浏览器渲染包含 HTML 解析、DOM 树构建、CSSOM 构建、JavaScript 解析、布局、绘制等等，大致如下图所示

要搞清楚为什么会有白屏，就需要利用这个理论基础来对实际项目进行具体分析。通过 DevTools 进行分析：

• 等待 HTML 文档返回，此时处于白屏状态。
• 对 HTML 文档解析完成后进行首屏渲染，因为项目中对加了灰色的背景色，因此呈现出灰屏。
• 进行文件加载、JS 解析等过程，导致界面长时间出于灰屏中。
• 当 Vue 实例触发了 mounted 后，界面显示出大体框架。
• 调用 API 获取到时机业务数据后才能展示出最终的页面内容。

由此得出结论，因为要等待文件加载、CSSOM 构建、JS 解析等过程，而这些过程比较耗时，导致用户会长时间出于不可交互的首屏灰白屏状态，从而给用户一种网页很“慢”的感觉。

解决白屏方案

在前端渲染领域，主要有以下几种方式可供选择：