说一说HTML渲染过程或者浏览器渲染原理

从输入url到页面渲染，说完之前的网络请求，到返回数据，就到了浏览器渲染了。浏览器渲染，基本就是将url对应的资源，通过浏览器下载，之后引擎解析，最终将文本、图片、视频、文件、组件、字体等内容渲染出来。

目录

重绘与重排

浏览器渲染的几个概念

渲染的过程

DOM树

CSSOM树

渲染结合树

绘制

重排

---

重绘与重排

说到浏览器渲染呢，时刻都要记得这两个名词。Repaint（重绘）与Reflow（重排）。

重绘呢，看表层意思就是重新绘制，比如改变某个元素的背景色值，改变文字的色值，改变边框的色值，再比如隐藏显示，这里说的是visibility为hidden的那个隐藏显示，不是display为node的那个知识点。如果将某个元素的色值做了修改，就会造成重新绘制。就好比有一张纸，我们用橡皮把内容擦掉，重新写内容，而不是把纸撕掉，重头再来。所以，重绘不会带来重排。

重排呢，基本就是布局改变造成的。比如登录前，是登录+注册两个按钮，登录后冒出一排按钮来，地方肯定不够了，布局就会改变；比如我们项目中如果有个区域，刚开始有个初始化的大小布局，等网络请求完成后，发现内容多了，把网页撑大了；比如做电商平台的时候，某个楼层未登录的时候是有的，等登录了以后新增了一个，或者去掉一个，都是有可能的；又或者列表里删除了一项。试想一下，我们每个元素渲染在屏幕的某个位置，这都是需要复杂的计算的，突然发生布局变化了，不仅要重排，重排的过程还要整体重绘一次。

浏览器渲染的几个概念

说到浏览器渲染，我们就不得不提到几个概念。

HTML解释器，目的是分析HTML文档中的标签，语义化，从DOCTYPE到head到body，一直到结束的html标签，整体最终生成文档对象模型，也就是所谓的DOM树；

CSS解释器，我们习惯于将css文件或者样式放于文档头部，是希望有限加载css内容，去解析css内容。

Javascript引擎，试想一下，我们定义了一个var a = ; 你说代码会不会报错，是哪里报的错呢？JS被下载、加载、解析，最终作用域DOM和CSS样式。

渲染的过程

DOM树

html标签是有一个轮廓的，例如从DOCTYPE标签，到html，到body，再最终到结束的html标签，这是他的轮廓。然后他又规定了每个区域内应该放置meta，或者是style，或者是一些布局式的标签。

浏览器将这些标签解析，最终生成DOM树。

CSSOM树

css有外部引入的，有行内的，有设置有!important的，但终归他们是与DOM树要有联系的，也就是说，这些CSS内容终归是要作用于某个DOM节点的。而根据DOM结构解析出来的CSS结构树，就是所谓的CSSOM树啦。

渲染结合树

渲染的时候，排除CSS样式丢失的情况，DOM需要和CSS树一起组合起来。所以CSS文件的下载过程最好就得快一些，因为一旦CSS下载解析过程太慢的话，很明显，这个解析组合的过程就会受到阻塞。

同样，为了快速渲染网页，我们希望网页内首次加载的DOM结构最好也简单越好，少越好，从而再加上CSS样式加载的快一些，这样组合的过程就会更加效率。

这个过程中，就需要计算某个区域的宽高，设定某个区域某个元素的色值，是否是display为node，是否visibility为hidden，head区域的排除等。

绘制

有了绘制的图本以后呢，浏览器就会从上至下的绘制。有时候浏览器内容过多，良好的用户体验肯定是从上往下顺序渲染，所以大家逐渐排除使用table、iframe等这种组件，避免渲染等待，最后一次性渲染。

重排

渲染完成后呢，会解析JS内容，执行JS内容，一旦JS中有改变DOM布局的操作，将会造成网页的重排，而重排可能就又要走一遍整体的过程了。