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

写在前面

这篇文章是一篇译文，年代有点久，部份内容有过期，请读者仔细阅读，翻译自“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树由一些包含颜色、尺寸等视觉属性的小方块组成。这些小方块将会按照正确的顺序显示在屏幕上。