浏览器从输入网址到页面展示的过程

Posted 2023-05-05

参考技术A

完整高频题库仓库地址： https://github.com/hzfe/awesome-interview

完整高频题库阅读地址： https://febook.hzfe.org/

URL DNS TCP 渲染

浏览器从输入网址到渲染页面主要分为以下几个过程

URL（统一资源定位符，Uniform Resource Locator）用于定位互联网上资源，俗称网址。

我们在地址栏输入 HZFE 官方网址 hzfe.org 后敲下回车，浏览器会对输入的信息进行以下判断：

大部分浏览器会从历史记录、书签等地方开始查找我们输入的网址，并给出智能提示。

因为浏览器不能直接通过域名找到对应的服务器 IP 地址，所以需要进行 DNS 解析，查找到对应的 IP 地址进行访问。

DNS 解析流程如下：

查询通常遵循以上流程，从请求主机到本地 DNS 服务器的查询是递归查询，DNS 服务器获取到所需映射的查询过程是迭代查询。

当浏览器获取到服务器的 IP 地址后，浏览器会用一个随机的端口（1024 < 端口 < 65535）向服务器 80 端口发起 TCP 连接请求（注：HTTP 默认约定 80 端口，HTTPS 为 443 端口）。这个连接请求到达服务端后，通过 TCP 三次握手，建立 TCP 的连接。

建立连接后就可以通过 HTTP 进行数据传输。如果使用 HTTPS，会在 TCP 与 HTTP 之间多添加一层协议做加密及认证的服务。HTTPS 使用 SSL（Secure Socket Layer） 和 TLS（Transport Layer Security） 协议，保障了信息的安全。

当浏览器到 web 服务器的连接建立后，浏览器会发送一个初始的 HTTP GET 请求，请求目标通常是一个 html 文件。服务器收到请求后，将发回一个 HTTP 响应报文，内容包括相关响应头和 HTML 正文。

状态码是由 3 位数组成，第一个数字定义了响应的类别，且有五类可能取值

响应报文由四部分组成（响应行 + 响应头 + 空行 + 响应体）

不同的浏览器引擎渲染过程都不太一样，这里以 Chrome 浏览器渲染方式为例。

现在的页面为了优化请求的耗时，默认都会开启持久连接（keep-alive），那么一个 TCP 连接确切关闭的时机，是这个 tab 标签页关闭的时候。这个关闭的过程就是 四次挥手 。关闭是一个全双工的过程，发包的顺序是不一定的。一般来说是客户端主动发起的关闭，过程如下图所示：

从输入URL到页面展示的详细过程

其实从输入URL到页面展示在我们眼前所经历的过程其实还是非常复杂的，牵扯到的知识点也是非常的庞杂。其中很多知识都会有专门的学科去研究，所以这里只是简单地概括一下大致流程：

 

• 1、输入网址
• 2、DNS解析
• 3、建立tcp连接
• 4、客户端发送HTPP请求
• 5、服务器处理请求　
• 6、服务器响应请求
• 7、浏览器展示HTML
• 8、浏览器发送请求获取其他在HTML中的资源。