1.CSS和JS在网页中的放置顺序是怎样的？
- css文件一般放在head里，css的解析是在html解析之内开始的，css解析和html解析是可以同时进行的。当 html 构建生成 DOM， css 构建生成 CSSOM，两者合并才能开始构建 Render Tree，所以什么开始构建 Render Tree 取决于， DOM 和 CSSOM 的构建慢的一方。因此需要将css放在head中，尽早下载css资源，尽快解析，缩短首次渲染时间。
- JS一般放在 </body> 标签前，一方面：他会阻塞 DOM 的构建，当 html 解析碰到 script 标签之后，如果是外联脚本，浏览器会停止解析 html， 等待 js 资源被取回之后，执行 js 代码，如果是内联脚本，也会阻塞解析器，执行 js 代码。这就会使得 DOM 的构建比较耗时。
另一方面，虽然样式不会影响 DOM 的构建，然后在阻塞解析器的JS在执行过程中可能会请求样式信息。如果当时还没有加载和解析样式，脚本就会获得错误的回复，这就会造成很多问题。所以浏览器为了避免这样的问题，会在加载和解析 css 的过程中，禁止脚本执行。换句话说 CSSOM 的构建会阻塞 JavaScript 执行。
参考文章
2.解释白屏和FOUC
不同的浏览器对于CSS和HTML的处理方式不同，有的是等待CSS加载完成之后，对HTML元素进行渲染和展示（白屏问题）。有的是先对HTML元素进行展示，然后等待CSS加载完成之后重新对样式进行修改（FOUC无样式内容闪烁）
- Chrome浏览器：不论css放在head里还是放在body底部都会等待css样式加载完再展示HTML，网速慢会出现白屏问题。
- IE浏览器：只要看到一个HTML标签就展示。
- Firefox 如果css文件在head里，那么一定等css下载完再展示HTML；
如果CSS文件在body里，那么看到一个HTML标签就展示。
3.async和defer的作用是什么？有什么区别
defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
image.png
绿色：文档元素加载 蓝色：script.js加载 红色：script.js执行
4.简述网页的渲染机制
- 处理 HTML 标记并构建 DOM 树。
- 处理 CSS 标记并构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局，以计算每个节点的几何信息。
- 将各个节点绘制到屏幕上。
参考资料https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
https://www.chengrang.com/how-browsers-work.html
