浏览器的渲染过程:
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,是文档根元素