浏览器渲染页面过程简单介绍

快乐打工仔 分类:实例代码

呈现在我们面前的页面需要经过浏览器的宣传,下面就介绍一下浏览器是如何渲染页面的。

一.布局:

当渲染对象被创建并添加到树中,是没有位置和大小的,计算这些值的过程称为layout或reflow。

布局是一个递归过程,由根渲染对象开始,对应html文档元素,布局继续递归的通过一些或所有的frame层级,为每个需要几何信息的渲染对象进行计算。跟渲染对象位置是0,0。所有渲染对象都有一个layout或reflow方法,每个渲染对象调用需要布局的children的layout方法。

浏览器会对发生变化的呈现器以及其子代标注为"dirty",表示需要进行layout

标记分为两种:"dirty"和"children are dirty"。

“children are dirty”表示尽管呈现器本身没有变化,但它至少有一个子代需要布局。

这里需要说明一下重排reflow和重绘repaint。

二.重排reflow:

当改变影响到文本内容、结构或元素位置时,就会发生重排。

通常有以下事件触发:

(1).网页初始化时

(2).DOM操作(元素添加、删除、修改、元素顺序变化)

(3).内容变化,包括表单域内文本改变

(4).CSS属性的计算或改变

(5).添加或删除样式表

(6).更改“类”属性

(7).浏览器窗口的缩放、滚动等

(8).伪类激活(例如:hover悬停)

三.重绘repaint:

改变不会影响元素的位置及大小的样式时,则会触发重绘。换句话说,元素改变外观时会触发这个行为,不包括修改元素的几何属性。例如background,visibility。

四.异步layout和同步layout:

异步layout,简单来说,就是指浏览器为了尽可能减少reflow和repaint的操作,而将这些操作积攒起来,再统一做一次reflow。

什么时候会产生同步layout呢

例如resize窗口、改变页面默认字体时,或者是脚本作出以下请求:

layout过程:

(1).parent渲染对象决定宽度。

(2).parent渲染对象读取children,设置其x,y;在需要时【标记为dirty或全局layout等】调用child渲染对象的layout,计算child高度;parent使用child的累积高度,以及margin和padding的高度来设置自己的高度;最后将dirty标志设置为false。

绘制:

和布局一样,绘制也可以是全局的——绘制完整的树——或增量的。在增量的绘制过程中,一些渲染对象以不影响整棵树的方式改变,改变的渲染对象使其在屏幕上的矩形区域失效,这将导致操作系统将其看作dirty区域,并产生一个paint事件,操作系统很巧妙的处理这个过程,并将多个区域合并为一个。Chrome中,这个过程更复杂些,因为渲染对象在不同的进程中,而不是在主进程中。Chrome在一定程度上模拟操作系统的行为,表现为监听事件并派发消息给渲染根,在树中查找到相关的渲染对象,重绘这个对象(往往还包括它的children)。

绘制顺序:

一个块渲染对象的堆栈顺序是:

(1).背景色

(2).背景图

(3).border

(4).children

(5).outline

浏览器渲染页面过程简单介绍,这样的场景在实际项目中还是用的比较多的,关于浏览器渲染页面过程简单介绍就介绍到这了。

浏览器渲染页面过程简单介绍属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容