测试开发面试题：浏览器输入url之后的过程

夜阑卧听风吹雨，铁马冰河入梦来

于 2024-05-07 10:39:07 发布

阅读量72

点赞数

分类专栏：面试文章标签：前端

原文链接：https://mp.weixin.qq.com/s/LLRasLFwQmFkx_wldMDMWQ

版权

面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

概述整体过程：

URL解析：浏览器首先会解析输入的URL。URL通常由协议（如HTTP、HTTPS）、域名（或IP地址）、端口号（如果未指定，默认为协议的默认端口）、路径（指定服务器上的资源位置）、查询参数和片段标识符组成。浏览器会将这些部分分解并提取出来，以便后续的操作。
DNS解析：如果输入的URL中包含了域名而非IP地址，浏览器会进行DNS解析，将域名解析成相应的IP地址。DNS解析通过向域名服务器发送查询请求，并接收服务器返回的IP地址来完成。一旦浏览器获取了目标服务器的IP地址，它就可以通过该地址与服务器建立连接。
建立TCP连接：浏览器使用HTTP协议或HTTPS协议与服务器通信。如果是HTTP协议，浏览器会尝试与服务器的默认HTTP端口（通常是80）建立TCP连接；如果是HTTPS协议，浏览器会尝试与服务器的默认HTTPS端口（通常是443）建立加密的TLS连接。这个过程通常涉及“三次握手”，即浏览器向服务器发送一个连接请求，服务器确认请求并回复，最后浏览器再次确认服务器的回复。
发送HTTP请求：一旦TCP连接建立完成，浏览器会向服务器发送HTTP请求。这个请求包含了之前解析得到的URL、请求方法（GET、POST等）、请求头部（包含浏览器和客户端的信息、所需的数据格式等）以及请求体（对于POST请求，通常包含用户提交的数据）。
服务器处理请求并返回响应：服务器收到浏览器发送的请求后，会根据请求的内容进行相应的处理。这可能涉及到从服务器上获取请求的资源（如HTML文件、图片、视频等），执行数据库查询、处理用户提交的数据等操作。处理完成后，服务器会生成一个HTTP响应，包含了响应状态码（指示请求的成功或失败）、响应头部（包含服务器信息、内容类型、缓存控制等）以及响应体（所请求资源的实际内容）。
接收并渲染响应：浏览器接收到服务器返回的HTTP响应后，会根据响应的内容进行相应的处理。如果响应的内容是HTML，浏览器会解析HTML并构建DOM树，然后根据CSS样式信息构建渲染树，最终将DOM树和渲染树结合起来，展示给用户。如果响应的内容是其他资源（如图片、视频、JavaScript文件等），浏览器会根据其内容类型进行相应的处理，并将其展示在页面上或执行相应的操作。
断开连接：一旦浏览器完成了对响应的处理，它会关闭与服务器的TCP连接。在HTTP/1.1中，连接通常会保持一段时间以便于后续的请求，这被称为“持久连接”。在HTTP/2及更新的版本中，多个请求可以通过同一个连接并行处理，以提高性能。

这就是浏览器输入URL后整个过程的基本流程。从用户输入URL到最终在浏览器中看到页面内容，涉及了多个步骤和协议的交互。

详细叙述每个过程的一些细节：

url解析

1. 协议解析：浏览器首先会解析URL中的协议部分。协议通常是指HTTP、HTTPS、FTP等，它定义了浏览器和服务器之间进行通信所使用的规则和格式。

2. 端口解析：URL中可能包含端口号，如果未指定端口号，默认使用协议的默认端口（HTTP默认端口是80，HTTPS默认端口是443）。浏览器会根据URL中的端口号信息来决定连接服务器所使用的端口

3. 路径解析：URL中的路径部分指定了服务器上所请求资源的位置。浏览器会提取出路径信息，用于构建HTTP请求。

4. 查询参数解析：URL中可能包含查询参数，用于向服务器传递额外的信息或者配置。浏览器会将查询参数解析成键值对，并在HTTP请求中以特定的格式发送给服务器。

5.片段标识符解析：URL中的片段标识符（通常以#开头）用于指定文档中的特定位置或锚点。浏览器不会将片段标识符发送给服务器，而是在页面加载完成后根据片段标识符滚动到相应的位置。

DNS解析

DNS（Domain Name System）解析是将域名解析成对应的IP地址的过程，它是互联网中实现域名与IP地址映射的基础服务之一。

DNS解析的详细过程：

浏览器请求：用户在浏览器中输入一个域名，例如"example.com"。
本地DNS缓存：浏览器首先会检查本地DNS缓存中是否已经保存了该域名的解析结果。如果已经缓存了该域名的IP地址，则直接使用缓存中的结果，跳过后续的DNS解析过程，提高了解析速度。
系统DNS缓存：如果本地DNS缓存中没有找到对应的解析结果，浏览器会检查操作系统中的DNS缓存。操作系统也会缓存最近查询过的域名解析结果，以减少重复查询DNS服务器的次数。
本地hosts文件：如果本地和系统DNS缓存中都没有找到对应的解析结果，浏览器会查找本地hosts文件。hosts文件是一个文本文件，用于将域名映射到特定的IP地址。如果hosts文件中存在对应的映射关系，则直接使用hosts文件中指定的IP地址。
DNS递归查询：如果以上步骤都没有找到域名的解析结果，浏览器会向本地配置的DNS服务器发起递归查询请求。本地DNS服务器通常由互联网服务提供商（ISP）或网络管理员配置。如果本地DNS服务器缓存了该域名的解析结果，则直接返回给浏览器；否则，它会从根域名服务器开始逐级查询直到找到域名对应的IP地址。
DNS解析过程：DNS解析过程中涉及到多级的DNS服务器，包括根域名服务器、顶级域名服务器、权威域名服务器和本地DNS服务器。递归查询过程中，本地DNS服务器会依次查询根域名服务器，根域名服务器返回顶级域名服务器的IP地址；然后查询顶级域名服务器，顶级域名服务器返回权威域名服务器的IP地址；最后查询权威域名服务器，权威域名服务器返回域名对应的IP地址。
返回结果：一旦本地DNS服务器获取到了域名的解析结果，它会将解析结果返回给浏览器。浏览器接收到IP地址后，就可以使用该地址与目标服务器建立连接，并发起HTTP请求。
缓存结果：本地DNS服务器通常会将查询到的域名解析结果缓存一段时间，以便于后续的查询请求加快响应速度。DNS记录的缓存时间由域名的TTL（Time To Live）值决定，TTL是一个指定DNS记录在缓存中保留的时间长度。

建立TCP连接

TCP连接的建立采用了三次握手（three-way handshake）的过程，确保了客户端和服务器之间的通信能够正常开始。

客户端发送SYN报文：连接建立的第一步是客户端向服务器发送一个SYN（同步）报文。该报文包含了一个初始序列号（ISN，Initial Sequence Number），用于序列号的初始化。SYN标志位被置为1，表示这是一个连接请求。
服务器回复SYN-ACK报文：服务器收到客户端的SYN报文后，如果同意建立连接，会向客户端发送一个SYN-ACK（同步-确认）报文。该报文同样包含了一个确认序列号（ACK number），用于确认客户端的序列号，同时也包含了服务器的初始序列号。SYN和ACK标志位都被置为1，表示这是一个确认连接请求的报文。
客户端发送ACK报文：客户端收到服务器的SYN-ACK报文后，会向服务器发送一个确认报文。该报文的ACK标志位被置为1，表示确认收到了服务器的SYN报文，同时序列号字段中包含了服务器发送的初始序列号加1，以确认收到了服务器的初始序列号。这个ACK报文也可以携带数据，不过在三次握手中，一般不携带数据。

发送http请求

发送HTTP请求是浏览器向服务器获取网页或资源的过程

1. 构建请求行：浏览器首先根据用户输入的URL构建HTTP请求的请求行。请求行包含了请求方法、目标URL和HTTP协议版本。常见的请求方法包括GET、POST、PUT、DELETE等，对应着不同的操作。

2. 添加请求头部：浏览器根据需要向请求添加一些头部信息，这些头部信息包含了关于客户端的信息、所需的数据格式、支持的压缩算法等。常见的头部包括User-Agent、Accept、Content-Type等。

3. 可选：构建请求体：对于POST、PUT等需要在请求体中发送数据的请求，浏览器会根据请求的数据格式构建请求体。请求体可以是普通的文本、JSON、XML等格式的数据，也可以是文件上传等。

4. 建立TCP连接：浏览器使用HTTP协议或HTTPS协议与服务器通信。如果是HTTP协议，浏览器会尝试与服务器的默认HTTP端口（通常是80）建立TCP连接；如果是HTTPS协议，浏览器会尝试与服务器的默认HTTPS端口（通常是443）建立加密的TLS连接。这个过程通常涉及“三次握手”，即浏览器向服务器发送一个连接请求，服务器确认请求并回复，最后浏览器再次确认服务器的回复。

5.发送请求：TCP连接建立完成后，浏览器会将构建好的HTTP请求发送给服务器。请求会以文本形式发送，包含了请求行、请求头部和请求体（如果有的话）。

6. 服务器处理请求：服务器收到浏览器发送的HTTP请求后，会根据请求的内容进行相应的处理。这可能涉及到从服务器上获取请求的资源（如HTML文件、图片、视频等），执行数据库查询、处理用户提交的数据等操作。

7. 服务器返回响应：服务器处理完请求后，会生成一个HTTP响应，包含了响应状态码、响应头部和响应体。响应状态码指示了请求的成功或失败，常见的状态码包括200（成功）、404（未找到）、500（服务器内部错误）等。

8.接收并处理响应：浏览器接收到服务器返回的HTTP响应后，会根据响应的内容进行相应的处理。如果响应的内容是HTML，浏览器会解析HTML并构建DOM树，然后根据CSS样式信息构建渲染树，最终将DOM树和渲染树结合起来，展示给用户。如果响应的内容是其他资源（如图片、视频、JavaScript文件等），浏览器会根据其内容类型进行相应的处理，并将其展示在页面上或执行相应的操作。

9. 断开连接：一旦浏览器完成了对响应的处理，它会关闭与服务器的TCP连接。在HTTP/1.1中，连接通常会保持一段时间以便于后续的请求，这被称为“持久连接”。在HTTP/2及更新的版本中，多个请求可以通过同一个连接并行处理，以提高性能。

服务器处理请求并返回响应

注意此处服务器指的不仅仅是后端服务器

接收请求：服务器首先接收到来自客户端的HTTP请求。这个请求可能是获取静态文件（如HTML、CSS、JavaScript、图片等），也可能是动态请求（如通过CGI、PHP、ASP.NET等生成的动态内容）。
解析请求：服务器会解析收到的HTTP请求。这涉及到解析请求行、请求头部和请求体（如果有的话）。服务器会提取出请求的方法（GET、POST等）、URL、协议版本、请求头部信息以及请求体内容（对于POST等带有数据的请求）。
处理请求：根据请求的内容和服务器的配置，服务器会执行相应的处理逻辑。对于静态文件，服务器可能会直接从文件系统中读取文件内容并返回；对于动态请求，服务器可能会执行相应的脚本或程序，生成动态内容并返回。
与数据库交互：如果请求涉及到数据库查询或数据处理，服务器可能会与数据库进行交互。这可能涉及到执行SQL查询、更新数据库内容、从数据库中获取数据等操作。
生成响应：服务器根据请求的处理结果生成一个HTTP响应。响应包含了响应状态码、响应头部和响应体。状态码指示了请求的处理结果（如200表示成功，404表示未找到，500表示服务器内部错误等），头部包含了服务器信息、内容类型、缓存控制等，响应体包含了实际的响应内容。
发送响应：服务器将构建好的HTTP响应发送给客户端。响应会以文本形式发送，包含了响应状态行、响应头部和响应体。服务器通过TCP连接将响应数据发送给客户端，确保数据能够安全可靠地传输到客户端。
客户端接收响应：客户端（浏览器）接收到服务器返回的HTTP响应后，会根据响应的内容进行相应的处理。如果响应的内容是HTML，浏览器会解析HTML并构建DOM树，然后根据CSS样式信息构建渲染树，最终将DOM树和渲染树结合起来，展示给用户。如果响应的内容是其他资源（如图片、视频、JavaScript文件等），浏览器会根据其内容类型进行相应的处理，并将其展示在页面上或执行相应的操作。
关闭连接：一旦服务器完成了对请求的处理并发送了响应，它会关闭与客户端的TCP连接。在HTTP/1.1中，连接通常会保持一段时间以便于后续的请求，这被称为“持久连接”。在HTTP/2及更新的版本中，多个请求可以通过同一个连接并行处理，以提高性能。

浏览器渲染网页的过程

解析HTML：浏览器首先下载HTML文件，并解析HTML标记，构建DOM（Document Object Model）树。DOM树是网页的抽象表示，它描述了HTML文档的结构和内容。
解析CSS：浏览器下载外部样式表（如果有）以及内部样式表，并解析CSS规则，构建CSSOM（CSS Object Model）树。CSSOM树描述了样式规则的结构和层叠关系。
合并DOM和CSSOM：浏览器将DOM树和CSSOM树合并成一个渲染树（Render Tree）。渲染树包含了网页中所有可见的DOM元素和其对应的样式信息。
布局计算：浏览器根据渲染树计算每个元素在页面中的位置和大小，这个过程又称为布局计算（Layout）。浏览器会确定每个元素的位置、尺寸以及相互之间的关系。
绘制页面：浏览器根据布局计算得到的信息，将页面内容绘制到屏幕上。这个过程涉及到将元素转换成屏幕上的像素，包括字体渲染、颜色填充、边框绘制等。
处理脚本：如果网页中包含JavaScript代码，浏览器会执行JavaScript代码，并根据代码的逻辑修改DOM树、CSSOM树和渲染树。这可能会触发重新布局和重新绘制的过程。
处理用户交互：用户与页面进行交互时，浏览器会捕获用户的输入事件（如鼠标点击、键盘输入等），并执行相应的处理逻辑。这可能涉及到修改页面内容、触发动画效果、发送HTTP请求等操作。
重绘和重排：如果页面内容发生了变化，浏览器会重新进行绘制和布局计算，更新页面的显示。这个过程可能会多次进行，直到页面达到稳定状态。
渲染完成：当浏览器完成了所有的渲染和处理过程后，页面就渲染完成了，用户可以看到最终的页面内容并进行交互。

断开连接

断开连接是指在HTTP请求-响应过程结束后，客户端和服务器之间的TCP连接被关闭的过程。

关闭TCP连接：在HTTP/1.1中，TCP连接默认是持久连接，即在一次请求-响应结束后不会立即关闭连接，而是会保持一段时间以便于后续的请求。但在某些情况下，需要明确地关闭TCP连接，以释放资源或终止连接。在HTTP/1.0中，默认情况下每次请求-响应都会关闭连接。无论是HTTP/1.1还是HTTP/1.0，当需要关闭连接时，一方会向另一方发送一个FIN（Finish）报文，表示要关闭连接。
接收到FIN报文：当一方收到另一方发送的FIN报文时，表示对方希望关闭连接。
发送ACK报文：接收到FIN报文的一方会发送一个ACK（Acknowledgment）报文作为确认。这个ACK报文并不表示自己也要关闭连接，只是表示收到了对方的FIN报文。
等待关闭：接收到ACK报文的一方会进入等待状态，等待一段时间以确保双方都收到了关闭连接的请求。在这个等待时间内，双方仍然可以发送数据。
发送FIN报文：等待时间结束后，接收到ACK报文的一方会发送一个FIN报文，表示自己也同意关闭连接。
接收ACK报文：接收到FIN报文的一方收到对方的FIN报文后，会发送一个ACK报文作为确认。这个ACK报文表示双方都同意关闭连接。
连接关闭：双方都收到了对方的FIN报文和ACK报文后，TCP连接就正式关闭了。在关闭连接后，双方就不能再发送数据，但连接的资源会被释放。