没有合适的资源?快使用搜索试试~ 我知道了~
首页浏览器工作原理(how-browsers-work)中英文对照版
浏览器工作原理(how-browsers-work)中英文对照版

最新版《浏览器工作原理(how-browsers-work)中英文对照版》,共享给爱前端爱Web的童鞋~后端看看也能涨见识啦!好书值得推荐嘛~
资源详情
资源评论
资源推荐

How browsers work
浏览器是如何工作的
Behind the scenes of modern web browsers
浏览器的幕后工作原理

简介
web 浏览器应该是使用最广泛的软件了。在这里,我将要讲述下它们在幕后是怎么工作的。我们
来看一下从你在地址栏里输入“google.com”到谷歌的页面显示在浏览器窗口里都发生了什么。
讨论的浏览器
现在有五款主要的浏览器:Internet Explorer、Firefox、Safari、 Chrome 和 Opera。
我会给出几个例子,它们来自于开源浏览器 Firefox、chrome 还有部分开源的 safari。
根据 W3C 浏览器统计信息,当前(2009 年 10 月),Firefox、 Safari 和 Chrome 的市场占有率接
近 60%。
所以当前开源浏览器已经成为了浏览器行业的重要组成部分。
浏览器的主要功能
浏览器的主要功能是展现你所需要的 web 资源,它从服务器端请求资源并显示在浏览器窗口上,
资源格式一般为 html,但是也可以是 pdf,image 或者其他的格式。资源的地址是由用户通过 URI
(统一资源定位符)来指定的,关于这个在网络那章里做更多的介绍。
HTML 和 CSS 规范里指定了浏览器解析和显示 HTML 文件的方式,W3C 维护这些规范,它们是
web 的标准化组织。
HTML 的当前版本是 4,第 5 版正在进行中。CSS 的当前版本是 2,第 3 版正在进行中。
过去的很多年里,各个浏览器都是只遵守规范的一部分,然后做它们自己的扩展,这对于 web 开
发者来说引起了严重的兼容性问题,现在浏览器大都或多或少的遵守了规范。
各浏览器的用户界面彼此有很多共同的地方,共同的元素有:
1.键入 URI 的地址栏
2.后退和前进按钮
3.书签菜单
4.用来刷新和停止当前文档加载的刷新和停止按钮
5.帮你返回主页的主页按钮
说来奇怪,并没有任何正式的规范指定浏览器的用户界面,这只是多年试验以及各浏览器互相模
仿形成的一个好的做法。HTML5 规范中没有定义浏览器一定会有哪些 UI 元素,但是列举出了一
些通用的元素,有地址栏、状态栏和工具栏。当然,特定浏览器还有一些独一无二的特征,比如
Firefox 的下载管理。关于这个在 UI 那章里做更多的介绍。
浏览器的高级结构
浏览器的主要结构如下:
1. 用户界面-包括地址栏、后退/前进按钮、书签菜单等。Every part of the browser display except
the main window where you see the requested page.
2. 浏览器引擎- 询问和操作渲染引擎的接口
3. 渲染引擎-负责展现所请求的内容,比如如果请求的是 html,它就负责解析 html 和 css 并且在
屏幕上呈现解析后的内容。
4. 网络模块-网络请求用,比如 http 请求。它有跨平台的接口以及对应于每个平台的底层实现。
5. UI 后端-用来绘制基本构件,如下拉框和窗口。UI 后端暴露出一个平台无关性的公共接口,底
层的它使用操作系统的 UI 方法。
6. javascript 解释器—用来解析和执行 javascript 代码。
7. 数据存储--这是一个可存储的层。浏览器需要在硬盘上保存各种数据,比如 cookies。新的 html
规范(html5)把浏览器中的“web database”定义为一个完完全全的(虽然很轻)数据库。

图 1 浏览器主要组件
注释一下 Chrome 很重要,和大多数浏览器不同,它保持渲染引擎的多个实例--每个选项卡一
个,每个选项卡都是独立的进程。
我会为每个组件写一章。
组件间通信
Firefox 和 Chrome 都开发了一个专门的通信基本件。
这个会在专门的一章里讨论。
渲染引擎
渲染引擎的职责是……好吧,渲染,就是把请求的内容展现在浏览器屏幕上。
渲染引擎默认可以展现 html 和 XML 文档以及图片,它可以通过插件(浏览器扩展)展现其他格
式的文件,有个例子就是用一个 PDF 浏览插件来展现 PDF。我们会用专门的一章来讨论插件和扩
展,本章我们专注于主要应用-展现 css 格式过的 HTML 和图片。
渲染引擎
我们提到的浏览器-Firefox、Chrome 和 Safari 基于两个渲染引擎。Firefox 使用 Geoko--一个 Mozilla
自制的渲染引擎,Safari 和 Chrome 都使用 Webkit。
Webkit 是源于 Linux 平台的一个开源渲染引擎,Apple 公司修改后支持 Mac 和 Windows,更多的
细节参见 http://webkit.org/ 。
主要流程
渲染引擎开始会从网络模块获取要请求的文档内容,一般会以 8k 大小的区块获取。
在获取内容之后,是渲染引擎的基本流程:
图 2 渲染引擎的基本流程
渲染引擎开始解析 HTML 文档,并且把标签转换成“内容树”上的 DOM 节点,然后会解析样式,包

括外部的 css 文件和 style 元素里的数据。这些样式信息将会和 HTML 中视觉性的属性组合在一起
创建另一个树—渲染树。
渲染树由带有如颜色和大小等视觉属性的矩形区域构成,这些矩形区域按它们将要显示在屏幕上
的顺序排列。
渲染树构造完成后,进入到布局阶段,会把每个节点精确地调整到它应该在屏幕上出现的位置上。
下一步是绘制,渲染树将会被遍历,每个节点都会通过 UI 后端层来绘制。
理解这是一个渐进的过程相当重要。为了有更好的用户体验,渲染引擎将会尽可能早的把内容在
屏幕上显示出来,不会等到所有的 HTML 都被解析完才开始建造和布局渲染树,当进程还在继续解
析源源不断的来自于网络的内容的时候,一部分内容会被解析并且显示出来。
主要流程
图 3 webkit 主要流程
图 4 Mozilla's Gecko 渲染引擎主要流程
从图 3 和图 4 中可以看到,尽管 Webkit 和 Gecko 使用了少量不同的名称,流程基本上是一样的。
Gecko 把这个由视觉上格式化了的元素构成的树叫做“Frame Tree”,每个元素都是一个帧。
webkit 用了“Render Tree”这个名称,这个树由“渲染对象”构成。webkit 用了“layout”来表示元
素的放置,而 Gecko 把它叫做“reflow”,“ Attachment”是 webkit 中用来表示把 DOM 节点和可
见信息组合创建渲染树的术语。一个不大重要的非语义上的不同是 Gecko 在 HTML 和 DOM 树之
间有额外的一层,叫做“content sink”,它是生成 DOM 元素的地方。我们将会讨论这个流程的各
个部分。
解析-概述
因为渲染引擎里的解析是一个非常重要的过程,我们将会稍微深入一下。让我们先介绍一下解析。

解析文档的意思是把文档转成有意义的一些结构—代码能够理解并且使用的东西,解析后的结果
通常是一个能表现文档结构的节点树,叫做解析树或者语法树。
例1— 解析表达式“2+3-1”会返回下面的树:
图 5 算术表达式的树节点
语法
解析是根据文档所遵循的语法规则—文档被写成的语言或者格式,每种格式都必须有由词典和语
法规则组成的确定的语法,这被叫做上下文无关语法。人类语言不是这样的语言,也因此不能用
常用的解析技术来解析。
解析器—词法组合
解析可以分成两个子过程—词法分析和语法分析。
词法分析是把输入信息分成多个子串的过程,这些子串是这个语言的词典—有效构造块的集合,
在人类语言中包括在词典中出现的所有词汇。
语法分析是语言语法规则的应用。
解析器通常把这个工作分给两个部件—负责把输入信息分成有效子串的词法分析器(有时被叫做
编译器),以及负责根据语法规则分析文档结构并构建解析树的解析器,词法分析器知道怎么去
分解诸如空格和换行等无关紧要的字符。
图 6 从原始文档到解析树
这个解析过程是迭代的。解析器通常会向词法分析器请求新的子串然后试图用某些语法规则来匹
配这个子串,如果匹配了,会在解析树上加上这个子串相应的节点,然后请求新的子串;如果没
有匹配,解析器将会在内部保存这个子串,然后继续请求新的子串直到内部保存的子串匹配了一
个规则。如果没有规则可以匹配,解析器将会报出一个异常,这意味着文档是不合法的,包含着
一个语法错误。
剩余66页未读,继续阅读














安全验证
文档复制为VIP权益,开通VIP直接复制

评论1