导航流程——从输入URL到页面展示的过程

最新推荐文章于 2024-04-28 21:43:35 发布

LCMKK

最新推荐文章于 2024-04-28 21:43:35 发布

阅读量926

点赞数 19

文章标签：网络面试

本文链接：https://blog.csdn.net/qq_42966167/article/details/136661771

版权

文章目录

前言
一、用户输入
二、URL 请求过程

前言

经典面试题：在浏览器里，从输入 URL 到页面展示，这中间发生了什么？
以下是导航流程的完整示意图：
导航流程示意图

一、用户输入

用户在地址栏输入一个查询关键字，浏览器地址栏会判断输入内容是搜索内容还是请求的URL。

是搜索内容，则使用默认搜索引擎合成带搜索关键字的 URL。
输入的符合 URL规则，比如 www.baidu.com，则会加上协议合成完整的 URL。

输入完成点击回车，浏览器当前标签页图标显示加载状态，但是网页内容还没变化，网页内容更新需要等到提交文档阶段。

二、URL 请求过程

合成请求 URL 之后，浏览器进程会通过**进程间通信（IPC）**把 URL 请求发送到网络进程，网络进程接收到 URL 请求之后，才会发起真正的 URL 请求流程。

1.查找缓存

浏览器先检查浏览器缓存中是否又要请求的资源的副本，缓存中存在就会拦截请求，直接响应缓存中的副本，然后直接结束请求，不会从服务器下载。
浏览器缓存策略
当服务器返回HTTP 响应头给浏览器时，浏览器是通过响应头中的 Cache-Control 字段来设置是否缓存该资源。通常，我们还需要为这个资源设置一个缓存过期时长，而这个时长是通过 Cache-Control 中的 Max-age 参数来设置的，比如上图设置的缓存过期时间是 2000 秒。

在该缓存资源还未过期的情况下, 如果再次请求该资源，会直接返回缓存中的资源给浏览器。

如果缓存过期了，浏览器则会继续发起网络请求，并且在HTTP 请求头中带上 If-None-Match 的值来判断请求的资源是否有更新。

如果没有更新，就返回 304 状态码，相当于服务器告诉浏览器：“这个缓存可以继续使用，这次就不重复发送数据给你了。”
如果资源有更新，服务器就直接返回最新资源给浏览器。

2.准备IP地址和端口

2.1 获取 IP

IP 协议是保证数据包在互联网上传输，通过 IP 地址（一个IP对应一个计算机地址）把数据包从源 IP 传输到接收方。数据包从主机 A 发送到主机 B，传输前数据包会附上接收方（主机B）IP 地址，保证正确寻址，也会附带发送方（主机A）的 IP 地址，让 B 接收之后可以回复 A。IP 版本、源 IP 地址、目标 IP 地址、生存时间等信息会存放在 IP 头中。
IP协议传输模型

IP 是一串数字标识，如 10.0.0.1，难以记忆，所以有一套负责把域名和 IP 地址做一一映射关系的系统，叫做域名系统，简称 DNS。

浏览器准备 IP 地址时会进行 DNS 解析，这一步浏览器会先检查 DNS 数据缓存服务 中是否已经解析过当前域名，然后获取请求域名对应的服务器 IP 地址。如果请求协议是 HTTPS，还需要建立 TLS 连接。

2.2 获取端口

拿到 IP 之后，需要获取端口号，URL 若没有指定端口，http 默认是 80 端口，https 默认是 443 端口。

IP 协议只负责把数据包传输到接收方，接收方不知道该把数据包交给哪个应用程序，端口都对应着应用程序。**UDP 协议（用户数据包协议）**负责把数据包送达信用程序，把目的端口、源端口等信息封装到 UDP 头中。

UDP 有点是传输速度快，通常用在在线视频、互动游戏，缺点明显：

发送数据包时，如果数据包出错会被直接丢弃，不提供重发机制，所以发送之后无法确定是否到达目的地。
大文件传输过程中被分成很多小数据包传输，这些数据包在不同时间到达接收端，UDP 协议在传输完成后不知道如何组装数据还原成完整文件。

为了解决 UDP 缺点，TCP 协议**（传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议**支持重传机制，并且引入了数据包排序机制，TCP 头除了包含了目标端口和本机端口号外，还提供了用于排序的序列号，以便接收端通过序号来重排数据包。

3. 等待 TCP 队列

端口和 IP 地址准备好，对于浏览器来说不是直接就建立 TCP 连接，以 chrome 浏览器为例，同一个域名最多只能建立 6 个 TCP 连接，如果超过6个请求（在没有TCP 长连接情况下，一个 HTTP 请求对于一个 TCP 连接），就会有请求进入等待队列，知道进行中的请求完成。

4. 建立 TCP 连接

一个完整的 TCP 连接的生命周期包括了“建立连接”“传输数据”和“断开连接”三个阶段。
TCP连接生命周期

首先，建立连接阶段。这个阶段是通过“三次握手”来建立客户端和服务器之间的连接。TCP 提供面向连接的通信传输。面向连接是指在数据通信开始之前先做好两端之间的准备工作。所谓三次握手，是指在建立一个 TCP 连接时，客户端和服务器总共要发送三个数据包以确认连接的建立。
其次，传输数据阶段。在该阶段，接收端需要对每个数据包进行确认操作，也就是接收端在接收到数据包之后，需要发送确认数据包给发送端。所以当发送端发送了一个数据包之后，在规定时间内没有接收到接收端反馈的确认消息，则判断为数据包丢失，并触发发送端的重发机制。同样，一个大的文件在传输过程中会被拆分成很多小的数据包，这些数据包到达接收端后，接收端会按照 TCP 头中的序号为其排序，从而保证组成完整的数据。
最后，断开连接阶段。数据传输完毕之后，就要终止连接了，涉及到最后一个阶段“四次挥手”来保证双方都能断开连接。

TCP 为了保证数据传输的可靠性，牺牲了数据包的传输速度。

5. 发送 HTTP 请求

浏览器先构建请求行，包含请求方法、请求 URI 和 HTTP 版本协议。告诉服务器浏览器以什么请求方式，要获取什么资源。

GET /index.html HTTP/1.1

请求头会把浏览器的一些基础信息告诉服务器。比如包含了浏览器所使用的操作系统、浏览器内核等信息，以及当前请求的域名信息、浏览器端的 Cookie 信息。
通常是如登录网站需要将用户信息作为 POST 请求的请求体发送给服务器。

6. 服务端响应 HTTP 请求

服务器接收到请求信息后，会根据请求信息生成响应数据，并发给网络进程。

响应行包括 HTTP 协议版本和状态码。状态码是告诉浏览器处理结果，如 200 表示成功，404 找不到资源。
响应头包含了服务器自身的一些信息，比如服务器生成返回数据的时间、返回的数据类型（JSON、HTML、流媒体等类型），以及服务器要在客户端保存的 Cookie 等信息。
响应体就包含了 HTML 的实际内容。

在接收到服务器返回的响应头后，网络进程开始解析响应头，如果发现返回的状态码是 301 或者 302，那么说明服务器需要浏览器重定向到其他 URL。这时网络进程会从响应头的 Location 字段里面读取重定向的地址，然后再发起新的 HTTP 或者 HTTPS 请求。如果是 200，浏览器还会根据 Content-Type 响应头决定如何显示响应体，Content-Type 的值是 application/octet-stream，显示数据是字节流类型的，通常情况下，浏览器会按照下载类型来处理该请求，如果 Content-Type 字段的值被浏览器判断为下载类型，那么该请求会被提交给浏览器的下载管理器，同时该 URL 请求的导航流程就此结束，否则浏览器则会继续进行导航流程。

7. 准备渲染进程

默认情况下，Chrome 会为每个页面分配一个渲染进程，但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点（相同的协议和根域名）的话，那么新页面会复用父页面的渲染进程，这个叫 process-per-site-instance 策略。
渲染进程准备好之后，还不能立即进入文档解析状态，因为此时的文档数据还在网络进程中，并没有提交给渲染进程，所以下一步就进入了提交文档阶段。