JS相关概念

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。

网页的渲染机制

1. 解析HTML标签,构建DOM树
2. 解析CSS标签, 构建CSSOM树
3. 把DOM和CSSOM组合成 渲染树(render tree)
4. 在渲染树的基础上进行布局, 计算每个节点的几何结构
5. 把每个节点绘制到屏幕上(painting)