浏览器渲染原理和流程

今天碰到一个问题，要谈一下浏览器的渲染过程。于是今天去学习了一下，在此做了总结。

浏览器的内部都有一个叫做渲染引擎的东西，负责渲染呈现网页的内容，不同的浏览器有不同的渲染引擎。一般情况下，渲染引擎可以显示HTML，CSS，JS，XML和一些媒体数据，像一些ＷORD,PDF之类的也可以用一些专用插件渲染。

基本流程

1、渲染引擎通过网络获得文档的内容

2、解析HTML，构成DOM树

3、解析CSS，构成CSS规则树

4、将DOM树和CSS规则树合并起来形成Render树

5、Render树进行布局（layout），计算每个节点在屏幕中的位置

6、绘制，按照计算的规则将内容绘制到屏幕上

7、reflow（回流），当浏览器的某些节点发生变化影响到了布局时，就会倒回去重新渲染。例如：元素的显示与隐藏，折叠菜单等引起了页面上元素的大小，位置，内外边距等。回流会从文档的根节点html标签开始，向下依次计算所有节点的大小和位置，引起部分或整个页面的重新渲染。

8、repaint（重绘），当某些元素发生像颜色等一些不会影响布局的变化时，会触发重绘，此时元素的大小和位置不会发生变化。

 

注意：

1、display:none；该元素以及它的所有后代元素都会隐藏，会把元素从DOM树中删除，其他元素会立马占据它的位置，引起了布局的变化是，所以会触发回流。

2、visibility:hidden;单纯的将元素不显示，但元素位置仍占据着，类似于“透明”，会引起重绘。

3、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果再给子元素设置visibility:visible,则子元素又会显示出来。

4、visibility: hidden不会影响计数器的计数。例如：在ol中，visibility:hidden;的 li 仍然占据着有序列表的序号，而display:none:不会。