CSS和JS在网页中的放置顺序是怎样的？

一般情况下，我们将CSS文件用link标签引入的方式，放在Html文件开头的head标签内。如果使用@import导入，或放在Html底部，则可能出现浏览器白屏或无样式内容闪烁的情况；

而JS文件则放置在body标签末尾的script标签内。因为加载JS文件时，会禁止其它文件同步加载，如果将JS文件放在靠前的位置，会影响后续文件的加载进度。

解释白屏和FOUC

白屏：1、根据一般浏览器的渲染机制，如果我们将引入的CSS文件放在Html的末尾，或使用@import的方式导入CSS文件，那么浏览器会先解析Html文件，再解析CSS文件，如果在这个过程中文件较大，或网络有一定的延迟，则可能在一段较长的时间内屏幕上没有任何内容，我们称之为白屏。2、如果我们将JS文件放置在head标签中引入，在加载JS的过程中，会禁止其它文件同步加载，也会出现白屏。

FOUC，即Flash of Unstyled Content，无样式内容闪烁。在FireFox一类的浏览器中，由于其本身特殊的解析机制，会先将解析出的Html标签内容在不添加样式的情况下显示在页面上，然后再解析CSS样式，添加到Html中。其中Html无样式内容的展示可能只有很短的一段时间，我们称之为无样式内容闪烁。

async和defer的作用是什么？有什么区别

对于普通的<script>标签，浏览器读到标签就会立即加载并执行指定的脚本，不等后续载入的其它文档元素。

如果标签内有async，则加载和渲染后续文档元素的过程将和JS文件的加载与执行并行进行（异步），且不保证各文件或脚本的加载和执行顺序。

如果标签内有defer，则加载和渲染后续文档元素的过程将和JS文件的加载与执行并行进行（异步），但JS文件的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成，也就是说能够保证一定的加载和执行顺序。

简述网页的渲染机制

1、当我们打开一个网页时，浏览器会首先解析Html中的标签，构建出网页的整体框架；
2、其次，浏览器会解析CSS文件中的各种样式命令，以及Html中内联的样式和行间样式；
3、将Html和CSS相结合，组成渲染树；
4、在渲染树的基础上布局，计算每个节点的几何结构；
5、把每个节点绘制到屏幕上。