白屏和 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
