浏览器渲染简述

我们知道浏览器会把我们写的HTML，CSS等代码会渲染成页面，现在我们探讨一下

浏览器怎么样会把HTML文本渲染成页面呢？

渲染引擎

渲染引擎包括HTML解析器，CSS解析器，布局和JS引擎，常见的渲染引擎有如下：

HTML文本到页面的第一步

HTMl到页面的第一步是DOM树，首先HTML是文本，就是字符串，但DOM树是对象，这个过程很复杂，但我们这里举个例子，这里有个表达式：

2+3-4

我么想把这个表达式解析，我们想到的是这个样子的.


我们的文本先是词法解析，将文本解析成最小的单元(token),然后通过一系列规则，语法解析，然后形成树，当然CSS，Javascript也是一样的，先词法解析，然后语法解析，然后形成树。

HTML文本到页面的第二步

首先形成了HTMl解析成DOM树，在这个同时CSS按一些规则解析成样式规则，然后DOM Tree和样式规则形成Render Tree( 渲染树),然后发生layout(重排),然后发生Painting(重绘),最终是展示在页面上.
从Render Tree 到layout相当于就是搭房子的骨架，就是把元素放在了位置上等，元素的和模型啊，元素的大小啊等，然后就是Painting,就是装修，就是元素的颜色啊等。

DOM Tree和Render Tree 的区别

Dom Tree类似于Render Tree,但区别很大，因为Render Tree能够识别样式，Render Tree的每一个节点都有自己的样式。

• 不可见元素 比如 header 里的元素，比如 display:none;等元素在DOM树存在，但在渲染树不存在
• 绝对定位的元素 比如，设置了position:absolute等的元素不会存在与渲染树中，会脱离一般的渲染流程。

Reflow 和 Repaint

Render树生成后导导致Reflow和Repaint，并且一个页面渲染完毕后，随着用户的操作，或者数据的变化，网页还会进行重新渲染。

所有会触发元素布局发生变化的修改，都会导致重拍(reflow).比如窗口尺寸发生变化，删除，添加 DOM元素，修改了影响元素盒子大小的CSS属性，如width,height,padding等。

所有对元素视觉表现属性的修改，都会导致重绘(repaint)。比如修背景颜色，文字颜色等.