浏览器渲染原理及流程
现代浏览器的组成
浏览器可以分为两部分:shell和浏览器内核,shell是外壳,如工具栏,菜单等,内核是根本,是基于标记语言显示的程序或模块。
浏览器内核分为两部分:渲染引擎和JS引擎。
渲染引擎
渲染引擎主要负责解析浏览器所呈现的内容,比如HTML,CSS。 渲染引擎的主要流程:
始解析 HTML 文档,并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构:呈现树。
呈现树包含多个带有视觉属性(如颜色和尺寸)的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。
呈现树构建完毕之后,进入“布局”处理阶段,也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树,由用户界面后端层将每个节点绘制出来。
需要着重指出的是,这是一个渐进的过程。为达到更好的用户体验,呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后,就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时,呈现引擎会将部分内容解析并显示出来。 Webkit 渲染引擎主流程如下图:
Gecko渲染引擎如下图:
浏览器的结构
1、用户界面。包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
2、浏览器引擎。在用户界面和呈现引擎之间传送指令。
3、呈现引擎。负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
4、用户界面后端。用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。
5、JavaScript 解释器。用于解析和执行 JavaScript 代码。
6、数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。
7、网络。用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
关于DOM解析
有如下HTML片段
<html> <head> <title>Web page parsing</title> </head> <body> <div> <h1>Web page parsing</h1> <p>This is an example Web page.</p> </div> </body> </html>
关于CSS解析
<doc> <title>A few quotes</title> <para> Franklin said that <quote>"A penny saved is a penny earned."</quote> </para> <para> FDR said <quote>"We have nothing to fear but <span>fear itself.</span>"</quote> </para> </doc>
CSS样式如下:
/* rule 1 */ doc { display: block; text-indent: 1em; } /* rule 2 */ title { display: block; font-size: 3em; } /* rule 3 */ para { display: block; } /* rule 4 */ [class="emph"] { font-style: italic; }
解析成CSS tree
注意:CSS遍历DOM,一层层找到对应的渲染规则是十分复杂的过程,这也是我们经常要求尽量精简DOM结构,减少CSS嵌套层级的原因。
CSS渲染流程
1、计算CSS属性;
2、构建Render Tree;
3、Layout,进行定位,元素的坐标及尺寸,将元素放到指定位置;
4、绘制
注意:图中有两种箭头,一种是指向流程自身的,表示“回流”,即修改某个属性会导致页面进行重新渲染,一种的指向外部的,表示“重绘”,即修改某个属性不会影响整个页面布局。
重绘与回流
这是前端经常会提到的两个概念。 重绘:Repaint,可以理解为页面局部某个元素要进行重新绘制,比如修改元素的背景颜色,但是几何尺寸并不会变; 回流:Reflow,可以理解为页面整个重新绘制,比如修改元素的尺寸,往往会导致整个render tree要进行重新计算,reflow是从html标签开始自上而下一次重新计算元素尺寸,重新布局。 通过两者概念区别明显得知,回流要比重绘的成本大得多,我们应该尽量减少回流操作,减少页面性能消耗。
(1)引起回流的方法或操作:
任何会改变元素几何信息(元素的位置和尺寸大小)的操作,都会触发回流。
- 元素尺寸改变——边距、填充、边框、宽度和高度
- 内容变化,比如用户在input框中输入文字
- 浏览器窗口尺寸改变——resize事件发生时
- 计算 offsetWidth 和 offsetHeight 属性
- 设置 style 属性的值
(2)常见引起重绘属性和方法
减少reflow/repaint
1.不要一条一条地修改DOM的样式。与其这样,还不如预先定义好css的class,然后修改DOM的className。
把DOM离线后修改。
- 使用documentFragment 对象在内存里操作DOM
- 先把DOM给display:none(有一次reflow),然后你想怎么改就怎么改。比如修改100次,然后再把他显示出来。
clone一个DOM结点到内存里,然后想怎么改就怎么改,改完后,和在线的那个的交换一下。
- 不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
4.尽可能的修改层级比较低的DOM。当然,改变层级比较底的DOM有可能会造成大面积的reflow,但是也可能影响范围很小。
5.千万不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局。