终究到了规划的部分了！
规划
当衬着对象被建立并增加到树中，是没有位置和大小的，盘算这些值的历程称为layout或reflow。
规划是一个递归历程，由根衬着对象最先，对应html文档元素，规划继承递归的经由过程一些或一切的frame层级，为每一个须要多少信息的衬着对象举行盘算。跟衬着对象位置是0，0。一切衬着对象都有一个layout或reflow要领，每一个衬着对象挪用须要规划的children的layout要领。
浏览器会对发作变化的显现器以及其子代标注为”dirty”，示意须要举行layout
标记分为两种：”dirty”和”children are dirty”。
“children are dirty”示意只管显现器自身没有变化，但它至少有一个子代须要规划。
这里须要申明一下重排reflow和重绘repaint。
重排 reflow
当转变影响到文本内容、构造或元素位置时，就会发作重排。
一般有以下事宜触发：
网页初始化时
DOM操纵（元素增加、删除、修正、元素递次变化）
内容变化，包含表单域内文本转变
CSS属性的盘算或转变
增加或删除款式表
变动“类”属性
浏览器窗口的缩放、转动等
伪类激活（比方:hover悬停）
重绘 repaint
转变不会影响元素的位置及大小的款式时，则会触发重绘。换句话说，元素转变表面时会触发这个行动，不包含修正元素的多少属性。比方background,visibility。
异步layout和同步layout
异步layout，简朴来讲，就是指浏览器为了尽量削减reflow和repaint的操纵，而将这些操纵积累起来，再统一做一次reflow。
什么时候会发生同步layout呢？
比方resize窗口、转变页面默许字体时，或者是剧本作出以下要求：
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
IE中的 getComputedStyle(), 或 currentStyle
那末浏览器须要马上layout以返回最新的值。
layout历程
parent衬着对象决议宽度
parent衬着对象读取children,设置其x,y；在须要时【标记为dirty或全局layout等】挪用child衬着对象的layout，盘算child高度；parent运用child的积累高度，以及margin和padding的高度来设置本身的高度；末了将dirty标志设置为false
绘制
和规划一样，绘制也可所以全局的——绘制完全的树——或增量的。在增量的绘制历程当中，一些衬着对象以不影响整棵树的体式格局转变，转变的衬着对象使其在屏幕上的矩形地区失效，这将致使操纵系统将其看做dirty地区，并发生一个paint事宜，操纵系统很奇妙的处置惩罚这个历程，并将多个地区合并为一个。Chrome中，这个历程更庞杂些，由于衬着对象在差别的历程中，而不是在主历程中。Chrome在肯定程度上模仿操纵系统的行动，表现为监听事宜并派发消息给衬着根，在树中查找到相干的衬着对象，重绘这个对象（往往还包含它的children）。
绘制递次
一个块衬着对象的客栈递次是：
背景色
背景图
border
children
outline
【待更新】
参考文献：
