知识总结：从输入URL到页面加载发生了什么（前端经典面试题）

小草莓蹦蹦跳

已于 2023-11-29 00:13:58 修改

阅读量685

点赞数

分类专栏：每日专栏 JavaScript HTTP 文章标签：前端 javascript

于 2020-06-18 14:18:18 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/106833905

版权

每日专栏同时被 3 个专栏收录

226 篇文章 4 订阅

订阅专栏

JavaScript

150 篇文章 2 订阅

订阅专栏

HTTP

12 篇文章 0 订阅

订阅专栏

由图可知，从资源加载时序的角度分析，浏览器发起请求到页面渲染完成会经历以下几个阶段：

预处理-Resource Scheduling => DNS解析-Stalled/DNS Lookup =>

建立连接-Inital connection/SSL => 发起HTTP请求-Request sent =>

等待响应-Waiting:TTFB => 接收数据-Content Download =>

浏览器解析渲染页面

完整的URL解析过程大致总结为以下7个步骤：

① URL解析

当用户在浏览器地址栏输入内容时，浏览器会判断是URL还是搜索关键字。如果是解析为URL则开始寻找URL对应的IP地址，和是否有可用的缓存。否则按照搜索关键字处理交给默认搜索引擎搜索。

（1）解析URL：首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。

（2）缓存判断：浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。

② DNS（域名系统）解析

DNS服务器会根据用户提供的域名查找对应的IP地址。DNS解析 的过程就是寻找哪台机器上有你需要资源的过程（网址转换为IP地址）。（优化：DNS缓存（将资源放在服务器端）、DNS负载均衡）分析出服务器地址和资源位置

（3）DNS解析：下一步首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则使用，如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存，如果没有就会先向根域名服务器发起请求，获得负责的顶级域名服务器的地址后，再向顶级域名服务器请求，然后获得负责的权威域名服务器的地址后，再向权威域名服务器发起请求，最终获得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给请求的用户。用户向本地 DNS 服务器发起请求属于递归请求，本地 DNS 服务器向各级域名服务器发起请求属于迭代请求。

③ 建立TCP连接（三次握手）

浏览器向服务器发起TCP连接，与服务器建立TCP三次握手。

客户端发送SYN数据包来表示请求连接，服务器响应SYN和ACK的数据包来表示同意建立连接，客户端再发送ACK数据包来表示成功连接。

④ 客户端发送HTTP请求

浏览器将HTTP请求数据发给服务器。发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)

请求行（请求方法+请求地址+HTTP协议版本） + 请求头部（浏览器的信息，键值对组成） + 空行（表示没有请求头部了） + 请求数据