白屏和 FOUC

• FOUC指无样式内容闪烁，白屏指页面会出现白屏；

• 它们主要是由于不同浏览器处理，对于某些场景，处理的方式不同；比如如果把样式放在底部，

• 等待CSS加载需要时间，浏览器可以选择，HTML文档直接执行渲染，逐步加载无样式的内容，等CSS加载后页面突然展现样式，这就是无样式内容闪烁；

• 也可以等待CSS加载完成，才开始渲染页面，即页面会出现一段时间白屏。

• 所以一般将CSS放在HTML头部位置。

注意；

• 使用@import标签，即使CSS放入链接，并且放在头部，也可能出现白屏；
• 另外，如果不将JS放在底部，当没有延迟或异步，浏览器会立即加载并执行指定的脚本
• 立即”指的是在渲染该脚本标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加并执行。
• 且只有执行完之后，才会渲染后面的文档，JavaScript放入页面顶部也可能会导致白屏现.

异步加载脚本

• 通过defer和async 可以使后续文档元素的加载渲染过程，与js脚本加载与执行，并行进行，这就是异步加载；

• 若无defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行，这就是同步，

• 它的影响就是只有这个脚本执行完成之后，后面的文档才能进行渲染；异步就无此副作用。

defer与async的区别：

• defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；

• async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。

• 一句话，defer是“渲染完再执行”，async是“下载完就执行”。

• 另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

• 使用范例：

<script async src="script.js"></script>
script defer src="script.js"></script>

范例

通过写一个 server，验证白屏和 Fouc效果

• 第一步

node index.js

• 第二步

在浏览器中打开 http://localhost:8080/public/index.html

• 第三步

修改 index.html 里面的引入的文件链接，加上参数 t=秒数，如

<script src="a.js?t=3"></script

表示延迟3秒加载 a.js

[图片上传中...(2.png-adfd28-1521903854550-0)]

2.png

4.png

3.png

5.png

6.png