这本系列的第一篇，先解释浏览器的功能以及执行方式。由于大多数客户将通过浏览器与 web 应用程序进行交互，因此必须了解这些出色程序的基础知识。

浏览器是一个渲染引擎，它的工作是下载一个web页面，并以人类能够理解的方式渲染它。

虽然这几乎是一种过于简单的过分简化，但我们现在需要知道的全部内容。

• 用户在浏览器栏中输入一个地址。

• 浏览器从该 URL 下载“文档”并渲染它。

你可能习惯使用 Chrome，Firefox，Edge或Safari等流行的浏览器之一，但这并不意味着没有不同的浏览器。

例如，lynx 是一种轻量级的、基于文本的浏览器，可以在命令行中工作。lynx 的核心原理与其他“主流”浏览器的原理完全相同。用户输入 web 地址(URL)，浏览器获取文档并呈现它——唯一的区别是 lynx 不使用可视化渲染引擎，而是使用基于文本的界面，这使得像谷歌这样的网站看起来像这样:

我们大致了解浏览器的功能，但是让我们仔细看看这些机智的应用程序为我们所做的步骤。

浏览器做了什么?

长话短说，浏览器的工作主要包括:

• DNS 解析

• HTTP 交换

• 渲染

• 重复以下步骤

DNS 解析

这个过程确保一旦用户输入 URL，浏览器就知道它必须连接到哪个服务器。浏览器联系 DNS 服务器，发现google.com 翻译成 216.58.207.110，这是一个浏览器可以连接的 IP 地址。

HTTP 交换

一旦浏览器确定了哪个服务器将为我们的请求提供服务，它将启动与它的 TCP 连接并开始 HTTP 交换。 这只是浏览器与服务器通信所需内容以及服务器回复的一种方式。

HTTP 只是用于在 Web 上进行通信协议的名称，而浏览器一般通过 HTTP 与服务器进行通信。 HTTP 交换涉及客户端（我们的浏览器）发送请求，服务器回复响应。

例如，当浏览器成功连接到 google.com 背后的服务器后，它将发送一个如下所示的请求:

GET / HTTP/1.1Host: google.comAccept: */*

让我们一行一行地把请求分解:

• GET / HTTP/1.1:在第一行中，并补充说其余请求将遵循 HTTP/1.1 协议（它也可以使用1.0或2）

• Host: google.com：这是 HTTP/1.1 中唯一必须的 HTTP 报头。因为服务器可能服务多个域(google.com, google.co.uk) 。这里的客户端提到请求是针对特定的主机的。

• Accept: */*：一个可选的标头，其中浏览器告诉服务器接受任何类型的响应。服务器可以拥有 JSON、XM L或HTML 格式的可用资源，因此它可以选择自己喜欢的格式。

作为客户端的浏览器发送请求之后，就轮到服务器进行响应了，这是响应的格式如下:

HTTP/1.1 200 OK
Cache-Control: private, max-age=0
Content-Type: text/html; charset=ISO-8859-1
Server: gws
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Set-Cookie: NID=1234; expires=Fri, 18-Jan-2019 18:25:04 GMT; path=/; domain=.google.com; HttpOnly...
...

哇，有很多信息需要消化。服务器让我们知道请求是成功的(200 OK)，并向响应中添加一些头部信息，例如，它告知哪个服务器处理了我们的请求(Server:gws)，该响应的 X-XSS-Protection 策略是什么，等等。

现在，你不需要理解响应中的每一行，在本系列后面的文章中，我们将介绍 HTTP 协议及其头部等内容。

现在，你只需要了解客户端和服务器正在交换信息，并且它们是通过 HTTP 进行交换的。

渲染

...
...

在响应的主体中，服务器根据 Content-Type 头包括响应类型来表示。 在我们的例子中，内容类型设置为 text/ html，因此我们期待响应中的 HTML 标记 - 这正是我们在正文中找到的。

这才是浏览器真正的亮点所在。它解析 HTML，加载标记中包含的额外资源(例如，可能需要获取JavaScript文件或CSS文档)，并尽快将它们呈现给用户。