一 CSS 和 JS 在网页中的放置顺序是怎样的？
css 样式放在 head 中
js 放在 body 标签内的最后，script 标签内。外链接用
<script src=""></script>，内部的用<script></script>。
二 解释白屏和 FOUC
1.白屏
对IE来说，把样式放在底部时，在某些场景下（如打开新窗口／刷新页面等）页面会出现白屏，而不是内容逐步展现。
如果使用@import标签，即使将 CSS 写入外部样式表由link引入并放在头部，也可能出现白屏。
把 js 文件放入页面顶部而未使用 defer 或 async 延迟或异步加载js文件，从而阻塞 html 与 css 的加载也会导致白屏。
另外：Chrome会同时加载html和css分别构建DOM树和CSSOM树，等到二者都构建完成后再绘制渲染树，然后显示出页面，当外部css样式表设置了延时或者加载的时间比较久时就会显示出白屏，与浏览器的渲染机制有关。
- FOUC
Flash of unsettled content：无样式内容闪烁。对IE来说，把样式放在底部时，在某些场景下（如点击链接、输入URL、使用书签进入等）页面会出现FOUC现象，具体表现为逐步加载无样式的内容，等CSS加载完成后页面突然展现样式。
对Firefox来说会先显示已加载的html内容，再逐步加载无样式内容，等css全部加载完成后页面突然展现样式，所以Firefox会一直表现出FOUC。
三 async和defer的作用是什么？有什么区别
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
上图的意思是：浏览器在解析HTML文件时，遇上没有设置defer或async属性的脚本，浏览器读到该脚本就加载并执行，脚本会阻塞其后内容的执行；
遇上设有async属性的脚本，会在HTML解析过程中下载该脚本，并在完成下载后暂停HTML的解析来执行这个异步脚本，直到执行完成后再继续HTML的解析；
遇上设有defer属性的脚本，会在HTML解析过程中下载该脚本，在HTML解析完成后才执行该文件。延迟脚本按照它们在文档中出现的顺序执行。
四 简述网页的渲染机制
- Grome 等浏览器
解析 HTML 标签，构建 DOM 树
解析 CSS 标签，构建 CSSOM 树
把 DOM 和 CSSOM 组合成渲染树 （render tree）
在渲染树的基础上进行布局，计算每个节点的几何结构
把每个节点绘制到屏幕上（painting）
2 Firefox 等浏览器
解析 HTML 标签到 Content Sink
这时，先加载Content Sink 里面的内容，页面上会显示一个无样式的内容
循环加载 CSS 样式，每次加载一部分 CSS 样式后，会重新渲染页面
