浅析Chrome的渲染流程（上）

通常，我们编好了HTML、CSS、JavaScript等文件，经过浏览器就会显示出漂亮的页面，但是浏览器是怎么将它们转化成页面的呢？有兴趣的朋友请往下看。

HTML、CSS、JavaScript是什么

首先我们看下面的图：

从图中可以看出，HTML的内容是由标记和文本组成。标记也称为标签，每个标签都有它自己的语义（div、span除外），浏览器会根据标签的语义来正确展示HTML内容。比如上面的<p>标签是告诉浏览器在这里的内容需要创建一个段落，中间的文本就是段落中需要显示的内容。

如果需要改变HTML的字体颜色、大小等信息，就需要用到CSS。CSS又称为层叠样式表，是由选择器和属性组成，比如图中的p选择器，它会把HTML里面的<p>标签的内容选择出来，然后再把选择器的属性值应用到<p>标签内容上。选择器里面有个color属性，它的值是red，这是告诉浏览器引擎把<p>标签的内容显示红色。

JavaScript（简称JS），使用它可以让网页的内容 “动” 起来，比如上图中，可以通过JavaScript来修改CSS样式值，从而达到修改文本颜色的目的。

由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入HTML经过这些子阶段，最后输出像素（一张位图）。我们把这样的一个处理流程叫做渲染流水线，其大致流程如下图所示：

按照渲染的时间顺序，流水线可以划分如下几个阶段：构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

构建DOM树

为什么要构建DOM树呢？