浏览器工作原理 - 导语篇_address bar for inserting a uri-优快云博客

原文发表时间：2009年10月，作者：Tali Garsiel

Introduction

介绍

Web browsers are probably the most widely used software. In this book I will explain how they work behind the scenes. We will see what happens when you type 'google.com' in the address bar until you see the Google page on the browser screen.
浏览器可能算是使用最多的软件了。在这里，我要解释一下他们底层的工作原理。读完本文，我们就会知道，从你在地址栏输入'google.com'，到Google首页出现，中间到底发生了什么。

The browsers we will talk about

我们即将讨论的浏览器

There are five major browsers used today - Internet Explorer, Firefox, Safari, Chrome and Opera.
I will give examples from the open source browsers - Firefox,Chrome and Safari, which is partly open source.
According to the W3C browser statistics, currently(October 2009), the usage share of Firefox, Safari and Chrome together is nearly 60%.
So nowdays open source browsers are a substantial part of the browser business.
如今常用的主流浏览器有五个：IE，火狐，Safari, Chrome和Opera。我举的例子主要是开源浏览器：火狐，Chrome和Safari（部分开源）。根据W3C浏览器统计数据，目前（2009年10月），火狐、Safari加上Chrome市场份额接近60%。因此，开源浏览器占据主导地位。【注：根据W3C在2014年5月公布的浏览器统计数据显示，上述三者的市场份额已接近90%】

The browser's main functionality

浏览器的主要功能

The browser main functionality is to present the web resource you choose, by requesting it from the server and displaying it on the browser window. The resource format is usually HTML but also PDF, image and more. The location of the resource is specified by the user using a URI (Uniform resource Identifier). More on that in the network chapter.
浏览器的主要功能就是呈现你选择的网络资源，向服务器请求，然后在浏览器窗口显示。资源格式通常是HTML，但可以是PDF、图像或者其他类型文件。资源的路径通常使用URI（统一资源标识符）表示。

The way the browser interprets and displays HTML files is specified in the HTML and CSS specifications. These specifications are maintained by the W3C (World Wide Web Consortium(联盟)) organization, which is the standards organization for the web.
HTML和CSS规范详细规定了浏览器如何解释和展现HTML文件。这些规范由W3C维护，他是网络的标准化组织。

The current version of HTML is 4 (http://www.w3.org/TR/html401/). Version 5 is in progress. The current CSS version is 2 (http://www.w3.org/TR/CSS2/) and version 3 is in progress.
最新的HTML是版本4，版本5正在制定中。最新的CSS是版本2，版本3正在制定中。

For years browsers conformed to only a part of the specifications and developed their own extensions. That caused serious compatibility issues for web authors. Today most of the browsers more or less conform to the specifications.
多年来，浏览器只遵守规范的部分内容，并且各自增加扩展功能。对于网页开发人员，这导致了严重的不兼容问题。今天，大部分的浏览器多少都会遵守规范。

Browsers' user interface have a lot in common with each other. Among the common user interface elements are:
浏览器的界面相似度很高，常见的界面元素有：

Address bar for inserting the URI
地址栏，用来输入URI
Back and forward buttons
前进后退按钮
Bookmarking options
书签选项
A refresh and stop buttons for refreshing and stopping the loading of current documents
刷新和停止按钮
Home button that gets you to your home page
主页按钮

Strangely enough, the browser's user interface is not specified in any formal specification, it is just good practices shaped over years of experience and by browsers imitating each other. The HTML5 specification doesn't define UI elements a browser must have, but lists some common elements. Among those are the address bar, status bar and tool bar. There are, of course, features unique to a specific browser like Firefox downloads manager.
说来也奇怪，浏览器的用户界面没在任何规范文件中有规定，它仅仅是来自多年经验下的最佳实践以及浏览器之间的相互模仿。HTML5规范没有定义浏览器必须有的UI元素，只是列举了一些常用元素。其中包括地址栏，状态栏和工具栏。当然，特定的浏览器有自己的特色，比如火狐的下载管理器。

The browser's high level structure

浏览器的上层结构

The browser's main components are:
浏览器的主要组件有：

1. The user interface - this includes the address bar, back/forward button, bookmarking menu etc. Every part of the browser display except the main window where you see the requested page.
用户界面 - 包括地址栏，后退/前进按钮，书签按钮等。除了显示页面内容的主窗口，其余的浏览器部分都属于用户界面。

2. The browser engine - the interface for querying and manipulating the rendering engine.
浏览器引擎 - 请求和管理渲染引擎的接口。

3. The rendering engine - responsible for displaying the requested content. For example if the requested content is HTML, it is responsible for parsing the HTML and CSS and displaying the parsed content on the screen.
渲染引擎 - 负责显示请求的内容。比如，如果请求内容是HTML，它就负责解析HTML和CSS，并把解析后的内容呈现在屏幕上。

4. Networking - used for network calls, like HTTP requests. It has platform independent interface and underneath implementations for each platform.
网络层 - 用来处理网络调用，比如HTTP请求。它包括平台无关的调用接口和针对不同平台的具体实现。

5. UI backend(后端) - used for drawing basic widgets(小部件) like combo boxes and windows. It exposes(公开) a generic interface that is not platform specific. Underneath it uses the operating system user interface methods.
UI后端 - 用来绘制基本的小部件，比如组合框和窗口。它对外公开的接口是平台无关的，在底层它使用了操作系统的用户界面方法。

6. JavaScript interpreter. Used to parse and execute the JavaScript code.
JavaScript解释器 - 用来解析和执行JavaScript代码。

7. Data storage. This is a persistence layer. The browser needs to save all sorts of data on the hard disk, for examples, cookies. The new HTML specification (HTML5) defines 'web database' which is a complete (although light) database in the browser.
数据存储 - 这是持久层。浏览器需要把各种数据保存在硬盘上，比如，cookies。新的HTML规范（HTML5）中定义了“网络数据库”，这是一种浏览器内部的功能完备的（虽然是轻量级的）数据库。

Figure 1: Browser main components.
图1：浏览器主要部件

It is important to note that Chrome, unlike most browsers, holds multiple instances of the rendering engine - one for each tab,. Each tab is a separate process.
特别提一下Chrome，与其他浏览器不同，它同时运行多个渲染引擎的实例，每个标签下有一个。每个标签都是独立的进程。