浏览器工作过程详解（译）（一）

写在前面

这篇文章是一篇译文，年代有点久，部分内容有过时，请读者仔细阅读，翻译自“How browser work”，原文地址为点击这里查看原文

简介

web浏览器可能是我们使用最广的软件了。在这篇文章中我将会详细介绍一下浏览器在背后究竟是如何工作的。我们将会知道，在你在地址栏键入“google.com”到浏览器呈现页面的这段时间内，究竟发生了什么。

我们将会探讨的浏览器

如今我们常用的浏览器主要有5种：IE、Firefox、Safari、Chrome以及Opera。我们将会以开源浏览器Firefox、Chrome和Safari（部分开源）为例，据W3C浏览器相关统计，以上三种浏览器占比大概有60%（2009 年 10月）。由此可见，现如今开源的浏览器已经占据浏览器市场的大部分了。

浏览器主要功能

浏览器主要的功能是通过向服务器请求，来获取你所想要的网络资源，并将它渲染到浏览器窗口中。而资源类型通常是html文件，但也可能是PDF，图片或者是其他类型的资源。资源地址通常是由用户键入的URI(统一资源标识符)来决定的。更多内容在以下网络部分会讲到。

浏览器渲染解读html文件是依据定义好的html结构以及css样式。这些规则描述主要是由W3C组织来制定的。现在的html的版本是4，版本5正在规划准备中。而css的版本是2，同样的，css3也正在规划。

很多年以来，各种浏览器只有部分是遵从标准的，同时各个浏览器厂商都发展了他们自己独有的东西。这给web开发者带来了很多兼容性问题。如今多数浏览器或多或少会遵从标准。

在用户界面上，各个浏览器之间还是有很多相似之处的。比如说：

• 地址栏用于键入URI

• 回退和前进按钮

• 书签选项

• 用于刷新和停止的按钮

• 主页按钮
  令人诧异的是，没有任何正式的规范指定用户界面，这只是多年经验和浏览器相互模仿形成的良好习惯。HTML5规范不定义浏览器必须具备的UI元素，但列出了一些常见元素。如地址栏、状态栏、工具栏等。当然，像Firefox下载管理器这样的功能，是独有的。

更多相关内容我们在用户界面部分再介绍。

浏览器深层结构

1. 用户界面－包括了地址栏、返回前进按钮、书签菜单等。在每一个请求页内，你都可以看到这些UI组件，除了主窗口。

2. 浏览器引擎－用来查询和操作渲染引擎的接口

3. 渲染引擎－负责渲染请求的内容。比如，若果请求的资源是html文件，那么渲染引擎负责解析html以及css，然后再把结果渲染到页面。

4. 网络连接－用于处理网络请求，如http请求。它不依赖不同的平台，这意味着它可以在不同平台工作。

5. UI后台－用于渲染基础部件，如多选框、窗口等。它暴露了一个不是特定平台的通用接口，在底层调用了操作系统的用户接口。

6. js引擎－用于解析javascript代码

7. 数据存储－这是一个持久层。浏览器需要在硬盘中存储各式数据，比如cookie。HTML5定义了‘web database’这样轻量级的web浏览器存储技术。

值得注意的是，谷歌浏览器和大多数浏览器不同，每一个选项卡都是渲染引擎的一个实例，都拥有独立的进程。我将会对以上每个组件都写一个章节来讲解。

组件之间的通信

火狐和谷歌都发展了一个特殊的通信结构，后面我们将会单独来讲。

渲染引擎

说到渲染引擎的责任，好吧，所谓渲染，就是将请求到的内容展现在浏览器屏幕上。
默认情况下，渲染引擎会将HTML和XMl文档以及图片展示出来。当然，通过一些插件（浏览器扩展），渲染引擎也能够展现其它类型的文档。举例来说，用PDF扩展，渲染引擎可以展现PDF文档。我们会单独拿一章篇幅来介绍浏览器插件和扩展。在这章里，我们会把重点放在最主要的情况：渲染用CSS修饰的HTML和图片。

渲染引擎

我们所讨论的几款浏览器－火狐、谷歌、Safari都是基于两种渲染引擎建立的。火狐使用的是Gecko－一种Mozilla自主研发的渲染引擎。Safari和谷歌都是使用Webkit渲染引擎。

Webkit是开源的，它一开始是作为Linux平台上的引擎，经过苹果公司改良后支持了Mac和Windows平台。详情请参阅这里

主要流程

渲染引擎将会先通过网络获取请求的文档内容，这不操作通常以8k分块的方式完成。
以下是渲染引擎拿到数据后主要的工作流程：

解析HTML并构建DOM树 => 构建render树 => render树布局 => render树绘制

渲染引擎开始解析HTML文档，并把标签转化成内容树中的DOM节点。同时它也开始解析样式数据，外链的css文件以及style标签内的样式。所有这些样式数据以及HTML中的可见性指令都是用来创建另一棵树－－render 树。

render树由一些包含颜色、尺寸等视觉属性的小方块组成。这些小方块将会按照正确的顺序显示在屏幕上。