CSS和JS在网页中的放置顺序是怎样的？
- CSS要放头部head中的link标签内引入。如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。
- js文件要放在<script></script>标签中，置于</body>最后 </html>之前，用于最后渲染。js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。
解释白屏和FOUC
产生白屏与FOUC（无样式内容闪烁）的根本原因是由于浏览器加载与显示页面方式不同造成的。
在不同浏览器对css和html的处理方式不同，一种（IE和Chrome）是等待css加载完成后，对html进行渲染并显示，另一种（Firefox）是先对html元素进行展示，等css加载完成之后，再对html进行样式的设置；前者会造成白屏，后者则会造成FOUC。
async和defer的作用是什么？有什么区别
- 作用：是script标签的两个属性，脚本引用异步设置。用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。
- 区别：
-
async
<script async src="script.js"></script>
有async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）。 -
defer
<script defer src="script.js"></script>
有defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是script.js的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
-
async
简述网页的渲染机制
- 构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；
- 构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
- 执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
- 构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；
渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。 - 布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；
-
绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成；
流程.png
Webkit渲染引擎流程.png
