JS相关概念

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

• css应该放在标签中
• js应该放在标签结尾处
• js所依赖的库(比如jquery)放置在js的前面

各个浏览器渲染机制可能略有偏差，为了防止出现白屏或者FOUC等情况，以上摆放最佳

2、解释白屏和FOUC（无样式内容闪烁）

参考1
参考2
浏览器的白屏与无样式内容闪烁（Flash of unstyled content）白屏和FOUC不能共存，是由于浏览器加载与显示页面方式不同造成的，使用标签将样式表放在文档的中可以解决这个情况

• 白屏：当把css样式表放在底部或者使用@import方式引入时一些浏览器例如chrome和IE，加载和渲染机制是等css全部加载解析完后再渲染展示页面，而这个等待的时间称为白屏。

• FOUC（无样式内容闪烁）：将样式放在底部或引入@import，IE 会先加载整个 HTML 文档的 DOM ，然后再去导入外部的 CSS 文件，因此在页面 DOM 加载完成到 CSS 导入完成中间会有一段时间页面上的内容是没有样式的，时间长短跟网速和计算机性能有关（逐步加载无样式的内容,等CSS加载后页面突然展现样式）。

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

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是会打断后面HTML的解析，只有等该脚本执行完成后，浏览器才继续解析后面的HTML文档元素。

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

下图可以非常好的表示这个过程的差别，其中：蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

4、简述网页的渲染机制

• 解析HTML标签，构建DOM树。
• 解析CSS标签，构建CSSOM树。
• 通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。
• 在渲染树的基础上，计算每个节点的几何机构。
• 把每个节点绘制到屏幕上 (painting)

中文版参考连接