JS相关概念

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

1. css放在head标签内，防止渲染时出现白屏
2. js放在最后body尾部，因为js一般会涉及到一些DOM操作，所以要等全部的dom元素都加载完再加载js，js方法执行时，有可能会阻塞页面加载，如果把js放在前面可能会造成白屏的现象。

2. 解释白屏和FOUC

• 白屏现象：

1. 如果把样式放在底部，对于ie浏览器，在某些场景下(新窗口打开，刷新等)页面会出现白屏，而不是内容逐步呈现。
2. 如果使用@import标签，即使css放入link，并且放在头部，也有可能白屏
3. 脚本会阻塞后面内容的呈现和下载,所以js放置在head中也会导致白屏的可能.
   外部脚本加载过长(比如一直无法下载完成),就会出现出现网页暂时失去响应(这就是白屏).

• FOUC(Flash of Unstyled Content) 无样式内容闪烁：

1. 逐步加载无样式内容，等css加载好以后页面突然展现的样式。也就是说浏览器现在加载没有样式的内容，突然解析到css样式了，就会对页面重新渲染，这个时候就会出现FOUC现象。在ie中如果把样式放在底部，在某些场景下(点击链接、输入URL、使用书签进入等等)，会出现FOUC现象。对于 Firefox 则会一直表现出 FOUC。

3.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 就很有可能出现错误。

- 区别：
- defer:脚本延迟到文档解析和显示后执行，有顺序
- async:不保证顺序

4.简述网页的渲染机制

• 解析html构建DOM树
• 解析CSS构建CSSOM树
• 把DOM和CSSOM组合成渲染树（Render Tree）
• 在渲染树的基础上进行布局，计算每个节点的几何结构（Layout Tree）
• 把每个节点绘制到屏幕上（Painting)