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.简述网页的渲染机制

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，以计算每个节点的几何信息。
5. 将各个节点绘制到屏幕上。
   参考资料https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
   https://www.chengrang.com/how-browsers-work.html