浏览器渲染网页的过程

浏览器如何渲染网页?
(1)浏览器将从服务器获取的HTML文档构建成文档对象模型DOM(Document Object Model).
(2)样式将被载入和解析,构成层叠样式表模型CSSOM(CSS Object Model).
(3)在DOM和CSSOM之上,渲染树(rendering tree)将会被创建,代表一系列将被渲染的对象(这在Webkit内核中被称为renderer或者渲染对象render object,在Gecko内核中被称为框架frame)。渲染树映射除了不可见元素(例如或者含有display:none;的标签)外的所有DOM结构。每一段文本字符串都将划分在不同的渲染对象中,每一个渲染对象都包含了它相应的DOM对象以及计算后的样式。换句话讲,渲染树是DOM的直观表示。
(4)渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout.浏览器使用一种流式处理的方法,只需要一次pass绘制操作就可以布局所有的元素(tables需要多次pass绘制,pass表示像素处理和顶点处理)。
(5)最后布局完成,渲染树将转化为屏幕上的实际内容,这一步被称为绘制painting.


重绘Repaint
当页面元素样式的改变不影响元素在文档流中的位置时(例如background-color, border-color,visibility),浏览器只会将新样式赋予元素并进行重绘操作。

回流Reflow
当改变影响文档内容或者结构,或者元素位置时,回流操作就会被触发,一般有以下几种情况:
(1)DOM操作(对元素的增删改,顺序变化等);
(2)内容变化,包括表单区域内的文本改变;
(3)CSS属性的更改或重新计算;
(4)增删样式表内容;
(5)修改class属性;
(6)浏览器窗口变化(滚动或缩放);
(7)伪类样式激活(:hover等)。

IT文库 » 浏览器渲染网页的过程
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址