1.CSS和JS在网页中的放置顺序是怎样的？
- css样式放在head中。
- js放在body标签内的最后,外部链用<script src=""></script>来引入js代码，内部（html）要用js的话就用<script></script>这组标签就可以了，写标签时要时刻注意 标签是成对出现的不能忘了尾巴。
2.解释白屏和FOUC
白屏
如果把css放在底部,对于IE浏览器,在一些场景下比如新窗口打开,刷新等，页面会出现白屏,而不是内容逐步展现。因为多种公司的浏览器在渲染上都有各自小的差异，为了将这种差异降到最低，我们统一把css放到<head>标签中，同时应该注意如果使用@import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。（虽然@import标签基本上不怎么用。。）FOUC（无样式内容闪烁）
这个也是因为各个公司所开发的浏览器差异所造成的，若把样式放在底部,对于IE浏览器,在一些场景下比如点击链接,输入URL,使用书签进入等,会出现FOUC现象(会先加载无样式的内容,等CSS加载完成之后，页面突然展现加载完成后的样式).对于Firefox会一直表现出 FOUC。
3.async和defer的作用是什么？有什么区别
- async 如果有 async 如
<script async src="script.js"></script>，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行. - defer，如果给script标签添加了defer属性
<script defer src="scropt.js"></script>，即使js放在head里面，它也会在HTML页面解析完毕之后再执行，也就是相当于把这个js放在了页面底部。 - 当没有使用
defer或async的话，浏览器读到代码会马上开始按照代码的内容来渲染，不会等待后续载入的文档元素。
4.简述网页的渲染机制
- 先读取html标签建立DOM树
- 在读取css建立CSSOM树
- 然后把两树拼装成渲染树（render tree）
- 在渲染树的基础上进行布局，计算每个节点的几何结构。
- 把每个节点绘制到屏幕上（painting）
