浏览器是如何渲染页面的？（看这一篇就够了！！！！）

1、简介

    浏览器渲染网页是一个十分复杂的过程，这里我们了解一下浏览器渲染网页的大概过程即可，只有真正了解到浏览器渲染网页的每个步骤机制，才能在开发的过程中对每个步骤进行优化。其大概步骤可以分为以下步骤：

1.解析HTML页面，并构建DOM

2.获取外部资源

3.解析CSS样式，并构建CSSOM

4.执行JavaScript代码

5.结合DOM和CSSOM构成渲染树

6.布局和绘制

    在其中前几个步骤可能会因为具体情况的不同而有一点点的差异（下面有详细介绍），接下来让我们来了解这些步骤的具体情况吧。

2、解析HTML页面，构建DOM

首先我们需要了解两个概念，什么是HTML和DOM？

HTML是超文本标记语言，它是组织信息的一种方式，它相当于网页的框架结构，标识了网页的内容。

DOM是文档对象模型，它是HTML和XML文档的编程接口，简单来说，DOM其实就是浏览器自己的语言，每个节点对象相连，形成父子关系。如下图：

将HTML语言解析成DOM对象是有很多个步骤的，经历了字节、字符、Token、节点对象最后才是DOM，过程如下：

 最后形成DOM对象，需要注意的是，DOM是可以部分解析的，换句话说就是，形成DOM这个过程是可以中断的。这个很重要！！

3、获取外部资源

  当我们解析HTML是，当我们遇到<link> 或者调用外部的JS脚本标签<script>时，浏览器会向服务器申请这些资源，解析器提取这些文件。

  解析器在加载CSS文件时继续运行，此时会阻止页面渲染，直到资源加载解析完。

  解析器在加载JS文件时略有不同，解析器会在加载JS文件然后进行解析的同时阻止对HTML的解析，也就是步骤1会被堵塞，直到JS解析完成。但又两个属性会改变这样的情况： defer和async。两者都允许解析器在后台加载JavaScript文件的同时进行运行，但执行的方式不同。如下：

 defer 表示js文件将会延迟执行，直到文档的解析完成为止

<script type="text/javascript" src="js/js_demo.js" defer/>

async表示文件将在加载后立即执行，可能是文件在解析过程中后者解析之后执行的，不能保证一部脚本的执行顺序。

<script type="text/javascript" src="js/js_demo.js"  async/>

4、解析CSS样式，并构建CSSOM

  相对于DOM，CSSOM可能你会听的少很多，其实和DOM一样，CSSOM是又CSS文件解析而来的，它描述了页面上所有的CSS选择器以及它们的层级结构和属性。

  CSSOM与DOM的解析有一个重要的区别，就是CSSOM是不可以部分解析的，也就是说CSSOM的形成是不可以中断的！！

  CSSOM的形成和DOM相似，都是经历了字节、字符、Token、节点对象最后才是CSSOM，过程如下图：

形成的CSSOM如下图：

5、执行JavaScript代码

  解析JS代码可以区别不同的浏览器，浏览器有着自己的JS引擎，它的优化对于获得良好的性能非常重要。

  执行顺序在上面提到过，defer和async以及没有这两个关键字修饰将区别JS的执行时间。

6、结合DOM和CSSOM构成渲染树

  渲染树（render tree）是DOM和CSSOM的组合，DOM和CSSOM对于的节点将会组合起来。

  但值得注意的是，并不是所有的节点都会在视觉上呈现，有些比如说<meta>和<link>标签，以及 css设置过的opacity: 0或visibility: hidden样式的节点。

  不同的浏览器也会有不同的渲染引擎。

7、布局和绘制

  到了上一步，我们已经获取到了完整的渲染树，浏览器知道了要渲染什么，但是不知道在哪里渲染。 因此，必须计算页面的布局（即每个节点的位置和大小）。 渲染引擎从顶部开始一直向下遍历渲染树，计算应显示每个节点的坐标。

  布局是依据盒子模型来构造的，这些盒子在页面上进行排列和嵌套。

  完成之后，最后一步就是获取布局的信息最后绘制到屏幕上，也就是把渲染树上面的信息以像素的形式会制造在页面上。

8、总结

 今天到这里就算结束了，持续关注@小Dai不怠，持续为你普及计算机知识，我们下次见！！