本篇要研究的内容为前端的开发。我们知道存储于服务器端的统称为后端技术，而前端技术是指通过浏览器到用户端计算机的统称。因此，前端的所有知识都和“浏览器”紧密相关，在本篇文章中，我们将通过介绍浏览器的诞生原因及发展历史来详细地阐述浏览器的本质。

软件开发架构

C/S,B/S架构

随着互联网的推广和普及，诞生了很多基于网络的软件，其中就有我们在这一章中索要介绍的C/S,B/S架构。

C/S架构，即客户机Client（C）/服务器Server(S)架构，顾名思义，当用户想正常使用C/S架构软件时必须下载一个客户端（主要用来发送数据），且在远程有一个服务端与之响应。可是，当用户使用的程序越来越多，一个新的问题也随之一并诞生，比如用户想使用20个软件，他就必须下载20个客户端。

于是，就有人提出，有没有可能设计出一种“超级客户端”，用户只要下载这个“超级客户端，就可以给多个兼容的服务端发送请求。这个“超级客户端”就是我们现在耳熟能详的“浏览器“，而对应的浏览器Browser和服务器 Server的架构也就被我们称为B/S架构。

提醒：B/S架构其实是一种特殊的C/S架构。

浏览器发展史

浏览器的诞生原因可以追溯到互联网的发展。以下是浏览器的发展历史：

1. 早期：在互联网诞生初期，人们需要一种方式来访问网页内容。最早的浏览器是由蒂姆·伯纳斯-李（Tim Berners-Lee）开发的WorldWideWeb（后来改名为Nexus）浏览器，它是第一个可以浏览网页的图形化界面。
2. 1990年代初期：随着互联网的普及，出现了一些较为流行的浏览器，如NCSA Mosaic和Netscape Navigator。Netscape Navigator在当时的市场份额中占据主导地位。
3. 1990年代中期：微软推出了Internet Explorer，并将其捆绑在Windows操作系统中。这导致了一场著名的“浏览器大战”，最终Internet Explorer取得了主导地位。
4. 2000年代初期：Mozilla基金会推出了Mozilla Firefox浏览器，它的开源性质和创新功能吸引了许多用户。同时，Google也推出了Chrome浏览器，凭借其速度和简洁的界面逐渐蚕食市场份额。
5. 移动浏览器：随着智能手机的普及，移动浏览器变得越来越重要。Safari成为iOS设备的默认浏览器，而Android设备则通常使用Chrome浏览器。
6. HTML5和现代浏览器：HTML5的出现推动了浏览器的发展，现代浏览器支持更多的功能和交互性，如视频播放、地理定位、WebGL等。
7. 浏览器的多样化：除了主流浏览器外，还出现了许多其他浏览器，如Opera、Safari、Edge等，用户可以根据自己的喜好和需求选择合适的浏览器。

总的来说，浏览器的发展历史是一个竞争激烈的过程，不断涌现出新的技术和功能，以满足用户对于更快速、更安全、更便捷网络浏览体验的需求。

浏览器的本质

正如前文提到的，浏览器其实就是一个“超级客户端“，它会将请求的数据发送到不同的客户端，并将服务器返回的前端页面通过一定的操作渲染到本地，所以我们可以说浏览器的本质其实就是一种解释器。

从输入一个网址到浏览器显示页面的全过程

浏览器输入一个地址到看到页面信息的过程可以分为以下几个步骤：

1. 在浏览器中输入网址（URL）: 用户在浏览器的地址栏中输入目标网址（例如：https://www.example.com），并按下回车键。

2. DNS解析：浏览器首先会将输入的网址发送给DNS服务器，DNS服务器会将域名解析为对应的IP地址。这个过程涉及到递归查询和迭代查询，最终得到目标服务器的IP地址。

3. 建立TCP连接：浏览器使用HTTP协议与目标服务器建立TCP连接。TCP是一种可靠的传输协议，通过三次握手建立连接，确保数据的可靠传输。

4. 发送HTTP请求：建立TCP连接后，浏览器会向目标服务器发送HTTP请求。请求中包含了请求方法（GET、POST等）、请求头（包含浏览器信息、Cookie等）和请求体（POST请求时携带的数据）。

5. 服务器处理请求：目标服务器接收到浏览器发送的HTTP请求后，会根据请求的内容进行处理。处理的过程可能包括读取数据库、执行后台逻辑等。

6. 返回HTTP响应：服务器处理完请求后，会生成HTTP响应并发送给浏览器。响应中包含了状态码、响应头（包含服务器信息、Cookie等）和响应体（包含HTML、CSS、JavaScript等页面内容）。

7. 浏览器渲染页面：浏览器接收到HTTP响应后，会解析响应内容，并根据HTML、CSS、JavaScript等资源渲染页面。渲染过程包括解析HTML结构、加载和解析CSS样式、执行JavaScript代码等。

8. 页面显示：浏览器将渲染后的页面显示给用户，用户可以看到页面上的内容。

9. 断开TCP连接: 页面渲染完成后，如果没有keep-alive机制或者WebSocket等长连接技术，浏览器会发送一个关闭TCP连接的请求给服务器，进而两者断开连接。

1、在浏览器中输入网址（URL）

当在浏览器中输入网址时，浏览器其实就已在智能匹配 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。

对于 google的chrome 的浏览器，他甚至会直接从缓存中把网页展示出来，就是说，你还没有按下 enter，页面就出来了。

（1）简析URL的组成

• URL 的元素组成也和上述大致相似
  • 其中 访问协议 和 域名是必须的，目录名和文件名可以忽略

• 相应的 URL 请求对应在服务器上的文件路径如下

（2）分析域名是否规范

• 首先，浏览器做的第一步就是会解析URL得到里面的参数，分析域名是否规范，并将域名和需要的请求的资源分离开来，从而了解需要请求的是哪个服务器，请求的是服务器上的什么资源等等。

• 浏览器对URL进行解析之后，浏览器确定了目标服务器和文件名，接下来就是需要根据这些消息封装成一个HTTP请求报文发送出去。

• HTTP请求报文的例子为：

2、DNS解析

在解析过程之前我们先理解几个概念。

（1）DNS是什么？

DNS（Domain Name System）是一种用于将域名解析为IP地址的系统。（把我们的域名映射为IP地址，这就是DNS的作用）
它可以将人们易于记忆的域名转换为服务器可识别的IP地址，这样用户就可以使用域名访问网站，而不必直接输入数字格式的IP地址。

在浏览器中输入网址时，电脑会先向DNS服务器发送请求，获取该网址对应的IP地址，并在成功获取后直接连接该IP地址对应的服务器，在服务器端获取网页内容并显示出来，完成整个访问过程。因此，DNS在互联网中起着至关重要的作用。

（2）IP和域名的关系

IP（Internet Protocol）地址是一个数字标识，用于唯一识别连接到互联网上的每个计算机、服务器和其他设备。域名则是网站的人类可读的名称。域名系统（DNS服务器）可以将域名转换为与之关联的IP地址。
简单来说，IP地址是网络设备的标识符，而域名则是方便人们记忆和使用的网络地址别名。
域名系统通过将 域名 映射到 IP地址，使互联网上的用户能够以易记的方式访问特定的网站或服务器。

（3）域名服务器概念图

从上面这张图可以看到，域名的管理是分层次的。最高级是根，也叫做根服务器。从上往下功能逐渐细化。DNS就是和这些服务器进行打交道。

（4）DNS域名解析IP地址的过程

请求一旦发起，浏览器首先要做的事情就是解析这个域名。

1、一般来说，浏览器会首先查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。
2、如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。
3、查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
4、根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程。
5、本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。
6、最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

（5）DNS解析时发现域名和IP不一致，访问了该域名会如何？

域名和IP不一致，域名解析成了其他的的IP地址，但是这个IP地址正确。访问该域名就会访问其他的网站。

知乎上有一个阿里巴巴的回答：

从技术上来讲是可以解析到任意IP地址的，这时候针对这个地址发起HTTP访问，HTTP头中的host字段会是你的域名（而非该IP对应站点的域名），如果对方的网站HTTP服务器没有做对应的防护就可以访问，如果对方的网站HTTP服务器有防护则无法访问。

域名和IP不一致，域名解析成了其他的的IP地址，但是这个IP地址错误，访问该域名就会失败。

可参考：DNS解析时发现域名和IP不一致，访问了该域名会如何（大厂真题）

补充：

• 客户端在DNS请求报文中申请使用的是递归查询（也就是RD字段置1了），但在所配置的本地名称服务器上是禁用递归查询（DNS服务器一般默认支持递归查询的），即在应答DNS报文头部的RA字段置0。
• 其中，DNS 使用的是 UDP 协议，也就是说上面各种请求的转发，都是基于 UDP 这个无连接协议的。

3、浏览器与服务器建立TCP连接（80端口，三次握手）

在HTTP工作开始之前，web浏览器首先要通过网络与web服务器建立连接，该连接是通过TCP来完成的。

PS：为什么要先建立TCP呢？

因为HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能进行更高层次协议的连接，因此要先建立TCP连接，一般TCP连接的端口号是80。

三次握手的流程：

• 第一次握手：客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认；

• 第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；

• 第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。

具体的TCP连接的三次握手和断开的四次挥手 参照站内文章：网络编程之TCP协议的三次握手和四次挥手 - Xiao0101 - 博客园 (cnblogs.com)

4、浏览器发送HTTP请求文档

建立了TCP连接之后，web浏览器就会向web服务器发起一个http请求。

一个典型的 http request header 一般需要包括请求的方法，例如 GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法，一般的浏览器只能发起 GET 或者 POST 请求。

（1）HTTP请求报文都有什么组成？

HTTP请求报文主要由三个部分组成：请求行、请求头和请求体。具体如下：

请求行：包含请求方法、URI（请求的资源路径）和HTTP协议版本。例如：GET /index.html HTTP/1.1。

• 常见的方法为：GET、POST、PUT、DELETE等
• 常见的版本为：HTTP1.0、HTTP1.1、HTTP2.0等

请求头（Header）: 包含了客户端向服务器发送的附加信息，例如浏览器类型、字符编码、认证信息等。请求头以键值对的形式存在，多个键值对之间以换行符分隔。例如：

Accept:image/gif.image/jpeg.*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0)
Accept-Encoding:gzip,deflate.

请求体（Body）: 存放请求参数，即浏览器向服务器传输数据的实体部分。常用于POST方法提交请求时，发送表单数据、JSON数据等类型的数据。

需要注意的是，并不是所有的HTTP请求都必须带有请求体，像GET请求通常不需要发送请求体。

为什么 HTTP 报文中要存在 “空行”?
因为 HTTP 协议并没有规定报头部分的键值对有多少个。空行就相当于是 “报头的结束标记”, 或者是 “报头和正文之间的分隔符”。
HTTP 在传输层依赖 TCP 协议, TCP 是面向字节流的. 如果没有这个空行, 就会出现 “粘包问题”。

5、服务器处理请求

• 目标服务器接收到浏览器发送的HTTP请求后，会根据请求的内容进行相应的处理。

• 这个过程会涉及到后端服务的运行，例如使用Nginx作为反向代理服务器将请求转发给后端Web框架（如Django、Flask等）。

6、服务器发送HTTP响应

• 浏览器的 HTTP 请求报文通过 TCP 三次握手建立的连接通道被切分成若干报文段分别发送给服务器，服务器在收到这些报文段后，按照序号以原来的顺序重组 HTTP 请求报文。
• 然后处理并返回一个 HTTP 响应。
  • 当然，HTTP 响应报文也要经过和 HTTP 请求报文一样的过程。
• HTTP的响应报文：response响应报文，即从Web服务器到客户机(浏览器)的应答。报文的所有字段都是ASCII码。

• HTTP 响应报文由状态行、响应头部、空行 和 响应包体 4 个部分组成

• reposes里面的状态码：重要

• 状态行：状态码（列举常见的）

  • 200 : 响应成功
    301：永久重定向,请求资源的url已永久更改，在响应中给出了新的url。

  • 302：临时重定向。

  • 304：not modify（未改变，和缓存里面的是一样的）

  • 404：not found ，网页不存在。

  • 502：bad gateway （网关故障），但是后端的real server挂了。

  • 500：内部服务器错误。（服务器崩溃了）

• 响应头部：响应字段：

• Date：日期，通用字段，但通常出现在响应头里，表示 HTTP 报文创建的时间，客户端可以使用这个时间再搭配其他字段决定缓存策略

• Server：Server 响应报头域包含了服务器用来处理请求的软件信息及其版本。它和 User-Agent 请求报头域是相对应的，前者发送服务器端软件的信息，后者发送客户端软件(浏览器)和操作系统的信息。

• cache-control: max-age=30

• content-type：传递过来的类型。

7、浏览器渲染页面

• 浏览器接收到服务器返回的数据包，根据浏览器的渲染机制对相应的数据进行渲染。
• 渲染就是将响应报文里的html文件+图片+视频等展示出来，看到效果。
• 浏览器支持HTML语言，支持http，播放器等功能。

8、释放TCP连接（四次挥手）

• 浏览器和服务器都不再需要发送数据后，四次挥手断开 TCP 连接。

四次握手指断开TCP协议连接时客户端和服务器之间的交互过程

• 客户端向服务器发送一个FIN（结束）报文
  • 表示要关闭连接。
• 服务器收到FIN报文后向客户端回送一个ACK报文
  • 表示已经收到客户端的请求。
• 如果服务器还有数据需要发送给客户端
  • 则继续发送直到数据全部发送完毕。
• 服务器发送一个FIN报文，表示数据已经全部发送完毕
  • 可以关闭连接。

• 客户端收到FIN报文后向服务器发送一个ACK报文，表示确认收到关闭请求。
• 此时客户端需要进入TIME-WAIT状态，等待两倍的报文最大生存时间，以保证数据已经被全部传输完毕。
• 如果服务器没有收到来自客户端的ACK报文，则会重传FIN报文。