浏览器的渲染过程

一、渲染过程：
当浏览器接收到 HTML 时，就会解析它，将其分解为浏览器所能理解的词汇，而这个词汇由于HTML5 DOM 规范定义，在所有浏览器中是保持一致的。然后浏览器通过一系列步骤来构造和渲染页面。渲染步骤如下：

1.首先用户在地址栏输入域名，如 fsux.me，DNS（域名解析系统）服务器根据输入的域名查找对应 IP，然后向该 IP 地址发起请求。

2.其次浏览器获得并解析服务器的返回内容 (HTTP response)。

3.浏览器加载 HTML 文件及文件内包含的外部引用文件（CSS、JS）及图片，多媒体等资源。

4.根据请求回来的 HTML 文件开始从上到下解析 HTML 文档生成 DOM 节点树（DOM tree），也叫内容树（content tree），此时解析过程中碰见了外部引用的 CSS 文件，去服务器请求回 CSS 文件，构建 CSSOM (CSS Object Model)树，加载解析样式生成 CSSOM 树。CSSOM 的解析过程与 DOM 的解析过程是并行的。

5.此时继续解析 HTML，又碰见了外部引用的 JS 文件，去服务器请求回 JS 文件，加载并执行 JS 代码（包括内联代码或外联 JS 文件）。

6.此时在解析 HTML 过程中发现一个标签内引用了一张关联图片，去服务器请求回这张图片，浏览器解析器不会等待图片下载完，而是继续渲染后面的代码。

7.此时 HTML 代码和 CSS 代码已经形成 DOM 树和 CSSOM 树,并生成渲染树(render tree)，渲染树按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。

8.布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置。

9.绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过 UI 后端模块完成。

 

二、阻塞
我们可以注意到上面介绍浏览器在解析过程中遇到css和js文件会去服务器请求这些文件，此时浏览器会停止解析节点。

原因：

当浏览器发现任何与节点相关的样式时（即外部样式表、内部样式表或行内样式），就立即停止渲染 DOM ，并用这些节点来创建 CSSOM。这就是人们称 CSS 阻塞渲染的原因。
由于脚本可能需要访问或操作之前的 HTML 或样式，因此浏览器必须停止解析节点，完成创建 CSSOM，执行脚本，然后再继续。这就是人们称 JavaScript 阻塞解析器的原因。
那我们对此如何优化呢？

浏览器是自上而下的加载，既然css与js文件会阻塞渲染，那我们就把它们放到最后再去请求解析。我们最常见的做法就是 将css文件放在head标签中，js文件放在body结束标签前。这里注意一点，css文件我们放到了页面的头部，没有按照想的来做。这是为什么呢？因为浏览器在没有进行绘制渲染时，我们看到的只是一个空白页面，它不会先将dom渲染出来，浏览器在请求外部文件、图片等时是异步进行的，我们希望css文件能早一点请求回来，好尽快完成CSSOM的创建，所以就将其放到了头部。这样用户就能第一时间看到页面内容，减少白屏的等待时间，提高用户的体验。