FOUC是啥？FOUC和首屏白屏问题

白屏现象与优化建议：

白屏现象分析

首屏白屏在单页应用（例如vue）中，有时更明显，尤其是在网速较差+应用体积大（主要是指首页就需要加载的js、css文件，例如app.js,chunk-vendors.js）。

有些浏览器渲染机制（比如chrome）要先构建 DOM 树和 CSSOM 树，构建完成后再进行渲染，如果 CSS 部分放在 HTML 尾部，由于 CSS 未加载完成，浏览器迟迟未渲染，从而导致白屏；也可能是把 js 文件放在头部，脚本的加载会阻塞后面 文档内容的解析，从而页面迟迟未渲染出来，出现白屏问题。

单页应用首屏白屏优化建议：

1.按需加载，使用code-split技术实现按需加载。

2.使用骨架屏或loading，优化人机感知交互体验。

3.js阻塞渲染，应尽可能考虑首屏异步加载js脚本，首屏内容太长可考虑分屏分段分开加载。

4.压缩技术，考虑压缩要加载的文件体积。可以考虑使用webpack 打包压缩文件大小的相关技术。

5.使用服务端渲染技术，这对于SEO优化和首屏加载优化都有好处。

6.当项目太大的时候，可以考虑根据内容作分包管理，使用Monorepo 组织管理代码。（解释下，Monorepo 是管理项目代码的一个方式，指在一个项目仓库 (repo) 中管理多个模块/包 (package)）

FOUC现象与优化建议：

FOUC现象分析

FOUC（文档样式短暂失效(Flash of Unstyled Content)），主要指的是样式闪烁的问题，由于浏览器渲染机制（比如firefox），在 CSS 加载之前，先呈现了 HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。会出现这个问题的原因主要是 css 加载时间过长，或者 css 被放在了文档底部。

FOUC优化建议：

1.减少使用@import导入样式表。

2.不在文档尾部引入样式。

3.尽量使用link标签在head中引入。（当然link标签是一个只能在head中使用的标签，因此使用link必然是在head中的）