呈现器的布局和layout的过程

1 .呈现器在创建完成并添加到呈现树时，并没有包含位置和大小信息，计算这些值的时候叫做布局或重排
2 .html采用基于流的布局模型，这意味着大多数情况只需要一次遍历就能计算出几何信息。处于流中考后位置元素通常不会影响到靠前位置元素的几何特征，因此布局可以从左至右，从上到下的顺序便利文档
3 .唯一例外的就是html的表格计算，需要不止一遍的遍历
4 .坐标系是相对于根框架建立的，使用的是上坐标和左坐标
5 .布局是一个递归的过程，他从根呈现器(html)元素开始，然后递归遍历部分或所有的框架层次结构，为每一个需要计算的呈现器计算几何信息
6 .根呈现器的位置左边是0，0 。其尺寸为视口，也就是浏览器的可见区域，所以浏览器调整大小会涉及到重排。。
7 .所有呈现器都由一个layout 或者reflow方法。每一个呈现器都会调用其需要进行布局的子代的layout方法

layout

1 .每一个render节点加入render树的时候，不包含位置和尺寸，计算元素的位置和尺寸的过程称为layout
2 .layout是一个递归的过程，每个节点都负责自己极其子节点的layout.

1 .父节点确定自己的宽度
2 .父节点完成子节点位置，确定其相对坐标
3 .父节点确定自己的宽度和高度
4 .父节点根据所有的子节点高度计算自己的高度

呈现器的dirty位系统与各种布局介绍

1 .为了避免对所有细小更改都进行整体布局，浏览器采用了一种dirty位系统，如果某个呈现器发生了更改，或者将其自身子代标注为dirty，则需要进行布局
2 .还有一种是children are dirty,尽管呈现器自身没有变化，但是他至少有一个子代需要布局
3 .全局布局：影响所有呈现器的全局样式更改，例如字体大小改变，屏幕大小的改变
4 .增量布局：只对dirty呈现器进行布局。
5 .增量布局是异步执行的，firefox将增量布局的“reflow命令”加入队列，而调度程序会触发这些命令进行批量执行。
6 .请求样式信息的脚本也会同步触发增量布局。offsetHeight
7 .全局布局是同步触发的，有时，当初始布局完成之后，一些属性，如位置滚动发生变化，布局就会作为回调而触发。
8 .

呈现器的布局处理与宽度计算

1 .呈现器确定自己的宽度
2 .父呈现器依次处理子呈现器。防置子呈现器（x,y）的位置。如果有必要，调用子呈现器的布局，这会计算子呈现器的高度
3 .父呈现器根据子呈现器的累加高度以及边距和补白的高度来设置自身高度，此值也可供父呈现器使用
4 .将dirty位设置为false
5 .呈现器的宽度是根据容器块的宽度，呈现器样式中的width属性，以及边距和边框计算出来的
6 .元素的width样式属性，会根据容器宽度的百分比计算地出一个绝对值，然后加上水平方向的边框和补白。
7 .如果呈现器在布局的过程中需要换行，会立即停止布局，并告知其父代需要换行，父代会创建额外的呈现器，并对其调用布局。
8 .

呈现器的绘制

1 .在绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上
2 .绘制工作使用用户界面的基础组件完成
3 .绘制分为全局和增量两种
4 .在chrome中，浏览器的展示层会监听这些事件，并将消息委托给根节点，然后遍历呈现树，直到找到相关的呈现器，该呈现器会重新绘制自己，以及他的子代
5 .堆栈样式上下文

1 .z-index属性代表了框的第三个纬度，也就是沿着“Z”轴的元素
2 .在每一个堆栈中，会首先绘制后面的元素，然后在顶部绘制前面的元素，以便靠近用户。如果出现重叠，新绘制的元素就会覆盖之前的元素
3 .堆栈是按照z-index排序的，具有z-index属性的框形成了本地堆栈
4 .https://www.w3.org/TR/CSS21/zindex.html
5 .css规范定义了绘制流程的顺序。其实就是元素进入堆栈样式上下文的顺序，这些堆栈会从后往前绘制。
6 .除了元素之间的绘制顺序，还有元素内部的绘制顺序，块状呈现器的堆栈顺序如下：背景颜色，背景图片，边框，子代，轮廓
7 .

firefox的绘制策略

1 .遍历整个呈现树，为绘制的矩形建立一个显示列表
2 .列表中按照正确的绘制顺序包含所有的呈现器
3 .优化：被不透明元素完全遮挡住的元素。
4 .

webkit矩形储存

1 .在重新绘制之前，webkit会将原来的矩形另存为一张位图，然后只绘制新旧矩形之间的差异部分
2 .动态变化的绘制策略

1 .元素的颜色改变之后，只会对元素进行重绘
2 .元素的位置改变之后，只会对该元素以及子元素进行布局和重绘
3 .添加dom节点后，只会对该节点进行布局和重绘
4 .一些重大变化，如改变字体，会导致缓存无效，使得整个呈现树进行重新布局和绘制

呈现引擎的线程问题

1 .呈现引擎采用了单线程，所有的操作都是在单线程中进行的。除了网络操作，网络操作是可以由多个进程并行执行的，并且连接数量是有限制的，通常是2-6个
2 .在其他浏览器中，该线程就是浏览器的主线程，而在chrome中，该线程仅仅是标签进程的主线程。除了chrome每个标签页是独立的呈现引擎
3 .浏览器的主线程是事件循环，是一个无限循环，永远处于接受处理状态，并等待事件（布局和绘制）发生，并进行处理