JS相关概念

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

CSS代码可以放在style标签中，也可以单独放置在.css文件中并由link标签引入，无论是style标签还是link标签都放置在head标签下。JS代码可以放在script标签下，或者单独放置在.js文件中并由script标签引入，script标签一般放置在body闭合标签前，放置在head标签中时一般要设置其async或defer属性！

2、解释白屏和FOUC

2.1、白屏

白屏的根本原因是浏览器在渲染的时候请求时间过长造成的。

• 如果把样式放在底部,对于IE或者chrome浏览器,,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
• 如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
• 如果把JavaScrip放在头部，因为脚本会阻塞后面内容的呈现和其后组件的下载。对于图片和CSS，在加载时会并发加载（如一个域名下同时加载两个文件），但在加载JavaScript 时，会禁用并发，并且阻止其他内容的下载。所以把JavaScript放入页面顶部也会导致白屏现象。

2.2、FOUC（Flash of Unstyled Content）

FOUC(flash of unstyled content)无样式内容闪烁，如果把样式放在底部，对于某些浏览器，在某些场景下会出现逐步加载无样式的内容，等CSS加载后页面突然展现样式的现象。尤其是火狐浏览器，因为其渲染机制，如果把CSS放在底部会一直表现出FOUC。

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

在script标签中，defer 和 async才会生效，仅适用于外部脚本（只有在使用 src 属性时）。

• 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

• 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步），但不保证执行的先后顺序。
  有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但script.js的执行要在所有元素解析完成之后DOMContentLoaded事件触发之前完成，保证执行的先后顺序。

4、简述网页的渲染机制

以webkit核心为例:

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