html,css,javascript是怎样变成页面的

html,css,javascript是怎样变成页面的

浏览器是多进程的，有浏览器主进程，网络进程，渲染进程，插件进程等，在将html，css，javascript解析成一个页面的时候，就需要多个进程的分工合作。
当浏览器接受到一个请求的响应数据，并且该数据的类型（content-type）为text/html，浏览器就会知道这是一个html页面，于是网络进程就会将收到的数据交给渲染进程后，就进入了渲染阶段，也就是在这一个阶段，浏览器会根据数据生成一个新的页面。

在执行的过程中，会被分为很多个子阶段，输入的HTML经过这些子阶段，最后会输出像素，这个处理过程叫做渲染流水线，按照渲染的时间顺序，流水线可分为如下几个子阶段：

构建DOM树

网络进程交给渲染进程的字节流渲染进程是无法识别的，需要先转化为dom树，在渲染进程内部有个html解析器，就负责将字节流转化为dom树

解析器的工作过程

通过分词器将字节流转化为token，token分为tag token 和文本token，tag token又分为 starttag token 和 endtag token，比如 就是一个starttag token， 就是一个endtag token 接着需要将token解析为dom节点，并将dom节点添加到dom树中，这两个过程是同步进行的 html解析器维护了一个token的栈结构，该token栈主要用来计算节点之间的父子关系，在第一个阶段中生成的token会被按照顺序压入这个栈中，具体规则如下： 如果压入到栈中的是StartTag Token，HTML 解析器会为该 Token 创建一个 DOM 节点，然后将该节点加入到 DOM 树中，它的父节点 就是栈中相邻的那个元素生成的节点。 如果分词器解析出来是文本 Token，那幺会生成一个文本节点，然后将该节点加入到 DOM 树中，文本 Token 是不需要压入到栈中，它的父节点就是当前栈顶 Token 所对应的 DOM 节点。 如果分词器解析出来的是EndTag 标签，比如是 EndTag div，HTML 解析器会查看 Token 栈顶的元素是否是 StarTag div，如果是，就将 StartTag div 从栈中弹出，表示该 div 元素解析完成。

样式计算

样式计算的目的是为了计算dom节点中每个元素的具体样式，具体可以分为以下三个步骤：

把css转化为浏览器能够理解的结构，可以用document.styleSheet查看

转换样式表中的属性值，使其标准化

属性标准化就是将一些属性值转化为渲染引擎容易理解的，标准化的计算值，比如一些字体的单位是em的就需要转化为px

算出dom树中每个节点的具体样式

样式计算的第一个规则就是css继承，第二个是层叠

总之，样式计算阶段的目的是为了计算出DOM节点中每个元素的具体样式，在计算过程中需要遵守CSS的继承和层叠两个规则。这个阶段最终输出的内容是每个DOM节点的样式，并被保存在ComputedStyle的结构内。

布局阶段

布局也就是计算出dom树中可见元素的几何位置，chrome在布局阶段需要完成两个任务：创建布局树和布局计算

创建布局树

在DOM树一般还会含有很多不可见的元素，比如head标签，还有使用了display:none属性的元素。所以在显示之前，我们还要额外地构建一棵只包含可见元素布局树。

为了构建布局树，浏览器大体上完成了下面这些工作

遍历DOM树中的所有可见节点，并把这些节点加到布局中； 而不可见的节点会被布局树忽略掉，如head标签下面的全部内容，再比如body.p.span这个元素，因为它的属性包含 dispaly:none，所以这个元素也没有被包进布局树

布局计算

现在我们有了一棵完整的布局树。那幺接下来，就要计算布局树节点的坐标位置了

分层

接下来，渲染引擎需要为特定的节点生成专用的图层，并生成一颗对应的图层树。图层叠加起来就是最终的页面图像

通常情况下，并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那幺这个节点就从属于父节点的图层。如上图中的span标签没有专属图层，那幺它们就从属于它们的父节点图层。但不管怎样，最终每一个节点都会直接或者间接地从属于一个层。

满足以下条件才会被提升为单独的层

第一点，拥有层叠上下文的元素会被提升为单独的一层

页面是个二维平面，但是层叠上下文能够让HTML元素具有三维概念，这些HTML元素按照自身属性的优先级分布在垂直于这个二维平面的z轴上。你可以结合下图来直观感受下：

需要剪裁的地方也会被创建为图层

标签里面的内容超出了标签的宽度和高度，就会出现剪裁。出现这种裁剪情况的时候，渲染引擎会为文字部分单独创建一个层，如果出现滚动条，滚动条也会被提升为单独的层

图层绘制

在完成图层树的构建之后，渲染引擎会对图层树中的每一个图层进行绘制

绘制的过程就是把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表

绘制列表中的指令其实非常简单，就是让其执行一个简单的绘制操作，比如绘制粉色矩形或者黑色的线等。而绘制一个元素通常需要好几条绘制指令，因为每个元素的背景、前景、边框都需要单独的指令去绘制。所以在图层绘制阶段，输出的内容就是这些待绘制列表。

栅格化操作

绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。

当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合成线程

通常一个页面可能很大，但是用户只能看到其中的一部分，我们把用户可以看到的这个部分叫做视口（viewport）。

在有些情况下，有的图层可以很大，比如有的页面你使用滚动条要滚动好久才能滚动到底部，但是通过视口，用户只能看到页面的很小一部分，所以在这种情况下，要绘制出所有图层内容的话，就会产生太大的开销，而且也没有必要。

基于这个原因，合成线程会将图层划分为图块（tile），这些图块的大小通常是256x256或者512x512

合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。而图块是栅格化执行的最小单位。渲染进程维护了一个栅格化的线程池，所有的图块栅格化都是在线程池内执行的，运行方式如下图所示：

通常，栅格化过程都会使用GPU来加速使用，使用GPU生成位图的过程叫做快速栅格化，或者GPU栅格化，生成的位图会保存在GPU内存中

合成和显示

一旦所有的图块都被栅格化，合成线程就会生成一个绘制图块的命令 DrawQuad ，然后将该命令提交给浏览器进程

浏览器进程里面有一个叫viz的组件，用来接收合成线程发过来的DrawQuad命令，然后根据DrawQuad命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。

到这里，经过这一系列的阶段，编写好的HTML、CSS、JavaScript等文件，经过浏览器就会显示出漂亮的页面了。

总结

一个完整的渲染流程大致可总结为如下

渲染进程将HTML内容转换为能够读懂的DOM树结构。 渲染引擎将CSS样式表转化为浏览器可以理解的styleSheets，计算出DOM节点的样式。 创建布局树，并计算元素的布局信息。 对布局树进行分层，并生成分层树。 为每个图层生成绘制列表，并将其提交到合成线程。 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。 合成线程发送绘制图块命令DrawQuad给浏览器进程。 浏览器进程根据DrawQuad消息生成页面，并显示到显示器上

html,css,javascript是怎样变成页面的