✊构建浏览器工作原理知识体系（网络协议篇）

前端阿彬
1,073 阅读22分钟

本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！

🌻 前言

书接上回～

系列文章目录：

  1. # ✊构建浏览器工作原理知识体系（开篇）
  2. # ✊构建浏览器工作原理知识体系（浏览器内核篇）
  3. # ✊构建浏览器工作原理知识体系（网络协议篇）
  4. ✊构建浏览器工作原理知识体系（网页加载超详细全过程篇）

为什么你觉得偶尔看浏览器的工作原理，但总是忘呢😵‍💫，因为你没有形成一个完整的知识网络，你的记忆是碎片化的。正如人的神经网络，只有当你的记忆相互依赖，相互链接，才能形成长期稳定的记忆。

所以本系列文章我将用一条知识线将浏览器工作原理的知识串联起来，因为本文的目的是为了帮助大家建立浏览器基础的思维树，所以很多细节点不做过多阐述，先有了树，后面你在上面伸展枝叶就会发现清晰明了很多。欢迎点赞支持或评论指正。

🪴一、网络进程的工作

网络进程是浏览器的一个重要组成部分，主要负责处理网络相关的任务和功能。其工作主要包括以下几个方面：

  1. 网络请求处理： 当用户在浏览器中输入网址、点击链接或提交表单时，网络进程负责处理这些网络请求。它通过与服务器通信，获取请求的网页或资源，并将其传输到渲染进程以供显示。
  2. HTTP 缓存管理： 网络进程负责管理浏览器的 HTTP 缓存，包括缓存的读取、写入、更新和失效等操作。通过合理地利用缓存机制，可以减少对服务器的请求次数，提高页面加载速度和用户体验。
  3. 网络安全保障： 网络进程也负责处理浏览器的网络安全功能，包括对 HTTPS 连接的管理、证书验证、安全策略的执行等。它确保用户在浏览器中的网络通信是安全可靠的。
  4. 跨域资源共享（CORS）： 当浏览器需要访问其他域名下的资源时，网络进程负责处理跨域资源共享（CORS）请求，确保安全地访问跨域资源。
  5. 代理服务器交互： 在一些特殊情况下，浏览器可能通过代理服务器来访问互联网资源，网络进程负责与代理服务器进行交互，获取代理服务提供的资源。
  6. 其他网络相关任务： 网络进程还可能负责其他一些网络相关的任务，如 DNS 解析、TCP 连接管理、请求重定向、请求重试、流量优化等。

综上所述，网络进程在浏览器中扮演着重要的角色，它负责处理各种网络请求和任务，确保用户能够安全、快速地访问互联网资源。

🪴二、OSI七层模型、TCP/IP四层模型

OSI 是 ISO（国际标准化组织）组织在1985年研究的网络互连模型。ISO 为了更好的使网络应用更为普及，推出了OSI 参考模型。其目的是推荐所有公司使用这个规范来控制网络。如果所有公司都使用相同的规范，就能实现网络互联。

image.png

简单概述下七层模型的作用：

  • 应用层：为应用程序提供服务；
  • 表示层：数据格式转换、数据加密；
  • 会话层：建立、管理、维护会话；
  • 传输层：建立、管理、维护端到端的连接
  • 网络层：IP地址和路由选择；
  • 数据链路层：提供介质访问和链路管理；
  • 物理层：物理设备确保数据传输；

TCP/IP 协议族是网络通信的基础，它是很多协议的集合。同样，TCP/IP 协议族也采用了分层策略，共分为4层：应用层、传输层、网络层、数据链路层。之所以要分层管理，主要有两个好处：

  1. 把各层的接口部分设计好后，每层内部的设计就可以自动变动了。如果某个地方需要改变设计时，只需要替换变动的层即可，不用整体做调整；
  2. 层次化后，设计变得相对简单了，处于应用层上的应用就可以专注于自己的人物，而不需要考虑其他的数据传输的问题。

简单概述下 TCP/IP 四层的作用：

  • 应用层：决定了向用户提供应用服务时通信的活动；
  • 传输层：给应用层提供网络连接中的计算机之间的数据传输；
  • 网络层：处理网络上流动的数据包；
  • 数据链路层：连接网络的硬件部分；

🪴三、TCP/IP协议族

TCP/IP协议族不止是指TCP协议和IP协议，而是指计算机之间为了实现通信，而约定好的一些规则，包括很多协议。例如TCP、IP、HTTP、TCP、UDP、ICMP、SNMP等

(一)、 TCP/IP通信传输流

正如上一章所说，TCP/IP协议采取分层管理，以便于后续单独对某一层进行调整。利用TCP/IP协议族进行通信时，会通过分层顺序和对方通信，并且在数据传输时会进行封装，即在发送端发送数据时经过每层，都会被打上该层的首部信息，接收端接收时再在每一层去除这些信息。大致步骤如下图：

image.png

(二)、 TCP/IP协议族中的三个重要协议

1. HTTP协议

IP协议处于应用层，它主要定义了客户端和服务器之间的通信规则，例如请求和响应的格式、方法（如 GET、POST）、状态码、首部字段等。

因为 HTTP 协议内容较多，下一章单独解释。

2. IP协议

IP协议处于网络层，它主要负责确定传输的目标。其中的关键是IP地址和MAC地址：

  • IP地址是节点被分配到的地址，可变；
  • MAC地址是网卡所属的固定地址，不可变

IP地址和MAC地址之间相互配对，并且可以通过ARP(Address Resolution Protocl)协议根据IP地址查处MAC地址。

3. TCP协议

TCP协议属于传输层，它是面向连接的、可靠的字节流服务

  • 面向连接：TCP只能一对一连接，不能像 UDP 协议那样一个主机同时向多个主机发送消息；
  • 字节流服务：就是把大块数据切割成报文段为单位的数据包进行管理，方便传输。
  • 可靠：因为TCP为了准确无误的传输数据，采取了我们老生常谈三次握手和四次挥手策略（具体看下一节）。

4. DNS协议

DNS协议位于应用层，它提供域名到IP地址之间的解析服务。

(三)、 三次握手、四次挥手

1. 什么是TCP连接

正如上面所说，为了保证数据的可靠传输和顺序传输，以及进行流量和拥塞控制，发送请求之前需要先建立TCP连接。

TCP连接的过程就是在处理用于保证可靠性和流量控制维护的某些状态信息，主要包括以下三种信息：

  • Socket：由 IP 地址和端口号组成
  • 序列号：用来解决乱序问题等
  • 窗口大小：用来做流量控制

所以在发送请求之前，客户端和服务端需要先相互发送TCP报文以建立连接，TCP报文的首部字段如下图：

image.png

3. TCP连接报文

TCP报文首部字段有固定首部和TCP首部两部分。你可以这么简单理解，固定首部是维护连接后数据正确有序传输的信息，TCP首部主要用于TCP连接过程中的状态切换，相当于维护TCP连接的过程。

下面简单介绍下TCP报文一些首部字段的作用。

固定首部：

  • 源端口和目的端口：分别写入源端口和目的端口，IP 地址 + 端口号就可以确定一个进程地址；
  • 序号/序列号（重要）：传输数据时，每个字节流的序号。初始值是随机的，序列号就是确保数据以正确顺序传输的关键；
  • 确认号 ack：期望收到对方下一个报文段的第一个数据字节的序号；
  • 数据偏移：TCP报文段的首部长度

TCP首部：

ACK、SYN、FIN等这些大写的单词，即TCP首部的6个控制位，表示标志位，值只会是0或1。其实你只要知道他们的全拼，就可以很快理解这个过程，没必要用那些抽象的例子去理解。

  • URG：Urgent紧急的（用于优先发送紧急数据）
  • ACK：acknowledgement确认；
  • SYN：synchronize同步；
  • FIN：finish结束；
  • PSH：push推送
  • RST：reset复位重置（tcp连接发生错误，用于释放连接）

2. 三次握手建立连接

三次握手的大致步骤如下：

  1. 发送端发送带有 SYN 标志（synchronize，同步器）的数据包发送给接收方；
  2. 接收端收到后，回传带有 SYN/ACK 标志（acknowledgement，确认）的数据包表示确认；
  3. 发送端再回传一个 ACK 标志的数据包，代表确认，握手结束

注意： 第三次握手是可以携带数据的，前两次握手不可以携带数据。因为前两次握手主要是客户端和服务器之间的连接确认和同步序列号，而第三次握手在客户端确认收到服务器的SYN+ACK包后，除了发送确认包ACK给服务器外，这个报文还可以携带客户端到服务器的数据。

问题来了，为什么是三次握手？不是两次、四次？

原因大概有以下三点：

  • 三次握手才可以阻止重复历史连接的初始化（主要原因）；
  • 三次握手才可以同步双方的初始序列号；
  • 三次握手才可以避免资源浪费;

简单说明下：

三次握手才可以阻止重复历史连接的初始化：

客户端发送syn报文后，如果网络阻塞，重新发送syn报文，服务端先接收到的肯定是旧的syn报文，再回复给客户端的时候，客户端发现期望收到的确认号不对，就会发送 RST 报文进行重新连接。而如果是两次握手，服务端接收到syn报文的时候就建立了连接，相当于在客户端发现确认号不对之前就已经连接上了，白白发送了数据，浪费了服务器资源。

三次握手才可以同步双方的初始序列号：

为了在TCP连接后数据传输可以正确有序地进行，所以发送端和接收端需要维护一个「序列号」。所以在TCP连接过程中就需要同步双方的序列号。

三次握手才可以避免资源浪费：

三次握手就已经理论上最少可靠连接建立，所以不需要使用更多的通信次数

3.四次挥手断开链接

四次挥手的大致步骤如下：

  1. 主动关闭方发送 FIN 报文，进入 FIN_WAIT_1 状态。
  2. 被动关闭方收到 FIN，发送 ACK，进入 CLOSE_WAIT 状态。
  3. 被动关闭方完成处理，发送 FIN，进入 LAST_ACK 状态。
  4. 主动关闭方收到 FIN，发送 ACK，进入 TIME_WAIT 状态，等待一段时间（2MSL）后关闭连接，被动关闭方收到报文后关闭

1. 问题来了，最后为什么要等2MSL?2MSL又是什么？

MSL是Maximum Segment Lifetime的英文缩写，可译为“最长报文段寿命”，它是任何报文在网络上存在的最长时间，超过这个时间报文将被丢弃。

而其原因就是为了保证客户端发送的最后一个ACK报文段能够到达服务器，以防ACK丢失，导致服务器无法正常关闭连接。

2. 问题又来了，为什么挥手需要四次？而不是三次

这个问题的关键点就是TCP是全双工模式

  • 这就意味着，关闭连接时，客户端向服务端发送 FIN 时，仅仅表示客户端不再发送数据了，但是客户端还能接收服务端的数据。
  • 服务端收到客户端的 FIN 报文时，先回一个 ACK 应答报文，但此时服务端可能还有数据需要处理和发送，等服务端不再发送数据时，才发送 FIN 报文给客户端来表示同意现在关闭连接。

从上面过程可知，服务端通常需要等待完成数据的发送和处理，所以服务端的 ACK 和 FIN 一般都会分开发送，因此需要四次挥手。

简单地说，前 2 次挥手用于关闭一个方向的数据通道，后两次挥手用于关闭另外一个方向的数据通道。

注意：在特定情况下，四次挥手是可以变成三次挥手的，例如短连接或频繁创建销毁连接的场景

三次挥手的过程：

  1. 主动关闭方发送 FIN + ACK。
  2. 被动关闭方收到 FIN + ACK，发送 ACK。
  3. 主动关闭方收到 ACK，连接关闭。

🪴四、HTTP 协议

（一）、HTTP 协议基础知识

1. http协议交换报文完成通信

http请求要求请求肯定是先从客户端发起通信的，服务端在没有接收到请求之前不会发送响应。

这时候就有人要问了，基于HTTP协议的 SSE(Server-Sent Events)技术不是服务端主动推送消息吗？但是你别忘了，SSE也是需要客户端先向服务端发请求的，它只是利用了 HTTP 的长连接特性，服务端在收到一次客户端请求后，长期保持连接，并在新事件时将数据推送给客户端。

客户端发送请求报文，格式如下：

image.png

服务端接收报文并解析，随后返回响应报文，格式如下：

image.png

3. http如何定位资源

HTTP 协议使用 URI 定位互联网上的资源。注意 URI 和 URL 是两个相关但不完全相同的概念：

  • URI（统一资源标识符） ：是用于标识某一资源的唯一字符串。它包括 URL 和 URN（Uniform Resource Name）。URI 用于唯一标识资源的位置、名称或其他信息。
  • URL（统一资源定位符） ：是 URI 的子集，用于定位某一资源的具体位置。URL 包括了用于访问资源的协议、主机名、路径等信息。URL 通常用于指定 Web 页面、图像、文件等在互联网上的位置。

总的来说，URL 是 URI 的一种特殊形式，用于指定资源的位置。URI 则更为广泛，可以用来标识任何资源，不仅限于定位。

2. http有哪些请求方法

  • get：获取资源

  • post：传输实体主体

  • put：传输文件，一般不用

  • head：确认 URI 的有效性及资源更新的日期等，不返回报文主体

  • delete：删除文件，和put相反

  • options：跨域请求前的预请求，确定请求是否被允许

  • trace：追踪路径，确认连接过程中的操作，不常用

  • connect：在与代理服务器通信时建立隧道，实现用隧道协议进行 TCP 通信。应用场景有：

    1. HTTPS代理连接：HTTPS 连接的建立过程中，客户端向代理服务器发送 connect 请求，请求代理服务器将客户端和目标服务器之间的通信建立为一条 TCP 连接，以便进行安全的 SSL/TLS 握手过程。
    2. WebSockets连接：使用websocket时，通常会使用 connect 请求来建立初始的 TCP 连接。

（二）、HTTP 版本迭代优化

1. 优化手段罗列

  1. 持久连接：只要任意一端没有明确提出断开连接,则保持 TCP 连接状态，这样建立 1 次 TCP 连接后可以进行多次请求响应，减少TCP连接和断开的开销；

  2. 管道化：在同一个tcp连接里，客户端可以同时发送多个请求，不用等待响应就能发送下一个请求；

  3. 内容编码：先对实体内容压缩后再传输；

  4. 分块传输：把实体主体分块传输；

2. HTTP 各版本对比

这里就不过多阐述了，贴个连接

（三）、HTTPS 加密+认证+完整性保护

如标题，HTTPS 就是在 HTTP 的基础上增加了加密处理和认证以及完整性保护。

HTTPS 并非是一种新协议，只是 HTTP 通信接口部分用 SSL 和 TLS 协议代替而已。简单来说就是，正常 HTTP 是直接和 TCP 进行通信的，而 HTTPS 则在中间加入了 SSL 协议。

image.png

1. https 和 http 的区别

  1. HTTPS是加密传输协议，HTTP是明文传输协议;
  2. HTTPS需要用到SSL证书，而HTTP不用;
  3. HTTPS比HTTP更加安全，对搜索引擎更友好，利于SEO,
  4. HTTPS标准端口443，HTTP标准端口80;
  5. HTTPS基于传输层，HTTP基于应用层;

2. https 的加密机制

https采用混合加密机制（共享密钥加密+公开密钥加密）

先来了解下以下两种加密方式：

共享密钥加密（对称密钥加密）：加密和解密用的同一个钥匙，所以加密完传输数据时需要把钥匙也传给接收者，有风险；

公开密钥加密（非对称密钥加密）：采用一对非对称的密钥进行加密和解密。一把是公开密钥，一把是私有密钥，这两把钥匙是配对的，公开钥匙可以所有人都知道，密钥只有接受者自己知道，在办理ssl证书时获得。发送密文一方使用对方的公开密钥进行加密，接收方拿自己的公开密钥和私有密钥就可以解密。

由于公开密钥加密比较复杂，效率低，所以https是先进行一次公开密钥加密，确保安全后，后续改为共享密钥加密。

image.png

（四）、HTTP 首部字段

HTTP 首部字段，也就是我们常说的请求头、响应头。首部字段可以在网络通信的过程中，传递额外重要的信息。

HTTP 首部字段根据实际用途可以分为以下4类：

  • 通用首部字段：请求头和响应头都会使用的字段；
  • 请求首部字段：请求头附带信息；
  • 响应首部字段：响应头附带信息；
  • 实体首部字段：针对请求或响应中的实体补充的信息，例如资源的更新时间等；

下面列举一下需要了解的首部字段

通用首部字段

  • Cache-control：控制缓存策略
  • Connection: 管理持久连接、控制代理服务器要删掉的首部字段

关于浏览器的缓存策略，可以看我以前写的文章 缓存实战

请求首部字段

  • Accept：客户端能处理的媒体类型
  • Accept-Encoding：浏览器支持的内容编码格式以及优先级
  • Accept-Encoding：用户代理的认证信息，401请求会加上这个字段
  • Range：获取部分资源的范围请求，设置获取的字节范围，如果范围请求成功状态码为206，无法处理范围请求状态码为200
  • If-Range：如果请求资源的Etag值或时间和If-Range一致，则作为范围请求处理，否则返回全部内容
  • If-Match：比较实体标记（Etag）,如果匹配成功，才会执行请求，否则报错412
  • If-Modified-Since：比较资源更新时间，如果还没过资源缓存时间，则直接触发协商缓存，并返回状态码304
  • Referer：发起请求的原始资源的URI，由浏览器自动添加，无法更改
  • User-Agent：用户代理信息

响应首部字段

  • Accept-Range：服务端是否能够处理范围请求
  • Age：被缓存资源的创建经过时间
  • Etag：资源的实体标记

实体首部字段

  • Allow：支持使用的http方法
  • Content-Encoding：内容编码格式，可以检查是否有效开启了gzip、br压缩等
  • Content-Length：实体主体部分大小（字节）
  • Content-Range：范围请求时返回当前发送部分和整体大小
  • Content-Type：资源的媒体类型
  • Expires：资源的过期时间。但是当首部字段 Cache-Control 有指定 max-age 指令时，max-age的优先级更高
  • Last-Moodified：资源最后修改时间

（五）、状态码

响应状态码的第一位指定了响应类别，如下：

下面是一些需要了解的状态码：

  • 206，range范围请求的响应码
  • 301，永久性重定向，资源已经被分配了新的URI，如果已经存了该网址的书签，可以查看请求响应的location首部字段重新保存地址
  • 302，临时重定向，临时分配了新的URI
  • 304，和重定向没关系，请求的资源自上次请求后没有发生变化，即命中协商缓存状态码就是304
  • 400, bad request，请求报文存在语法错误
  • 401, Unauthorized，请求需要通过http认证
  • 403，请求被服务器拒绝了，一般是权限问题
  • 404，无法找到请求的资源
  • 500，服务端执行请求时发生错误
  • 503，服务器超负载或停机维护

🪴五、HTTP 协议和 TCP/IP 协议族的关系

HTTP 协议属于 TCP/IP 协议族内部的一个子集。一定要有 TCP/IP 协议族分层管理的思想，HTTP 协议只是其中比较重要的一部分而已。

下面这张经典流程图很清晰的说明了 IP 协议、TCP 协议、DNS 服务、HTTP协议在通信过程中发挥的作用：

image.png

🪴六、代理、网关、隧道

1. 代理

代理是一种有转发功能的应用程序，扮演客户端和服务圈的“中间人”角色。接受由客户端发送的请求转发给服务器，同时也接收服务器返回的响应转发给客户端。

一些应用场景：

  • 跨域代理： 通过代理处理跨域问题，前端设置代理的原理是请求发到代理服务器，再由代理服务器发送请求至目标服务器。因为同源策略只是用来限制浏览器的，服务端请求服务端不会有跨域问题；
  • 负载均衡和高可用性：反向代理可以用于负载均衡，将请求分发到多个后端服务器，以提高系统的性能和可用性；
  • 匿名访问： 用户可以通过代理隐藏其真实 IP 地址，实现匿名访问网络资源；
  • 性能优化： 缓存代理可以存储之前请求的内容，提高对相同资源的访问速度；

2. 网关

网关是转发其他服务器通信数据的服务器，接收从客户端发送的请求时，它会像自己拥有资源的服务器一样对请求进行处理，有时候客户端可能都不会察觉自己的通信目标是网关。

一些应用场景：

  • 安全网关： 保护企业网络免受网络攻击和恶意软件的影响。它可以实施访问控制、防火墙、反病毒和入侵检测系统（IDS）等安全措施，以确保网络安全性；

  • 集成服务：：网关可以连接不同的通信系统，集成不同的服务，提供统一的入口和接口。例如直接连接数据库、又或者在购物网站结算时，网关可以直接和信用卡结算系统联动；

  • 协议转换： 网关可以在不同的网络或协议之间进行转换，例如将 HTTP 请求转换为 HTTPS；

  • 日志记录和分析： 网关可以记录和分析流经它的请求，用于监控和调优系统性能；

3.隧道

隧道是在相隔甚远的客户端和服务端之间进行中转，并保持双方通信连接的应用程序。使用隧道的目的就是确保客户端和服务端能够安全通信。

一些应用场景：

  • VPN：连接远程网络，建立安全加密的通信通道，可以安全地连接远程用户或分支办公室到企业内部网络；
  • 绕过防火墙：在某些情况下，隧道可以帮助用户绕过网络防火墙限制，访问被封锁的内容。

🎁 说在最后

学如逆水行舟，不进则退～加油吧少年👊👊👊

先看后赞，养成习惯👍
收藏吃灰，不如学会🍗
点个关注，不要迷路🪤

image.png

avatar
文章
阅读
粉丝