html网页渲染的基本过程

6257rv7

基本过程

1．解析HTML文件，创建DOM树

2．解析CSS,形成CSS对象模型

3．将CSS与DOM合并，构建渲染树（renderingtree）

4．布局和绘制

对渲染树上的每一个元素，计算它的坐标，叫作之为布局。浏览器采用一种流办法，布局一个元素只需经过一次，然则表格元素必须经过多次。

最后，渲染树上的元素最终展示在浏览器里，这一过程叫作为“painting”。

当用户与网页交互，或脚本程序改动修改网页时，前文说到的有些操作将会重复执行，由于网页的内在结构已然出现了改变。

Repaint(重绘)

重绘是改变不影响元素在网页中的位置的元素样式时，譬如bac公斤round-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器会按照元素的新属性重新绘制一次(这便是重绘，或说重新构造样式)，使元素呈现新的外观。重绘不会带来重新布局，因此并不必定伴同重排。

Reflow（重排）

渲染对象在创建完成并添加到渲染树时，并不包括位置和体积信息。计算这些值的过程叫作为布局或重排。

当改变影响到文本内容或结构，或元素位置时，重排或说重新布局就会出现。这些改变一般由以下事件触发：

DOM操作（元素添加、删除、修改或元素次序的改变）；

内容变化，包含表单域内的文本改变；

CSS属性的计算或改变；

添加或删除样式表；

更改“类”的属性；

浏览器窗口的操作（缩放，滚动）；

伪类激活（悬停）。

"重绘"不必定必须"重排"，例如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，由于布局无改变。

然则，"重排"必然引起"重绘"，例如改变一个网页元素的位置，就会同期触发"重排"和"重绘"，由于布局改变了。

浏览器怎样优化渲染？

（1）将多次改变样式属性的操作合并成一次操作

（2）将必须多次重排的元素，position属性设为absolute或fixed，

这般此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

（3）因为display属性为none的元素不在渲染树中，对隐匿的元素操作不会诱发其他元素的重排。

倘若要对一个元素进行繁杂的操作时，能够先隐匿它，操作完成后再表示。这般仅在隐匿和表示时触发2次重排。

看这个的时候又想到display:none、visibility:hidden和overflow:hidden的区别，顺便带一下。

display:none和visibility:hidden都是把网页上某个元素隐匿起来的功能

display:none:

隐匿元素，不占网页中的任何空间，让这个元素彻底消失（看不见亦摸不着）,因为会影响到网页的空间，因此会导致一次重排和重绘。

visibility:hidden:

他是把那个层隐匿了，亦便是你看不到它的内容然则它内容所占据的空间还是存在的。（看不见但摸得到），该操作不会对页面有影响，因此只会导致一次重绘。

overflow:hidden:

让超出的元素隐匿（不占据网页空间），便是在设置该属性的时候他会按照你设置的宽高把多余的那部分剪掉，会导致一次重排和重绘。