浏览器是怎么工作的(论述浏览器是如何工作的)

浏览器是网络世界里至关重要的工具之一。下图是一个用户使用浏览器的基本用户场景：

但浏览器究竟是如何能够做到这些的呢？理解浏览器的工作流程和原理，所谓知其然而知其所以然，一定会对我们的工作有所裨益。

首先我们了解下常用的浏览器和浏览器的组成部分。

常用浏览器

常用的桌面浏览器有Chrome，Internet Explorer， Firefox，Safari, Opera。

常用的移动设备浏览器： Android浏览器，iPhone浏览器，Chrome，Opera Mini，Opera Mobile, UC浏览器等等。

浏览器组成

浏览器主要分成以下7部分：

1. UI – The User Interface

其实就是浏览器呈现给用户的所有用户接口。包括地址栏，前进/后退/刷新按钮，书签菜单，历史记录等等。

2. 浏览器引擎 – The Browser Engine

统领UI和渲染引擎，在他们之间传递数据和指令。

3. 渲染引擎 – The Rendering Engine

负责显示请求的内容， 可能是HTML，图片，PDF等，渲染引擎会对这些内容进行解析，然后将解析后的内容显示在浏览器窗口。

不同的浏览器使用不同的渲染引擎：

浏览器

渲染引擎（开发语言）

Chrome

Blink (c++)

Opera

Blink (c++)

Safari

Webkit (c++)

FireFox

Gecko (c++)

Edge

EdgeHTML (c++)

IE

Trident (c++)

WebKit是一个开源渲染引擎，其刚开始只是一个用于Linux平台的引擎，苹果公司对其进行了修改浏览器工作原理是怎样的，使其可以用与macOS和Windows平台。

4. 网络 – Networking

用于网络调用（针对于平台无关的统一接口，在不同的平台上使用不同的底层实现），比如HTTP请求。

5. JavaScript解释器 – JavaScript Interpreter

准确的说，应该说是JavaScript引擎，JavaScript引擎是一个子系统，用于将JS代码解析成机器码然后执行。Google V8引擎是最流行的JavaScript引擎。而不同的浏览器使用的JavaScript引擎也不尽相同：

浏览器

脚本引擎（开发语言）

Chrome

Google V8 (c++)

Opera

Google V8 (c++)

Safari

JavaScript Core (nitro)

FireFox

SpiderMonkey (c/c++)

Edge

Chakra JavaScript Engine (c++)

IE

Chakra JScript Engine (c++)

6. UI后端 – UI Backend

用于绘制基本小部件，比如组合框和窗口。UI后端会提供与平台无关的通用接口。其底层会使用操作系统的用户接口方法。

7. 数据存储 – Data Storage

这是数据持久层。浏览器需要保存各种各样的本地数据，比如cookies.浏览器也支持其它多种存储机制，比如localStorage,sessionStorage, AppCache, IndexedDB,WebSQL等。

那接下来我们来看看浏览器的工作流程。

浏览器工作流程1. 处理地址栏输入

需要指出的是：

【概念】：

2. DNS Lookup

DNS(Domain Name System)是域名系统， 可将域名解析成对应的IP地址，从而用户可以通过域名在英特网上访问特定Web 服务器提供的在线信息或服务。

当浏览器想要访问某个域名时，会首先检查缓存，如果缓存已经保存了对应的IP地址，那么DNS Lookup就不会发生；反之，下图的DNS Lookup流程会被触发：

第一步： 浏览器无法得知输入域名的IP地址，所以向DNS Resolver发起一个 DNS递归查询。这意味着DNS Resolver必须完成递归查询(recursive query)，并返回给查询发起者。对于大多数用户来说，DNS Resolver是由Internet服务供应商（ISP）提供，或者使用开源DNS，比如Google DNS（8.8.8.8）和OpenDNS（208.67.222.222）。当然也可以是本地域名服务器（Local Domain Server）。

第二步：DNS Resolver本身并没有保存域名和IP地址的对应信息，所以向DNS根服务器（Root server）发起迭代查询（Iterative query），

第三步：DNS根服务器中保存了所有TLD Server的地址。DNS根服务器将与域名example.com 匹配的TLD Server(.com)的地址返回给DNS Resolver。TLD server也就是顶级域名服务器，可以是.com, .edu, .org, .net等。

第四步：DNS Resolver向.com TDL Server发起发起迭代查询。

第五步：TDL Server将example.com的Name server的IP地址返回给DNS Resolver。

第六步：DNS Resolver向example.com的Name server发起迭代查询。

第七步：Name server将example.com的IP地址返回给DNS Resolver。

第八步：DNS Resolver将example.com的IP地址返回给浏览器。

整个DNS查询过程可以看作： 我们委托朋友（DNS Resolver）帮助我们完成查询，而朋友通过递归查询各级目录，最终获得域名的IP地址，并返回给我们。其中，Root Server是根目录，查询根目录获取到次级目录com的位置；然后通过次级目录（也就是TDL Server），获取到最终目录项example.com的位置；最后从example.com（也就是Name server）获取到IP地址。

3. 建立TCP连接

当IP地址被确认后，浏览器会根据这个IP，通过TCP三次握手（TCP three-way handshake）的方式，和服务器建立连接。

所谓TCP三次握手：

第一次： 浏览器发送一个TCP 同步包（SYNchronize package）给服务器浏览器工作原理是怎样的，等待确认。

第二次： 服务器收到SYN包，并返回一个同步确认包（SYNchronize-ACKnowledgement package）。

第三次： 浏览器收到服务器的SYN-ACK，向服务器发送一个确认包（ACKnowledgement package）。当服务器收到ACK后，TCP的socket连接就建立了。