how browsers work sina-leju 翻译版.doc

简介 web浏览器应该是使用最广泛的软件了。在这里，我将要讲述下它们在幕后是怎么工作的。我们来看一下从你在地址栏里输入“”到谷歌的页面显示在浏览器窗口里都发生了什么。 我们讨论的浏览器 现在有五款主要的浏览器：Internet Explorer、Firefox、Safari、 Chrome 和 Opera。 我会给出几个例子，它们来自于开源浏览器Firefox、chrome还有部分开源的safari。 根据W3C浏览器统计信息，当前（2009年10月），Firefox、 Safari和Chrome的市场占有率接近60%。 所以当前开源浏览器已经成为了浏览器行业的重要组成部分。 浏览器的主要功能 浏览器的主要功能是通过从服务器请求资源然后显示在浏览器窗口上来展现你所需要的web资源。资源格式一般为html,但是也可以是pdf，image或者其他的格式。资源的地址是由用户使用URI（统一资源定位符）来指定的，More on that in the network chapter. 浏览器解释和显示HTML文件的方式是在html和css规范里被指定的。这些规范则是被W3C组织维护，它们是web的标准化组织。 HTML的当前版本是4，第5版正在进行中。CSS的当前版本是2，第3版正在进行中。 过去的很多年里，各个浏览器都是只遵守规范的一部分，然后做它们自己的扩展，这对于web开发者来说引起了严重的兼容性问题。现在浏览器大都或多或少的遵守了规范。 各浏览器的用户界面彼此有很多共同的地方，元素有： 1.用来插入URI的地址栏 2.后退和前进按钮 3.书签菜单 4.用来刷新和停止当前文档加载的刷新和停止按钮 5.帮你返回主页的主页按钮 说来奇怪，浏览器的用户界面并没有在任何正式的规范中被指定，这只是多年体验以及各浏览器互相模仿形成的一个好习惯。HTML5规范中没有定义浏览器一定有哪些UI元素，但是列举出了一些通用的元素，有地址栏、状态栏和工具栏，当然，还有特定浏览器所有的独一无二的特征，比如Firefox的下载管理。More on that in the user interface chapter. 浏览器的高级结构 浏览器的主要构成如下： 用户界面-包括地址栏、后退/前进按钮、书签目录等。Every part of the browser display except the main window where you see the requested page. 浏览器引擎- 查询和操作渲染引擎的接口 渲染引擎-负责展现所请求的内容，比如如果请求的是html，它就负责解析html和css并且在屏幕展现解析后的内容。 Networking-用来网络请求，比如http请求。它有跨平台的接口以及各平台相应的底层实现。 UI后端-用来绘制如下拉框和窗口的基本构件。它暴露出一个平台无关性的共有接口，底层的它使用操作系统的UI方法。 数据存储-这是一个持久存储层。浏览器需要在硬盘上保存各种数据，比如cookies。新的html规范（html5）把浏览器中的“web database”定义为一个完完全全的（虽然很轻）数据库。 图1 浏览器主要部件 标注一下Chrome很重要，和大多数浏览器不同，它保持渲染引擎的多个实例--每个选项卡一个，每个选项卡都是独立的进程。 I will devote a chapter for each of these components. 部件间通信 Firefox和Chrome都开发了一个专门的通信基本件。 They will be discussed in a special chapter. 渲染引擎 渲染引擎的职责是……好吧，渲染，就是把请求的内容展现在浏览器屏幕上。 渲染引擎默认可以展现html和XML文档以及图片，它可以通过插件（浏览器扩展）展现其他的形式，有个例子就是用一个PDF浏览插件来展现PDF。我们会用专门的一章来讨论插件和扩展，本章我们专注于主要应用-展现被css格式化过了的HTML和图片。 渲染引擎 我们涉及到的浏览器-Firefox、Chrome和Safari基于两个渲染引擎。Firefox使用Geoko--一个Mozilla自制的渲染引擎。Safari和Chrome都使用Webkit。 Webkit是源于Linux平台的一个开源渲染引擎，被Apple公司修改后支持Mac和Windows，更多的细节参见/ 。 主要流程 渲染引擎开始会从networking层获取要请求的文档内容，这一般会在8k块内完成。 下面是渲染引擎的基本流程： 图2 渲染引擎的基本流程 渲染引擎开始解析HTML文档，并且把标签转换成DOM节点，这些节点在一个叫做“内容树”的树里，然后会解析样式，包