从输入URL到页面加载的过程 (2)

构建DOM树

    首先把HTML文件转换成浏览器能够理解的DOM树结构。

计算样式

     就是为了计算出每个元素的具体样式。

     步骤：

        1.把link引入的外部css文件、<style>标签里的css、style属性内嵌的css样式同一转换成 styleSheets 结构。

        2.将css里面的em  rem计算出准确的值。

        3.根据 继承规则 和 层叠规则 计算出每个DOM结点的样式属性。

布局

        计算出DOM树中可见元素的几何位置。

步骤：

1.生成布局树(LayoutTree)。把一些看不见的结点排除掉，比如：结点的属性 display：none 、head标签等等

     

 

2.计算布局树节点的坐标位置

分层

生成图层树（LayerTree）。简单理解就是  一副图片是由好几层图片重叠而成的，目的为了更方便地实现一些复杂的3D 变换、页面滚动，或者使用 z-indexing 做 z 轴排序等。(Chrome 的“开发者工具”，选择“Layers”标签就能看到)

生成图层的条件有：

    1.具有层叠上下文属性：position、z-idnex、opacity等

    2.文字超出元素时，文字也会单独生成一层，有滚动条，滚动条也是单独一层

图层的绘制

  先把绘制操作分解成一个一个小的绘制指令。 再按照顺序组合成一个绘制列表。就好比要画一幅画，决定先画什么再画什么。（Chrome打开“开发者工具”的“Layers”标签，选择“document”层 ）。

目前为止都是在渲染进程的主线程上进行的。主线程会把绘制列表传给合成线程。

分块

先介绍一个概念。

视口：用户能看到的部分。

合成线程会将图层划分为图块。原因就是：有的图层很大，但是通过视口，用户只能看到页面的很小一部分，所以在这种情况下，要绘制出所有图层内容的话，就会产生太大的开销，而且也没有必要。合成线程会根据视口附近的图块优先进行栅格化。

栅格化

栅格化也就是把图块转换成位图。这个过程是在栅格线程的栅格化线程池中进行的。一般栅格化会借助GPU加速生成位图，这个过程叫快速栅格化，或者 GPU 栅格化，生成的位图被保存在 GPU 内存中。

合成显示

当所有图块被栅格化完成，合成线程会生成一个 DrawQuad 的命令，并将该命令传给浏览器进程中的一个viz组件，浏览器进程从内存中取出放到屏幕上。

大致流程为：