浏览器运行原理?

浏览器的定义

网页浏览器(英语:web browser),常被简称为浏览器,是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容,它们由统一资源标志符标志。信息资源中的超链接可使用户方便地浏览相关信息。

网页浏览器虽然主要用于使用万维网,但也可用于获取专用网络中网页服务器之信息或文件系统内之文件。

另一个说法

浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件。

网页浏览器主要通过HTTP协议与网页服务器交互并获取网页,这些网页由URL指定,文件格式通常为HTML,并由MIME在HTTP协议中指明。一个网页中可以包括多个文档,每个文档都是分别从服务器获取的。

浏览器的主要功能

浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您选择的网络资源。

这里所说的资源一般是指 HTML 文档,也可以是 PDF、 图片或其他的类型。 资源的位置由用户使用URI(统一资源标符)指定。多年以来,各浏览器都没有完全遵从这些规范,同时还在开发自己独有的扩展程序,这给网络开发人员带来了严重的兼容性问题。 如今,大多数的浏览器都是或多或少地遵从规范。

这些年来,浏览器厂商纷纷开发自己的扩展,对规范的遵循并不完善,这为web开发者带来了严重的兼容性问题。

但是,浏览器的用户界面则差不多,常见的用户界面元素包括:
用来输入URI的地址栏
前进、后退按钮
书签选项
用于刷新及暂停当前加载文档的刷新、暂停按钮
用于到达主页的主页按钮

奇怪的是,并没有哪个正式公布的规范对用户界面做出规定,这些是多年来各浏览器厂商之间相互模仿和不断改进的结果。

当前主流浏览器

Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera。

浏览器按照引擎分类:
(1)Trident引擎:Internet Explorer
(2)Webkit引擎:Chrome(28版本后基于blink,blink是webkit的一个分支)和Safari
(3)Gecko引擎:Firefox
(4)Presto引擎:早期Opera采用,后用webkit引擎。

浏览器的主要构成

浏览器的主要组件包括:

1.用户界面: 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
2.浏览器引擎: 用来查询及操作渲染引擎的接口。
3.渲染引擎: 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。
4.网络: 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。
5.UI后端: 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。
6.JS解释器: 用来解释执行JS代码。
7.数据存储: 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术。
在这里插入图片描述
需要注意的是,不同于大部分浏览器,Chrome为每个Tab分配了各自的渲染引擎实例,每个Tab就是一个独立的进程。

渲染引擎

渲染引擎简介

  1. 渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容.

默认情况下,渲染引擎可以显示html、xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件,可以显示PDF格式,将由专门一章讲解插件及扩展,这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。

  1. 本文所讨论的浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的,Firefox使用Geoko——Mozilla自主研发的渲染引擎,Safari和Chrome都使用webkit。

  2. Webkit是一款开源渲染引擎,它本来是为Linux平台研发的,后来由Apple移植到Mac及Windows上,相关内容请参考http://webkit.org。

渲染主流程

== 渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成。 ==

流程如下
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

在这里插入图片描述

渲染引擎开始解析html,并将标签转化为内容树中的dom节点。接着,它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

Render树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上。

Render树构建好了之后,将会执行布局过程,它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点。

值得注意的是,这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
在这里插入图片描述
在这里插入图片描述
从以上两图中可以看出,尽管webkit和Gecko使用的术语稍有不同,他们的主要流程基本相同。Gecko称可见的格式化元素组成的树为frame树,每个元素都是一个frame,webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局,而Gecko中称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment,Gecko在html和dom树之间附加了一层,这层称为内容接收器,相当制造dom元素的工厂。

参考文献

http://www.javashuo.com/article/p-sexugrel-cc.html
http://www.javashuo.com/article/p-plmgjmlw-ca.html