浏览器的渲染过程及document和Document的区别

系统管理员 2023-06-18 13:00 41阅读 0赞

## 浏览器的渲染过程： ##

1，浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个标签都是DOM树中的一个节点，根节点就是常用的document对象。DOM树里包含了所有HYML标签，包括display:none隐藏，还有用js动态添加的元素等。  
2.浏览器把所有样式解析成样式结果体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉\_开头的样式。  
3，DOM Tree 和样式结构体组合后构建render tree,render tree 类似于DOM tree，区别很大，render tree能识别样式，render tree中每个node都有自己的style,而且render tree不包含隐藏的节点（比如display:none的节点，还有head节点），因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。注意 visibility:hidden隐藏的元素还是会包含到render tree中，因为visibility:hidden会影响布局，会占有空间。根据css2的标准，render tree中的每个节点都称为Box,理解页面元素为一个具有填充，边距，边框和位置的盒子  
4一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面。所以当render tree中的一部分因为元素的尺寸，布局，隐藏等改变而需要重新构建，这就称为回流。当render tree中的一些元素需要更新属性，而这些属性只会影响元素的外观，风格，而不会影响布局，比如background-color.这就称为重绘。  
注意：没个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构建这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中。

## document和Document的区别 ##

1.document 代表文档  
2.Document 构造函数  
document —HTMLDocument.prototype—Document.prototype  
1.getElementById方法是定义在Document.prototype上的，即Element节点上不能使用  
2.getElementsByTagName方法定义在Document.prototype和Element,prototype  
3.getElementByClassName,querySelectorAll,querySelector在Document和Eelement都定义了  
4.getElementByName方法定义在HTMLDocument.prototype上的，即非html中的document以外不能使用（xml,document,Element）  
5,HTMLDocument.prototype上定义一些常见的属性，body，head分别指代HTML文档中的标签  
6.Document.prototype定义了documentElemnet属性，指代的是html,是文档根元素