现代浏览器的工作原理

《现代浏览器的工作原理》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、现代浏览器的工作原理简介浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。将讨论的浏览器今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。本文将基于一些开源浏览器的例子——Firefox、Chrome及Safari，Safari是部分开源的。根据W3C（WorldWideWebConsortium万维网联盟）的浏览器统计数据，当前（2011年9月），Firefox、Safari及Chrome的市场占

2、有率综合已快接近50％。（原文为2009年10月，数据没有太大变化）因此，可以说开源浏览器将近占据了浏览器市场的半壁江山。浏览器的主要功能浏览器的主要功能是将用户选择得web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（UniformResourceIdentifier统一资源标识符）来指定所请求资源的位置，在网络一章有更多讨论。HTML和CSS规范中规定了浏览器解释html文档的方式，由W3C组织对这些规范进行维护，W3C是负责制定web标准的组

3、织。HTML规范的最新版本是HTML4(http://www.w3.org/TR/html401/)，HTML5还在制定中（译注：两年前），最新的CSS规范版本是2（http://www.w3.org/TR/CSS2），CSS3也还正在制定中（译注：同样两年前）。这些年来，浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为web开发者带来了严重的兼容性问题。但是，浏览器的用户界面则差不多，常见的用户界面元素包括：▲用来输入URI的地址栏▲前进、后退按钮▲书签选项▲用于刷新及暂停当前加载文档的刷新、暂停按钮▲用于到达主页的主页按钮奇怪的

4、是，并没有哪个正式公布的规范对用户界面做出规定，这些是多年来各浏览器厂商之间相互模仿和不断改进得结果。HTML5并没有规定浏览器必须具有的UI元素，但列出了一些常用元素，包括地址栏、状态栏及工具栏。还有一些浏览器有自己专有得功能，比如Firefox得下载管理。更多相关内容将在后面讨论用户界面时介绍。浏览器的主要构成HighLevelStructure浏览器的主要组件包括：▲用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分▲浏览器引擎－用来查询及操作渲染引擎的接口▲渲染引擎－用来

5、显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来▲网络－用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作UI后端－用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口▲JS解释器－用来解释执行JS代码▲数据存储－属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了webdatabase技术，这是一种轻量级完整的客户端存储技术图1：浏览器主要组件需要注意的是，不同于大部分浏览器，Chrome

6、为每个Tab分配了各自的渲染引擎实例，每个Tab就是一个独立的进程。对于构成浏览器的这些组件，后面会逐一详细讨论。组件间的通信CommunicationbetweenthecomponentsFirefox和Chrome都开发了一个特殊的通信结构，后面将有专门的一章进行讨论。渲染引擎Therenderingengine渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式，将由专门一章讲

7、解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。渲染引擎Renderingengines本文所讨论得浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。Webkit是一款开源渲染引擎，它本来是为linux平台研发的，后来由Apple移植到Mac及Windows上，相关内容请参考http://webkit.org。主流程Themainflow渲染引擎首先通过网络获得所请

8、求文档的内容，通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程：解析html以构建dom树->构建render树->布局render树->绘制render树图2：