一、网页的渲染机制
1. CSSOM 和 DOM
先抛开 JS 不说，浏览器收到一张
html页面时，会从上往下开始生成 DOM(Document Object Model) 树，如果中途发现有样式如<link>引入或者<style>写法，浏览器就会同步生成 CSSOM(CSS Object Model)。当 DOM 和 CSSOM 树构建好之后，浏览器就会开始组合，生成渲染树（Render-Tree），最后就是渲染（绘制），也就是展示给我们看的内容。这里需要注意两个词：构建和渲染。这是两个阶段。
浏览器的渲染机制
参考：渲染树构建、布局及绘制 | Web | Google-Developers
2. 阻塞渲染的 CSS
在上文我们提及到，渲染树是在 CSSOM 和 DOM 构建好之后开始的，也就是说，CSS 和 HTML 是阻塞浏览器渲染的，因为如果不完整读取 CSS 和 HTML ，就无法构建 CSSOM 和 DOM ，也就无法渲染。通常第一个请求就已经下载好完整的 HTML 了，也就是说，构建 DOM 是比 CSSOM 快的，因为在解析 HTML 时，才会知道并请求 CSS（CSS 通过
<link>和<style>引入），所以 CSS 会阻塞渲染树的构建。这也是为什么通常把 CSS 文件的引入放在<head>，早引入，早生成 CSSOM。可以通过媒体查询来跳过某些 CSS，不纳入 CSSOM 的生成过程，加快 CSSOM 构建。
参考：阻塞渲染的 CSS | Web | Google-developers
3. JS 引入
我们知道 JS 是可以修改 DOM 节点和 DOM 样式的，所以 JS 既阻塞 DOM、CSSOM 的构建，也阻塞渲染树的生成。在解析 HTML 中发现引入了 JS 后，会下载完 JS 并执行之后，才会继续解析、构建 HTML。因此我们常常把
<script>放到</body>前面，加快网页生成速度。
参考：使用 JavaScript 添加交互 | Web | Google-developers
4. 完整的浏览器渲染过程
实际中，浏览器有自己的策略去优化页面的渲染速度，虽然默认情况下。 CSSOM 和 DOM 应该先构建再渲染，但假如网速太慢，浏览器有可能先渲染部分内容。至于更复杂的优化，这里就不讨论了。以下是完整的渲染过程：
完整的浏览器渲染过程
二、CSS 和 JS 在网页中的放置顺序是怎样的？
从上文我们知道，为了加快浏览器渲染，我们应该尽早获取 CSS 和构建 DOM，因此 CSS 通常放在 HTML 的
<head>里面，而 JS 放到</body>之前。
三、解释白屏和 FOUC
1. 白屏
浏览器的渲染需要先生成 DOM 和 CSSOM 树，假如 CSS 获取时间过长（比如 CSS 在最后引入），就会导致 CSSOM 生成过久，浏览器只能等待，这时候就会出现长时间白屏，直到 DOM 和 CSSOM 构建完成。通常打开页面都会短暂白屏，因为 DOM 和 CSSOM 构建需要时间。
2. FOUC (flash of unstyled content)
有些浏览器（如：FireFox）会先渲染 DOM ，等到 CSSOM 生成了，再重绘渲染，这样就会看到一部分没样式的内容，然后再看到有样式的。这种分块分步的渲染。
四、async 和 defer 的作用是什么？有什么区别
JS 在 HTML 中引入有三种<script> <script async> <script defer>。
1. 直接引入<script>
会阻塞浏览器渲染，必须等到 JS 下载并执行才继续解析 HTML
2. async 方式引入
JS 的下载和 HTML 的解析并行进行，但只要 JS 下载完成，就马上开始执行，同时阻塞 HTML 解析。
3. defer 方式引入
JS 的下载和 HTML 的解析并行进行，但直到 HTML 解析结束，才执行 JS。
如图：
js 引入的三种方式
网友评论