JS初探

CSS和JS在网页中的放置顺序

将样式通过 style 标签或 link 标签放置在 head 内（顶部），而将 JS 放在 body 的末尾（底部）

白屏和FOUC

• 白屏原因：如果把样式放在底部，对于IE浏览器，在某些场景下（新窗口打开、刷新等）页面会出现白屏，而不是内容逐步展现；如果使用 @import 标签，即使 CSS 放入 link，并且放在头部，也可能出现白屏；由于浏览器对图片和CSS会并发加载，但在加载JS时，会禁用并发，并且阻止其他内容的下载，所以把JS放入页面顶部也会导致白屏

• FOUC（无样式内容闪烁）
  原因：如果把样式放在底部，对于IE浏览器，在某些场景下（点击链接、输入URL、使用书签进入等），会出现FOUC现象（逐步加载无样式的内容，等CSS加载后页面突然展现样式），而Firefox会一直表现出FOUC

async和defer

由于 script 加载的特性，对脚本会 立即 加载并执行（记住这个立即执行，之后的跨域会用到！！！），async 和 defer 都可以使得加载后续文档元素的过程和当前脚本的加载并行进行，不同的是，async是让加载和渲染后续文档元素的过程和当前脚本的加载与执行并行进行，而对脚本设置 defer 后，脚本的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

• defer：脚本延迟到文档解析和显示后执行，有顺序
• async：不保证顺序

网页的渲染机制

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