文档章节

浏览器是怎样工作的(浅显版)

sheilacat
 sheilacat
发布于 2015/03/19 19:40
字数 1823
阅读 26
收藏 0

译注:

前两天看到一篇不错的英文文章,叫做 How browsers work, 该文概要的介绍了浏览器从头到尾的工作机制,包括HTML等的解析,DOM树的生成,节点与CSS的渲染等等,对于想学习浏览器源码的同学来说,实在是很 棒的一篇科普文章。尽管对于每部分,该文的描述并不足够深入,但综合来讲,即使没兴趣学浏览器源码,也还是有一些值的学习的思想在里面的,可以权当开拓下 视野,有益无害。

于是,我想分节挑重点翻译一下与大家分享。以下为译文:

我们要讨论的浏览器

当今主流浏览器有五类: Internet Explorer, Firefox, Safari, Chrome 以及 Opera。 我会基于开源浏览器 Firefox, Chrome 与 Safari(部分开源)来举例说明。 按照 W3C 浏览器统计, 当今(2009年10月), Firefox, Safari 及 Chrome 的总占有率已接近 60%,这是非常可观的。

浏览器的主要功能

浏览器的主要功能是展示网页资源,也即请求服务器并将结果显示在浏览器窗口中。资源的格式一般是HTML,但也有PDF、图片等其它各种格式。资源的定位由URL来实现。更多细节请参考“网络”一节。

浏览器释与展现HTML文件的方式是参照HTML与CSS规范来的,这些规范由 W3C (World Wide Web Consortium) Web标准化组织来维护。 当前HTML版本是 4 (http://www.w3.org/TR/html401/),HTML5正在进行中。当前CSS版本为2 (http://www.w3.org/TR/CSS2/),同样,版本3进行中。

过去几年里,各版本浏览器有许多各自的扩展,这使网页作者很难写出兼容性好的内容。如今这一严重的兼容性问题已经开始好转,各种浏览器都开始兼容标准规范。

各浏览器的用户接口有很多相同的地方,下面是一些常用的用户接口:

  • 用于输入URI的地址栏

  • 前进后退按钮

  • 书签选项

  • 刷新停止按钮,用于控制页面加载

  • 主页按钮

很奇怪的是,浏览器的用户接口并没有写进任何规范中,这种极大的相似性只是在多年的实践经验以及浏览器之间的相互借鉴中形成的。HTML5规范没有 规定浏览器必须有哪些交互元素,但是列出了一些通用元素,比如地址栏, 状态栏和工具栏。 当然,特定浏览器有自己独有的特性,如Firefox的下载管理器。更多内容请参考用户接口一节。

浏览器的上层结构

浏览器的主要概念如下 (1.1):

  1. 用户接口 – 包括地址栏,前进后退,书签菜单等窗口上除了网页显示区域以外的部分。

  2. 浏览器引擎 – 查询与操作渲染引擎的接口。

  3. 渲染引擎 – 负责显示请求的内容。比如请求到HTML, 它会负责解析HTML 与 CSS 并将结果显示到窗口中。

  4. 网络 – 用于网络请求, 如HTTP请求。它包括平台无关的接口和各平台独立的实现。

  5. UI后端 – 绘制基础元件,如组合框与窗口。它提供平台无关的接口,内部使用操作系统的相应实现。

  6. JavaScript解释器。用于解析执行JavaScript代码。

  7. 数据存储。这是一个持久层。浏览器需要把所有数据存到硬盘上,如cookies。新的HTML规范 (HTML5) 规定了一个完整(虽然轻量级)的浏览器中的数据库:’web database’。


图1: 浏览器的主要概念

需要注意的是,与其它浏览器不同,chrome使用多个渲染引擎实例,每个Tab一个,每个Tab都是一个独立进程。

我会拿出一个章节来介绍每块内容。

组件间的通信

Firefox 与 Chrome 开发了一种特殊的通信架构,这会在一个特殊章节讨论。

渲染引擎

渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上。

默认情况下渲染引擎可以显示HTML,XML文档以及图片。 通过插件(浏览器扩展)它可以显示其它类型文档。比如使用PDF viewer插件显示PDF文件。我们会在一个专门的章节讨论插件与扩展。在这一节我们将专注渲染引擎的主要用途——显示用CSS格式化的HTML与图 片。

各种渲染引擎

我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上:Firefox使用Gecko —— Mozilla自家的渲染引擎;Safari 和 Chrome 都使用 Webkit。

Webkit 是一个开源的渲染引擎,它源自Linux平台上的一个引擎,经过Apple公司的修改可以支持Mac与Windows平台。更多信息可以参考: http://webkit.org/ 。

主要流程

渲染引擎开始于从网络层获取请求内容,一般是不超过8K的数据块。接下来就是渲染引擎的基本工作流程:

图 2:渲染引擎的基本工作流程(解析HTML构建DOM树,渲染树构建,渲染树布局,绘制渲染树)。

渲染引擎会解析HTML文档并把标签转换成内容树中的DOM节点。它会解析style元素和外部文件中的样式数据。样式数据和HTML中的显示控制将共同用来创建另一棵树——渲染树

渲染树包含带有颜色,尺寸等显示属性的矩形。这些矩形的顺序与显示顺序一致。

渲染树构建完成后就是”布局“处理,也就是确定每个节点在屏幕上的确切显示位置。 下一个步骤是 绘制 —— 遍历渲染树并用UI后端层将每一个节点绘制出来。

一定要理解这是一个缓慢的过程,为了更好的用户体验,渲染引擎会尝试尽快的把内容显示出来。它不会等到所有HTML都被解析完才创建并布局渲染树。它会 在处理后续内容的同时把处理过的局部内容先展示出来。

主要流程示例

 


图 3:Webkit主要流程

图 4:Mozilla的Gecko渲染引擎主要流程(3.6)

从图3和图4中可以看出,尽管Webkit与Gecko使用略微不同的术语,这个过程还是基本相同的。
Gecko 里把格式化好的可视元素称做“帧树”(Frame tree)。每个元素就是一个帧(frame)。 Webkit 则使用”渲染树”这个术语,渲染树由”渲染对象”组成。Webkit 里使用”layout”表示元素的布局,Gecko则称为”Reflow”。Webkit使用”Attachment”来连接DOM节点与可视化信息以构 建渲染树。一个非语义上的小差别是Gecko在HTML与DOM树之间有一个附加的层 ,称作”content sink”,是创建DOM对象的工厂。我们会讨论流程中的每一部分。

 


本文转载自:http://ued.ctrip.com/blog/?p=3295

sheilacat
粉丝 35
博文 75
码字总数 35249
作品 0
长沙
程序员
私信 提问
已经有了手机的源码,怎么在cm源码中添加的机型进行编译(求助)

有个海信U8,官方系统的是2.3的。后来开源了,我也拿到了源码,是一个tar.gz的文件。 想学习一下CM的源码编译,根据网上的教程同步完成了cm7的全部源码,但是cm官方的支持机型里没有这个,网...

姜壮
2014/05/18
842
0
JavaScript 开发者都应该知道的十个概念,你知道几个?

自学 现在学习 JavaScript 和 Web 开发的人很多,他们都希望能凭此获得一份工作。然而,自学常常会使学习者对 JavaScript 语言本身的理解存在知识盲点。 实际上,令人感到惊讶的是,他们只需...

Java高级架构师
2018/12/11
0
0
在visualstudio的窗体中实现树结构

我希望在visualstudio中实现 在做的过程中,我遇到的问题是我做出来的只是静态的,点击按钮没有事件响应,还有关于做窗口我只能做出来这一种,怎样在节点前加图片呢?就像.希望有人帮我解决。...

lichen辰
2013/03/22
392
2
批量计算一个目录下,所有文件的哈希校验码,包含文件夹里的文件

@猫叔猫叔 你好,想跟你请教个问题: 我是一个编程初学者,现在我有一个题目不会,想来请教您一下,因为我看到您上传的程序代码中有跟我题目类似的思想——哈希算法。就是不知道是不是完整的...

彼年花开
2016/08/22
535
1
客户端调用CXF 发布的WebService

最近工作中用到了WebService,其发布方式有好多种,暂不讨论; 因为要业务联调,所以要模拟客户端的调用,因此也就产生了下面的问题。在这里主要想说一下,客户端调用WebService的方式! 如果...

xudongwangjie
2013/08/29
0
2

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
5
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部