CSS和JS在网页中的放置顺序是怎样的？
CSS一般放置在HTML的head标签中,JS一般放置在HTML的最后也就是body标签的末端。
白屏和FOUC
由于JS脚本会阻塞后面内容的呈现；脚本会阻塞其后组件的下载；从而造成：
- 白屏：
当把JS放置在HTML和CSS前面的时候，浏览器会马上请求JS文件并执行，同时停止HTML和CSS的渲染；从而造成白屏现象。
如果使用@import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。 - FOUC：
FOUC无样式内容闪烁如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现FOUC现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于Firefox会一直表现出 FOUC。
网页的渲染机制
- 解析HTML标签,构建DOM树
- 解析CSS标签, 构建CSSOM树
- 把DOM和CSSOM组合成 渲染树(render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上(painting)
