浅析前端页面渲染机制

表示须要构造的脏位值有两种：

“dirty”–自身改变，须要回流
“children are dirty”–子节点改变，须要回流

构造是一个大年夜上到下，大年夜外到内进行的递归过程，大年夜根衬着对象，即对应着HTML文档根元素，然后下一级衬着对象，如对应着元素，如斯层层递归，依次计算每一个衬着对象的几何信息(地位和尺寸)。

几何信息-地位和尺寸，即相对于窗口的坐标和尺寸，如根衬着对象，其坐标为(0， 0)，尺寸等于视口

尺寸(浏览器窗口的可视区域)。

浏览器内核

2.Webkit中的构造(Layout)过程，在Gecko中称为回流(Reflow),本质是一样的，后文会解释回流的另一层含义–从新构造;

1.计算此衬着对象的宽度(width);

当我们拜访一个页面时，浏览器衬着事宜具体日记图如下：

2.遍历此衬着对象的所有子级，依次：

a.设置子级衬着对象的坐标

b.断定是否须要触发子衬着对象的构造或回流办法，计算子衬着对象的高度(height)

3.设置此衬着对象的高度：依正人衬着对象的累积高，margin和padding的高度设置其高度;

4.设置此衬着对象脏位值为false。

强迫回流

在衬着树构造完成后，再次操作文档，改变文档的内容或构造，或者元素定位时，会触发还流，即须要从新构造，如请求某DOM的”offsetHeight”样式信息等诸多情况：

DOM操作，如增长，删除，修改或移动;
变革内容;
激活伪类;
拜访或改变某些CSS属性(包含修改样式表或元素类名或应用JavaScript操作等方法);
浏览器窗口变更(滚动或尺寸变更)

$('body').css('padding'); // reflow 
 
$('body')[0].offsetHeight; // relow

有过CSS3动画开辟经验的同窗可能会有经历，如下入场动画：

.slide-left { 
 
    -webkit-transition: margin-left 1s ease-out; 
 
    -moz-transition: margin-left 1s ease-out; 
 
    -o-transition: margin-left 1s ease-out; 
 
    transition: margin-left 1s ease-out; 
 
}

var $slide = $('.slide-left'); 
 
$slide.css({ 
 
    "margin-left": "100px" 
 
}).addClass('slide-left'); 
 
$slide.css({ 
 
    "margin-left": "10px" 
 
});

我们会发明并没有效不雅，为什么呢?因为对margin-left的修改并没有触发还流，元素margin-left值的改变被缓存，如不雅我们在中心强迫触发还流：

再看就达到了预期效不雅。

最后是绘制(paint)阶段或重绘(repaint)阶段，浏览器UI组件将遍历衬着树并调用衬着对象的绘制(paint)办法，将内容展如今屏幕上，也有可能在之后对DOM进行修改，须要从新绘制衬着对象，也就是重绘，绘制和重绘的关系可以参考构造和回流的关系。

全局与局部绘制

与构造类似，绘制也分为全局和局部绘制，即半数个衬着树或某些衬着对象进行绘制。

触发重绘

我们已经知道很多操作可能会触发还流，那么什么时刻可能触发重绘呢，平日，当改变元素的视觉样式，如background-color,visibility，margin，padding或字体色彩时会触发全局或局部重绘，如：

4/5 首页上一页 2 3 4 5 下一页尾页

　　推荐阅读

　　在终端中优雅地编写Python

媒介最早我也执偾在办事器上编辑文件的时刻用用vim来改改法度榜样，并没有把vim当做本身的主力编辑器。然则有时的一次机会须要改一个奇葩的输入文件的格局，用了下Vim的宏录制，尝到了甜头，于是后面就开端用Vim来写>>>详细阅读

本文标题：浅析前端页面渲染机制

地址：http://www.17bianji.com/lsqh/34753.html

1/2 1