白屏和FOUC---link和scrip标签的位置

初学者可能会在很多经典的教材和教程看到，作者总是建议把引入外部CSS的link放在head里面，script放在body的最后面。虽然我们都会照着做，但未必知道为什么要这么做，或者说不这么做会怎么样。

知识储备

1.浏览器加载页面通常是逐行解析代码的，@import加载优先级很低
2.浏览器对于CSS和图片会并发加载，而JS会禁用并发加载
3.不同浏览器处理HTML和CSS的方式不同(IE，Chrome会在CSS全部渲染后呈现页面，Firefox会一句一句呈现)

第一个问题：白屏

我们浏览网页的时候经常会出现屏幕有短暂的时间是全白的，然后出现内容，这个现象就是白屏。
首先需要明确的是，白屏不是bug。而是由于页面的某个内容需要较长时间加载导致的。例如head里面引入了一个比较大的JS文件，浏览器需要一点时间去加载，这个时候就会出现白屏。对于IE和Chrome，如果引入了一个很大的CSS文件也可能出现白屏

JS文件建议放在body在后面，避免出现白屏

第二个问题：FOUC

有时候我们也会发现，页面一下子就出现了，但是会闪烁一下，页面结构变化不大，但是样式改变了。这个现象就是FOUC (Flash Of Unstyled Content 文档样式闪烁)
这种现象通常出现于CSS文在HTML后面引入，且使用的浏览器内核是Firefox的（对于IE和Chrome统一渲染CSS后呈现页面）
如果我们一开始就引入CSS文件（放进head），这样浏览器展示的页面就都是渲染好页面

CSS文件建议放在head里面

总结

1.CSS放在head里面，避免了FOUC现象的出现，但可能会导致白屏(虽然CSS文件通常较小，可能性不大)
2.但从性能而言，先呈现HTML后渲染CSS，相比于加载好HTML和CSS再呈现，多渲染了一次HTML。极端网络情况下性能可能会有些许的差别