JS相关概念

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

1. 在html中，代码是从上到下依次解析的，如果css放在后面，那么加载完html的时候css还没有加载，html无法被渲染，网页会出现白屏，故css一般放在html头部，head标签内。
2. JS一般放在html的尾部，也就是body闭合标签的前面。JS用来控制html和css，所谓控制即当html和css加载完成后，才能对其进行操作。还有一个原因是白屏，如果放在html头部的JS文件较大，JS加载时（非异步情况），其他文件都会暂停加载，导致在JS加载的这段时间内，DOM树和CSSOM树都没有渲染，屏幕白屏。

2、解释白屏和FOUC

白屏：

如果把样式放在底部，对于IE浏览器，在某些场景下（比如打开新窗口，刷新网页）会出现白屏，而不是内容逐步展现。IE浏览器中DOM树和CSSOM树必须都加载完之后，才会组合成渲染树，开始绘制内容，所以样式放在最底下，加载完HTML，却没有相应的样式，无法绘制内容，屏幕白屏。使用@import 标签时，即使CSS通过link引入并且放在头部，也有可能出现白屏。因为@import标签要等所有的HTML中所有的内容加载完之后再开始执行。还有如前所述，JS文件过大且放在头部，也会导致白屏。

FOUC:

FOUC即 Flash of Unstyled Content，无样式内容闪烁。如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。

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

1. 两者的作用都是异步执行或加载script脚本，所谓的异步就是加载script脚本或执行script脚本的同时，也可以加载HTML和CSS。没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
2. 不同的地方在于async是加载到它，他就开始异步加载和执行。而defer只是异步加载，却是推迟了它的异步执行，要在所有的HTML和CSS解析和渲染之后，DomContentLoaded事件触发之前，才开始异步执行。
3. 在加载多个JS脚本的时候，async是无顺序的加载，而defer是有顺序的加载。如果 JavaScript 脚本前后有依赖性，使用 async 就很有可能出现错误。

4、简述网页的渲染机制

1. 解析 HTML 标签, 构建 DOM 树
2. 解析 CSS 标签, 构建 CSSOM 树
3. 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
4. 在渲染树的基础上进行布局, 计算每个节点的几何结构
5. 把每个节点绘制到屏幕上 (painting)