白屏&FOUC测试与CSS ,JS 放置顺序, 异步机制-CFANZ编程社区

白屏&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就会和之前的情形类似形成白屏