CSS和JS在网页中的放置顺序是怎样的？
- css放到head标签内
- js一般放到body尾部，因为js会涉及dom的操作，所以会等dom都加载完成后，再去加载js。
解释白屏和FOUC
白屏现象：
- 器需要加载html文件和所有css文件后，构造了渲染树后，再把树节点渲染在屏幕上。如果暂时加载不到css文件，则会阻塞渲染过程，造成白屏现象。
- 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。
- 如果使用 @import 标签（使用@import标签引入样式文件的情况下，会等待html文件加载完成后才加载css文件）,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
FOUC(Flash of Unstyled Content) 无样式内容闪烁：
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .
async和defer的作用是什么？有什么区别
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="script.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
在有 async 的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async 就很有可能出现错误。
简述网页的渲染机制
- 解析html构建DOM树
- 解析CSS构建CSSOM树
- 把DOM和CSSOM组合成渲染树（Render Tree）
- 在渲染树的基础上进行布局，计算每个节点的几何结构（Layout Tree）
- 把每个节点绘制到屏幕上（Painting）
为了构建render tree，浏览器大致会做以下几个方面：
- 从DOM树的根部开始，经过每一个可见的节点。
- 有一些节点像script tags，meta tags等是不可见的，有一些会被忽略掉，因为他们不会被反映到渲染的结果上。
- 有一些节点通过css隐藏起来，也会被忽略掉（display：none）。
- 对于一些可见的节点，在CSSOM上找到相对应的设置。
- 结合内容和样式发出可见的节点。
最终输出在屏幕上的是内容和样式结合的渲染。当渲染树完成时，我们下一步将进入布局layout阶段。
到目前为止，我们已经计算了了那些可见的节点和他们的样式，但我们还没有计算他们在屏幕上确切的位置和大小，这就是布局阶段，也被称为“reflow”。
要计算出每一个对象确切的位置和大小，浏览器从render tree的根部开始，经过节点。让我们考虑一下这个简单的例子：
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
在上面的网页中，body包含两个嵌套的div：第一个div将节点的宽度设置为整个界面的50%，第二个节点，将节点宽度设成其父节点的50%，也就是整个界面的25%。
布局过程的输出结果是一个盒模型，能够精准的在界面中体现每一个元素确切的位置和大小，所有相对的度量方式都会被转换成像素表示。
最后，现在我们知道哪一个节点是可见的，还有他们的样式以及几何构成，我们可以将这些信息传给最后的阶段，这个阶段将会把这些把render tree 上的节点转化成真正的图像。这一阶段经常被称为“painting”或“rasterizing”。
浏览器会花一些时间去做这些工作。然而，chrome 开发工具会提供一些关于上面三个阶段的原理。让我们看一下例子“hello world”的layout布局阶段：
- 在时间线上，我们可以看到layout事件捕获了render tree的结构，位置和大小在时间线上。
- 当layout完成时，浏览器开始了“paint setup”和“paint”事件，将渲染树render tree转化成图像。
执行渲染树的结构，布局和paint所花的时间会由于文件大小，所设置样式的不同而不同，越大的文件和越复杂的样式，所花的时间越多（如：一个纯色是很好画的，而一个阴影需要更多的时间）。
最终网页出项在屏幕上：
我们再简单回忆一下浏览器的步骤：
- 处理html，构建DOM树。
- 处理css，构建CSSOM树。
- 结合DOM和CSSOM构成渲染树render tree。
- 开始布局，计算每个节点的几何结构。
- paint，画出每个节点。
我们的演示网页看起来很简单，但它也需要一些工作。无论DOM或CSSOM被改变，我们都必须重复以上过程，去计算出哪些图像需要重新渲染。
**Optimizing the critical rendering path is the process of minimizing the total amount of time spent performing steps 1 through 5 in the above sequence. **Doing so renders content to the screen as quickly as possible and also reduces the amount of time between screen updates after the initial render; that is, achieve higher refresh rates for interactive content.
