【高频】从输入URL到页面展示到底发生了什么？

一、相关衍生面试问题：

浏览器输入美团网站，从回车到浏览器展示经历了哪些过程 ？

http输入网页之后的流程？

百度搜索页面，从点开搜索框，到显示搜索页面经历了什么？

二、探究各个过程：

（以下回答针对问题1回答）

1. DNS 解析

• 浏览器首先会检查本地 DNS 缓存，看是否有美团网站的 IP 地址。如果没有，则会向本地 DNS 服务器发送请求，查询美团网站的域名对应的 IP 地址。
• 本地 DNS 服务器可能无法直接找到美团网站的 IP 地址，它会向根域名服务器发送请求，根域名服务器会指引本地 DNS 服务器去查询 .com 域名的顶级域名服务器。
• 顶级域名服务器会指引本地 DNS 服务器去查询美团网站的域名服务器。
• 美团网站的域名服务器会最终返回美团网站的 IP 地址给本地 DNS 服务器。
• 本地 DNS 服务器将 IP 地址返回给浏览器，并将其缓存起来。

【涉及到的相关知识：

1.DNS缓存：存储近期浏览、连接过的网站服务器的IP用的一个缓存系统。浏览器会尽可能利用缓存来提高性能,减少不必要的网络请求和DNS解析。

2.域名服务器：根域名服务器、顶级域名服务器（org\com\edu）、权限域名服务器、本地域名服务器[迭代查询（常用） | | 递归查询]。

3.DNS解析：用来把便于人们记忆的主机域名和电子邮件地址映射为计算机易于识别的IP地址。

】

2. 建立 TCP 连接

• 浏览器使用获得的 IP 地址，尝试与美团网站的服务器建立 TCP 连接。
• 浏览器会发送一个 SYN 包（同步请求）到服务器，服务器收到后会回复一个 SYN-ACK 包（同步确认）。
• 浏览器收到 SYN-ACK 包后，会发送一个 ACK 包（确认），完成三次握手过程，建立 TCP 连接。

【相关知识点：

1.三次握手的原因：首要原因是为了防止旧的重复连接初始化造成混乱，最主要原因就是防止「历史连接」初始化了连接。

2.每次建立 TCP 连接时，初始化的序列号都要求不一样：为了防止历史报文被下一个相同四元组的连接接收（主要方面）；为了安全性，防止黑客伪造的相同序列号的 TCP 报文被对方接收。

3.SYN攻击属于DDoS攻击的一种,它利用TCP协议缺陷,通过发送大量的半连接请求,耗费CPU和内存资源。【最直接的表现就会把 TCP 半连接队列打满，这样当 TCP 半连接队列满了，后续再在收到 SYN 报文就会丢弃，导致客户端无法和服务端建立连接。】

• 半连接队列，也称 SYN 队列；
• 全连接队列，也称 accept 队列；

4.避免办法：

• 调大 netdev_max_backlog；
• 增大 TCP 半连接队列；
• 开启 tcp_syncookies；
• 减少 SYN+ACK 重传次数

】

3. 发送 HTTP 请求

• 浏览器向美团网站的服务器发送一个 HTTP 请求，包含以下信息：
  • 请求方法：GET
  • 请求 URL：美团网站的首页地址
  • 请求头：包含一些浏览器信息、语言信息、Cookie 信息等。
• 服务器收到请求后，会根据请求信息进行处理。

【相关知识点：

1.post、get、put、delete就是对这个资源进行增、删、改、查的操作！

2.URI 用字符串标识某一互联网资源【身份证号】，而 URL 表示资源的地点【居住地址】

3.Cookie为"小型文本文件"，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息

】

4. 服务器处理请求

• 服务器会根据请求 URL，找到对应的页面文件。
• 服务器会根据页面文件的内容，生成 HTML 代码。
• 服务器会根据请求头中的 Cookie 信息，判断用户是否已登录，并根据用户状态，添加一些个性化的内容到 HTML 代码中。
• 服务器会根据请求头中的语言信息，选择合适的语言版本。

【相关知识点：

1.跨站请求伪造（Cross-Site Request Forgery，简称CSRF）是指，攻击者可能利用网页中的恶意代码强迫受害者浏览器向被攻击的Web站点发送伪造的请求，篡夺受害者的认证Cookie等身份信息，从而假冒受害者对目标站点执行指定的操作。

2.保护措施主要有:（1 ）加入MAC以进行完整性校验;（2）防止非法用户非法截获后的重放，可以让用户对相关信息进行数字签名，加强有效性验证;（3）对Cookie本身进行随机密钥加密，保证Cookie本身的信息安全。

】

5. 服务器返回响应

• 服务器将生成的 HTML 代码，以及一些其他信息（例如图片、CSS、JavaScript 文件等），打包成 HTTP 响应，发送回浏览器。
• 响应头包含一些状态码、内容类型、缓存信息等。

6. 浏览器解析响应

• 浏览器收到响应后，会解析响应头中的状态码。
  • 如果状态码为 200，表示请求成功，浏览器会继续解析响应内容。
  • 如果状态码为 404，表示页面未找到，浏览器会显示错误页面。
• 浏览器会解析响应内容中的 HTML 代码，并将其渲染成网页。
• 浏览器会加载响应内容中的图片、CSS、JavaScript 文件，并将其应用到网页中。

【相关知识点：

• 1xx（信息性状态码）：表示接收的请求正在处理。
• 2xx（成功状态码）：表示请求正常处理完毕。
• 3xx（重定向状态码）：需要后续操作才能完成这一请求。
• 4xx（客户端错误状态码）：表示请求包含语法错误或无法完成。
• 5xx（服务器错误状态码）：服务器在处理请求的过程中发生了错误。

】

7. 网页展示

• 浏览器将渲染好的网页展示给用户。

8. 持续交互

• 用户在网页上进行操作，例如点击链接、提交表单等，浏览器会发送新的 HTTP 请求到服务器，服务器会根据请求进行处理，并返回新的响应，浏览器会继续更新网页内容。

三、面试回答：

1. 用户在浏览器地址栏输入"meituan.com"并按下回车键。

2. 浏览器首先会查看自己的缓存,看是否之前已经访问过这个网站并缓存了相关资源。如果缓存中有相关的资源,浏览器就可以直接使用缓存中的内容,无需进行其他操作。

3. 如果缓存中没有找到所需的资源,浏览器就需要进行DNS解析,查找"meituan.com"对应的IP地址。这个过程中,浏览器会先查看本地DNS缓存,如果没有找到就会向DNS服务器发起查询请求。

4. 获得IP地址后,浏览器会向该IP地址发起HTTP请求,向web服务器请求获取"meituan.com"网页的内容。

5. web服务器收到请求后,会处理并生成相应的HTML页面内容,然后将其返回给浏览器。

6. 浏览器收到HTML页面内容后,会对其进行解析和渲染,构建出网页的DOM树并显示出来。

7. 在渲染网页的过程中,还可能需要加载额外的资源,如CSS文件、JavaScript文件、图片等。对于这些资源,浏览器也会遵循之前的流程,先检查缓存,再进行DNS解析和网络请求。

8. 当所有必需的资源都加载完毕后,浏览器就能将完整的网页呈现给用户。

【下图为代码随想录推荐回答：】