1.2 浏览器

具体来说，浏览器（browser）是Web服务的客户端程序，可对从服务器发来的网页和各种多媒体数据进行解释、显示和播放，亦可以向服务器提交信息实现用户与服务器之间的交互。浏览器的主要功能就是解析网页HTML文件并正确显示。简单来说，用户使用浏览器的目的是向互联网请求资源，而资源被部署在全球各地的数不尽的服务器上。浏览器所做的工作就是代表用户向特定的服务器请求所需资源，然后服务器对这次请求进行响应，即返回相应资源，之后浏览器对服务器所返回的资源进行解析，最终呈现给浏览器的使用者。

接下来，将从浏览器的构成开始，对浏览器的运行原理进行简单的讲解。下面将具体地介绍几款主流的浏览器。

1.2.1 浏览器构成

运行在计算机上的浏览器软件通常由以下几部分构成，用户界面、浏览器引擎、渲染引擎、网络、用户界面后端、JavaScript解释器以及数据存储。这些组成部分当中，除了用户界面对于每一个用户来说都可以直接可见外，其他的组成部分，像网络、JavaScript解释器和数据存储这3部分，对于开发者来说，可以有限地通过浏览器的调试界面对它们的运行进行观察和调试。而余下的浏览器引擎和渲染引擎这两部分，则很好地被浏览器厂商封装，默默地在浏览器运行时进行工作，使用者几乎感受不到它们的存在。

1.用户界面（User Interface）

浏览器的用户界面就是指用户能够直接与浏览器进行交互的部分，简单来说，就是打开浏览器窗口后，可以看到的一些基本的部分。通常来说，无论哪一个厂商的浏览器都会包含如下几个基本部分。

●地址栏，用户可以通过写入网址对特定网站进行访问。

●前进和后退按钮，用户可以通过它们跳转到前一个或后一个页面。

●添加书签选项，用户可以将自己感兴趣的网页进行收藏，以便以后可以快速访问。

●刷新和停止的按钮，用户可以单击“刷新”按钮，对同一页面的资源进行再次获取；或单击“停止”按钮，停止当前进行中的重新获取页面过程。

2.浏览器引擎（Browser Engine）

浏览器引擎的主要作用是对用户界面、渲染引擎和网络进行协调，在它们之间传送指令。

3.渲染引擎（Rendering Engine）

渲染引擎的主要作用是对所获取到的网络资源，如HTML、CSS文件等进行解析，并将文档资源转换为视觉信息展示给用户。在访问同一页面时，有时会发现，不同浏览器的展示效果各不相同，这是因为这些浏览器使用的是不同的渲染引擎。例如，Chrome和Opera浏览器使用的是Blink引擎，Safari使用的是WebKit引擎，而FireFox使用的是Gecko引擎。

4.网络（Network）

浏览器的网络部分，主要的任务是处理浏览器网络相关的事物，例如，HTTP请求的发送与响应的接收等。其接口与平台无关，并为所有平台提供底层实现。

5.用户界面后端（UI Backend）

用户界面后端主要用于绘制基本的窗口组件，例如，组合分页面和窗口。其提供了与平台无关的通用接口，并在底层使用所运行操作系统的UI方法。

6.JavaScript解释器（JavaScript Interpreter）

为了给网页增添方法与逻辑，需要一门编程语言，JavaScript历经十多年的考验最终成为所有浏览器均认可的页面逻辑实现语言。为了理解并执行JavaScript代码，每个浏览器需要有JavaScript解释器（也称作JavaScript引擎），来解析和执行JavaScript代码。同样，JavaScript解释器也是因浏览器而异的。例如，IE使用的是Chakra，FireFox使用的是SpiderMonkey，Chrome使用的是V8。

7.数据存储（Data Storage）

浏览器的数据存储部分主要负责帮助使用者在本地保存一些信息，提供的机制有Cookie和本地存储，支持HTML 5的浏览器还有本地数据库可以使用。这些机制都可以让用户在不断刷新和获取新界面的过程中长时间保存一些数据。

1.2.2 浏览器工作主流程

浏览器具体的工作原理是相对复杂的，但可以简单了解一下其大概的工作过程，并认识几个重要的概念。

首先将浏览器一次工作的开始约定为打开浏览器，这时用户界面后端将会调用浏览器所处的操作系统环境的UI相关方法，绘制窗口并为用户显示浏览器软件。然后，浏览器的用户界面（UI），将以直观的图形界面向用户展示浏览器的相关功能。用户可以通过与图形界面进行交互，来使用浏览器。

通常浏览器的主要任务是帮助用户浏览网站。当用户在浏览器的地址栏内完成网址输入后，浏览器会根据这个网址确定用户所要获取的网站资源的位置，这个资源将会具体到某个服务器上的某一个文件，这个文件通常是一个HTML文档，作为网页可以被浏览器展示。而在一张网页上的资源，在大多数情况下，不仅仅是HTML文档，还包括为这个网页提供样式的CSS文档，或者为页面提供逻辑的JavaScript文档，以及一些可能的多媒体资源（图片、音频和视频等）。这些其他相关资源的位置都会在HTML文档中描述，会在一次输入网址访问后一并被获取，然后由浏览器展示给用户。

在输入网址进行访问资源操作后，浏览器的网络部分将负责向特定的服务器发送请求，索要某一特定资源。当服务器端收到请求后会对其进行处理，如果有相应的资源则返回含有资源的响应给浏览器，否则将会向浏览器返回错误响应。

假设，服务器对浏览器所发送的请求处理完毕之后，发现有相应的资源可以提供。那么，这些资源就会被服务器发送，并经过网络再返回给浏览器。当浏览器获得相应的资源后，是不能马上将资源展示给用户的，因为这些资源是以文档的形式进行传播的，即只能被计算机理解，而不能被普通用户理解。所以，浏览器需要对所获取的资源进行解析。

这时，渲染引擎将开始它的主要工作，对HTML和CSS文档进行解析并显示。首先，渲染引擎会解析HTML文档，并构建一个文档对象模型（Document Object Model，DOM），它是一个包含HTML文档中各标签元素的树形模型（简称为DOM树）。DOM树的逻辑结构与图1-3所示类似，它是关于如何获取、修改、添加或删除HTML元素的标准。即HTML文档中定义的标签如何转化为一个统一的逻辑结构，以便进行后续的解析工作。

DOM树由一个个DOM节点（DOM Node）组成，即一个个HTML元素组成。当渲染引擎将HTML文档解析为DOM树之后，引擎将对该文档相关联的CSS文档进行解析，并对DOM树中各节点的风格样式进行获取，再添加到DOM树，进而形成了渲染树（Render Tree），如图1-4所示。

图1-3 DOM树结构

图1-4 渲染树结构

渲染引擎将根据已经解析得到的内容，进行页面的具体展示，然后用户才能看到一个网页。当然，由于浏览器软件的运行速度足够快，以至于普通的使用者并不能察觉到上述的这些过程，造成的假象就是一输入网址后，浏览器马上将内容显示给用户。

至于JavaScript解释器，一般来说，它在HTML页面展示之后进行工作，当然HTML 5也可以让JavaScript代码在后台运行。由于JavaScript是一门解释型语言，它不需要提前进行编译，而是在运行过程中进行解释执行。这样的模式也符合给网页添加逻辑的具体需要，当用户与页面进行交互时，JavaScript解释器就会解释执行相应的代码。

在浏览一个个网页的过程中，网站的开发者可能希望让用户本地保存一些数据，这就要涉及数据存储的功能了。浏览器会以站点来划分保存在用户本地的数据。

最后还有浏览器引擎，它在浏览器中扮演的角色，在某种程度上，类似于操作系统之于计算机，负责协调浏览器各个部分以正确地工作运行。

上述的浏览器主要流程的介绍仅供参考，真实而具体的过程要更为复杂，请有兴趣的读者自行搜索学习。

1.2.3 主流浏览器

尽管市面上的浏览器种类有许多，但是浏览器的工作过程基本上都符合1.2.2节的描述。下面具体介绍几款目前主流的浏览器，如图1-5所示。

图1-5 主流浏览器

1.Chrome

Google Chrome，又称谷歌浏览器，是一个由Google（谷歌）公司开发的免费网页浏览器。“Chrome”是化学元素“铬”的英文名称，过去也用Chrome称呼浏览器的外框。该软件的程序代码是基于某些开源的代码软件所编写的，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

2.Safari

Safari是苹果计算机的操作系统Mac OS中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。它取代了之前的Internet Explorer for Mac。该浏览器已支持Windows平台，但是与运行在Mac OS X上的Safari相比，有些功能出现丢失。Safari也是iPhone手机、iPod Touch、iPad中iOS指定的默认浏览器。

3.Opera

Opera浏览器，其创始于1995年4月，是一款由挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。它是跨平台浏览器，可以在Windows、Mac和Linux三个操作系统平台上运行。Opera浏览器因为它的快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇。

4.IE

Internet Explorer是微软公司推出的一款网页浏览器，原称Microsoft Internet Explorer（6版本以前）和Windows Internet Explorer（7、8、9、10、11版本），简称IE。在IE 7以前，其中文直译为“网络探路者”，但在IE 7以后官方便直接俗称为“IE浏览器”。2015年3月微软确认将放弃IE品牌，转而在Windows 10上，用Microsoft Edge取代了IE。微软于2015年10月宣布，自2016年1月起停止支持老版本IE浏览器。

5.Firefox

Mozilla Firefox，中文俗称“火狐”（正式缩写为Fx或fx，非正式缩写为FF），是一个自由及开源的代码网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。Firefox的开发目标是“尽情地上网浏览”和“对多数人来说最棒的上网体验”，它对大部分的网络标准都有很好的支持，并且拥有相对出色的性能，除此之外还给予用户许多个性化的选择。