今天碰到一个问题,要谈一下浏览器的渲染过程。于是今天去学习了一下,在此做了总结。
浏览器的内部都有一个叫做渲染引擎的东西,负责渲染呈现网页的内容,不同的浏览器有不同的渲染引擎。一般情况下,渲染引擎可以显示HTML,CSS,JS,XML和一些媒体数据,像一些WORD,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:不会。