HTML+CSS+JS如何变成网页页面

HTML

超文本标记语言，每个标签都有自己的语义。

CSS

改变原有HTML的字体颜色、大小等信息，称为层叠样式，他是由选择器和属性组成。

JavaScript

使网页可以动起来，可以用来修改css的样式值

渲染流水线

构建DOM树

浏览器无法直接理解HTML，所以需要将html转化为浏览器可以理解的DOM树

计算样式

1.把css转化为浏览器可以理解的结构

css样式来源一共有三种：通过link引用的css文件，使用style标记，元素内部的style属性内嵌的css
当渲染引擎接收到css文本的时候会执行一个转化操作，将css文本转化为浏览器可以理解的styleSheets

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

当我们吧css转化为浏览器可以理解的结构，接下来是对属性值进行标准化操作。

body { font-size: 2em }
p {color:blue;}
span  {display: none}
div {font-weight: bold}
div  p {color:green;}
div {color:red; }

可以在上稳重看到有很多例如2em，blue相关的值渲染引擎很难理解，所以需要将所有的值转化为渲染引擎较为容易理解的值，这个过程就叫做属性标准化。

上面代码执行属性标准化如图样式

3.计算dom树结点的具体样式

我们可能会用到一些sass或者less的语法或者是css的继承规则语法例如：

body { font-size: 20px }
p {color:blue;}
span  {display: none}
div {font-weight: bold;color:red}
div  p {color:green;}

下面这样表表示dom结点效果图

可以看到所有的自己饿点都继承了父亲结点的样式。

布局阶段

计算DOM树可见元素的几何位置，创建布局和布局计算。

1.创建布局

dom树包含有可见部分和不可见部分，比如head标签以及使用了display：none属性的元素。所以在显示之前，需要额外构建一颗只包含可见元素布局树。

为了构建布局树，浏览器大约需要完成：
1.遍历DOM树中所有可见结点，并且把这些结点都加载到布局树中。
2.对于不可见的结点布局树会忽略掉，例如head标签的全部内容，例如body.p.span这个元素，因为它的属性包含dispaly：none，所以这个元素也没有被包进布局树。

2.布局计算

在执行布局的时候，会把布局运算结果写回到布局树中，所以布局树既是输入内容也是输出内容，这个布局阶段一个不合理的地方没有清晰的把输入内容和输出内容区分开，后面chrome会使用LayoutNG，试图更清晰的分离输入和输出。

分层

渲染引擎在执行完布局树还没有进行绘制界面，首先执行的是为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）在chrome开发者工具的"layers"标签可以看到分层的情况。
浏览器会把实际的页面分成很多层，最后把这些图层进行叠加后变为最终页面。

通常情况下，并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就属于父节点的图层。
满足什么条件，渲染引擎才会为特定的节点创建新的图层。通常会满足两点：
第一：拥有层叠上下文属性的元素会单独的一层。
页面是一个二位平面，但是层叠上下文可以让HTML元素具有三维概念，这些HTML元素按照自身属性优先级分布在垂直于这个二维平面的z轴

第二点：需要剪裁的地方也会被创建为图层

    

        
所以元素有了层叠上下文的属性或者需要被剪裁，那么就会被提升成为单独一层，你可以参看下图：
        
从上图我们可以看到，document层上有A和B层，而B层之上又有两个图层。这些图层组织在一起也是一颗树状结构。
        
图层树是基于布局树来创建的，为了找出哪些元素需要在哪些层中，渲染引擎会遍历布局树来创建层树（Update LayerTree）。
 
    

在这里我设定div为200*200的像素，但是我门div里面的文字比较多，所以浏览器就会进行剪裁，渲染引擎会把一部分用于显示在div区域。

图层绘制

完成图层构建后渲染引擎就会对图层树的每个图层进行绘制，在开发者工具中的Layers标签可以看到图层的绘制列表：

删格化

绘制操作是由渲染引擎的合成线程来完成：

合成和显示

当线程执行完删格化后就会成生成绘图命令，浏览器进程的viz组建就会将内容会知道内存中，展现到屏幕。

渲染流水线总结