1.CSS和JS在网页中的放置顺序是怎样的？
css使用link标签引入并放在head标签内，是为了防止白屏和FOUC出现。
js使用script标签引入并放到body标签最后，是因为图片和css会并发加载，而在加载js时，会禁用并发，并且阻止加载其他内容，所以把js放在最后，防止白屏出现。
2.解释白屏和FOUC
白屏：
(1)如果把css样式放在底部，对于IE浏览器、chrome等，在某些场景下（新窗口打开、刷新等）页面会等到html加载完再进行加载css样式，就会出现白屏，内容不会逐步展现。
(2)如果使用@import标签，即使css放入link标签，放在head标签内，也可能出现白屏。
(3)如果把js放在头部，在加载js时会阻止DOM树和CSSOM树的构建，就会出现白屏。
总之，构建DOM树的时间过长就会出现白屏
FOUC(Flash of Unstyled Content) 无样式内容闪烁：
如果把样式放在底部，对于IE浏览器，在某些场景下（点击链接、输入URL、使用书签进入等）会出现FOUC现象（逐步加载无样式内容，等CSS加载完之后突然展现样式）。对于Firefox会一直表现出FOUC
Firefox会一直表现出FOUC的原因是与Firefox的渲染机制有关，Firefox每加载一次DOM树就会重绘一次网页样式，一直到所有内容完成后停止。当Firefox中DOM绘制完成后，css加载有延迟的时候，就会出现无样式内容闪烁（FOUC）现象。
Chrome是等渲染树完成后然后计算节点的几何结构，等都计算完毕后再把全部的节点绘制到屏幕上。
3.async和defer的作用是什么？有什么区别
默认情况下<script src="script.js"></script>
浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签下的文档元素之前，也就是不等待后续载入的文档元素，读到就加载并执行。
有async情况下<script async src="script.js"></script>
使用 async 加载脚本时，加载完毕后script.js会立即执行，所以不能保证script.js执行的顺序。
有defer情况下<script defer src="script.js"></script>
使用 defer 加载脚本时，加载完毕后script.js不会立即执行，而是等到页面所有元素都解析完成之后再执行，所以能保证script.js的执行顺序。
defer：脚本延迟到文档解析和显示后执行，有顺序
async：不保证顺序
4.简述网页的渲染机制
(1)解析HTML标签，构建DOM树
(2)解析CSS标签，构建CSSOM树
(3)把DOM和CSSOM结合成渲染树(render tree)
(4)在渲染树的基础上进行布局，计算每个节点的几何结构
(5)把每个节点绘制到屏幕上(painting)
