JS相关概念

CSS和JS在网页中的放置位置是怎样的？

CSS和JS可以放置在页面的任何位置，但是为了避免一些问题，一般将CSS放置在head标签里面，而将JS放置在body标签的最下面。

解释白屏和FOUC

白屏：对于IE，如果将样式表放置在底部，在某些场景（如：新窗口打开，刷新等）会出现页面白屏，而不是内容逐步展开。
如果使用了@import，不管样式表位于何处，都有可能出现白屏。
如果将JS放置在顶部，在加载JavaScript时，会禁用并发，并且阻止其他内容的加载，这时也会出现白屏。

FOUC：flash of unstyled content ，无样式内容闪烁，逐步加载无样式的内容，等CSS加载完成后页面突然展现样式。如果将样式表放在底部：对于IE，在某些场景（如：点击链接，输入URL，从书签进入等）会出现FOUC；对于Firefox，则一直表现出FOUC。

async和defer的作用是什么？有什么区别？

async和defer的作用是加载和渲染后续文档元素的过程将和JS的加载与执行并行进行，即加载异步。

区别
async：文档解析时，遇到async脚本，加载脚本，但是文档解析不中断，当脚本加载完成后，文档停止解析，执行脚本，执行完成后，文档继续解析。
defer：文档解析是，遇到defer脚本，加载脚本，同时文档解析不中断，但脚本加载完成后，不立刻执行，等到文档解析完成后，再按顺序执行脚本。

defer和async.png

简述网页的渲染机制

• 解析HTML标签，生成DOM树（文档对象模型）
• 解析CSS标签，生成CSSOM（CSS对象模型）
• 将DOM树和CSSOM组合成渲染树（render tree）
• 在渲染树的基础上对各个节点进行布局（layout）
• 将每个节点绘制带屏幕上（paint）