1.CSS和JS在网页中的放置顺序是怎样的？
css放在<head></head>标签中间，是为了防止白屏的出现
js放在body标签内的最后，因为图片和css都是异步加载的，而js则是单个加载完成后才能执行下一步，如果将js放到head标签中就会出现 执行完成某一个js后，没有可以操作的内容，因为那是html还没有加载成功就要被js来操作，所以js放到body标签内部的最后面就可以避免这种情况的发生。。
2.解释白屏和FOUC
白屏的根本原因是浏览器在渲染的时候请求的时间过长导致的。浏览器渲染时必须获得DOM树和CSSOM树后才能组和渲染树，然后在此基础上把每个节点绘制到屏幕上。
因为将样式放到了底部，虽然构建了DOM树，但因为没有及时构建CSSOM树浏览器不会渲染网页，就会造成白屏。
而使用@important标签，也会出现白屏，请求期内不会构建CSSOM树。从而不会组合成渲染树，而由于构建 CSSOM 树的时间过程从而导致了白屏。
如果将js放在head头部中，因为js文件不同于css和图片的异步加载方式，js是加载完成了才能进行下一个步骤的执行。这样就会导致js下面的DOM树和CSS树的构建，从而导致白屏。
出现白屏的总结如下：
2.1.如果把样式放在底部，对于IE浏览器，某些场景下会出现白屏，而不是页面内容逐步展现。
2.2.如果使用@import标签，即使css放入link,并且放在头部，也可能出现白屏。
2.3.js放置在head中
FOUC：无样式内容闪烁
如果把样式放在底部，在某些场景下会出现FOUC现象（逐步加载无样式的内容，等css加载后页面会突然展现样式）对于Firefox会一直出现FOUC
Firefox会一直出现FOUC的原因是因为Firefox的渲染机制有关，Firefox是和chrome的不太一样的，chrome是等渲染树完成后然后计算节点的几何结构，等都计算完毕后再把全部的节点绘制到屏幕上。而Firefox则是每加载一次DOM树就会重绘一次网页样式，一直到所有内容完成后停止。当firefox中DOM绘制完成后，css加载有延迟的时候，就会出现无样式内容闪烁（FOUC）现象。
3.async和defer的作用是什么？有什么区别
async和defer的作用是让js实现异步加载而不是从上到下一个js执行完成后才能执行下一个js文件。
区别是：defer：在页面解析完毕后再执行，有先后执行的顺序差别。
async：页面的加载和渲染后续文档与script.js的加载与执行并行进行（异步的过程）是没有顺序的。
例如<script src="script.js"></script>没有defer或async，浏览器会立即加载并执行script.js文件，而script标签之后的文档要等script.js文件加载完成后才能开始加载与渲染。而
<script async src="script.js"></script>则是加载与渲染后续的文档将与script.js的加载与执行一起进行，不能保证执行顺序，这是一个异步的过程。
<script defer src="script.js"></script>如果该script即使放在了head标签内部，也会在HTML页面解析完毕之后再执行。
4.简述网页的渲染机制
4.1解析HTML元素，构建DOM树
4.2解析css样式，构建CSSOM树
4.3将DOM树和CSSOM树组合成渲染树(render tree)
4.4在渲染树的基础上进行布局，计算每个节点的几何结构
4.5把每个节点绘制到屏幕上（painting）
