白屏&FOUC的原因

不同的浏览器对资源加载页面渲染不同的处理方式导致的结果

白屏：

HTML DOM树已经渲染好了，但还是要等待CSS样式完全加载
再重新计算，并通过绘制，一次性展示出来(css没有完全加载出来时显示一片空白)（如Chrome）

FOUC(Flash of Unstyled Content)无样式内容闪烁：

HTML已经解析好了，CSS还在加载，浏览器会把内容呈现出来
等CSS全部加载完成，再计算一次重新渲染样式展示出来（如Firefox）

测试用代码
为了方便验证给，css js都设置了延时时间，详情看代码

文件目录

├── server.js└── test    ├── A.js                       ├── B.js                     ├── a.css                  ├── b.css                  ├── c.css         └── index.html

首先：下载测试用代码文件夹，在终端进入文件夹所在目录。输入 node server.js(打开创建的静态服务器)
在网页中打开页面正常显示效果：

image.png

在Firefox

打开index.html即为(http://localhost:8080/test/index.html)

情况一：当 CSS没有加载完成时，会首先展示内容，等全部的样式加载完成后一次性展示出来，这种机制就是FOUC

image.png

情况二：当CSS加载完成时，可以明显的看到就是正常的显示状态

image.png

在Chrome中打开

情况一：当 CSS没有加载完成时，不会展示任何内容，这种情况就是白屏，并等全部的样式加载完成后一次性展示出来。

image.png

CSS ,JS代码的放置顺序与异步机制

• 使用 link 标签将样式表放在顶部
• 将JS放在底部：

脚本会阻塞后面内容的呈现
脚本会阻塞其后组件的下载

对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.

把css文件 时间参数都这是为t=10，并把js文件置于样式表顶部

image.png

如上图虽然CSS已经加载完毕，但是页面还是没有任何展示，白屏，主要的原因是js文件置于样式表顶部，导致阻塞后面内容的呈现(并不会阻止文件的获取)，必须等到js文件全部加载完成，已经获取的样式才会成功渲染在页面上。

加载异步

<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

有async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script async src="script.js"></script>

image.png

从上面截图可以看到样式完全加载和渲染完成，置于样式表顶部的js文档并没全部加载完成(没有阻塞后面内容的呈现)，但是还是页面完整的展示了，如果没有async就会和之前的情形类似形成白屏

原著是一个有趣的人,若有侵权,请通知删除