白屏&FOUC的原因
白屏：
FOUC(Flash of Unstyled Content)无样式内容闪烁：
测试用代码
为了方便验证给，css js都设置了延时时间，详情看代码
文件目录
├── server.js
└── test
├── A.js
├── B.js
├── a.css
├── b.css
├── c.css
└── index.html
首先：下载测试用代码文件夹，在终端进入文件夹所在目录。输入 node server.js(打开创建的静态服务器)
在网页中打开页面正常显示效果：
在Firefox
打开index.html即为(http://localhost:8080/test/index.html)
情况一：当 CSS没有加载完成时，会首先展示内容，等全部的样式加载完成后一次性展示出来，这种机制就是FOUC
情况二：当CSS加载完成时，可以明显的看到就是正常的显示状态
在Chrome中打开
情况一：当 CSS没有加载完成时，不会展示任何内容，这种情况就是白屏，并等全部的样式加载完成后一次性展示出来。
CSS ,JS代码的放置顺序与异步机制
- 使用 link 标签将样式表放在顶部
- 将JS放在底部：
对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.
把css文件 时间参数都这是为t=10，并把js文件置于样式表顶部
如上图虽然
CSS已经加载完毕，但是页面还是没有任何展示，白屏，主要的原因是js文件置于样式表顶部，导致阻塞后面内容的呈现(并不会阻止文件的获取)，必须等到js文件全部加载完成，已经获取的样式才会成功渲染在页面上。
加载异步
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
有async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script async src="script.js"></script>
从上面截图可以看到样式完全加载和渲染完成，置于样式表顶部的
js文档并没全部加载完成(没有阻塞后面内容的呈现)，但是还是页面完整的展示了，如果没有async就会和之前的情形类似形成白屏
