浏览器的渲染机制解析
- 解析HTML标签，构建DOM树
- 解析CSS标签，构建CSSOM树
- 把DOM和CSSOM组合成渲染树
- 在渲染树的基础上进行布局，计算每个节点的几何结构
- 把每个节点绘制到屏幕上
可能会出现的问题
白屏现象
定义：
如果把样式放在底部，对于IE浏览器，在某些场景下(新窗口打开，刷新等)页面就会出现白屏，而不是内容的局部展现。如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
出现的原因
1.上文中说到了浏览器的渲染机制，由于在一般情况下，Chrom浏览器和IE浏览器(某些场景下)是将HTML解析为DOM树，将CSS解析为CSSOM树再组合成渲染树。我们将CSS的link标签放到</body>的上面的时候，浏览器已经解析完了HTML标签，这是他又碰到了Link标签，所以他需要将DOM树毁掉重新建立一个DOM树。
2.对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象.
FOUC
定义
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC。
出现的原因
出现的原因也是由于浏览器的渲染机制，但是和Chrom浏览器不同，firefox和IE(某些场景下)，他们是解析到了一个最子节点，这个节点下面没有其他内容了，就立刻查找CSSOM树，画出这个节点(由于我们把link标签放到了后面，所以他找不到我们写的样式表，只加载自己的默认样式)，等到最后加载到了link标签之后，他需要从头再绘制渲染树，所以出现FOUC现象。
避免出现上述问题
CSS引入方式
将Link标签放在head内部，一边加载css文件一边构建DOM树
JavaScript引入方式
- 将Script标签放在body的底部，也就是</body>的上方
- 在head中引入script标签，在上async或defer属性
async：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
defer：加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
两种解决方法均可
