[每周一更]-(第107期)：经典面试题-从输入URL到页面加载发生了什么

一般前后端都可以考察问题，让参与者了解网页的内部交互，更多是细节的解释。

从输入URL到页面加载完成，涉及多个步骤和底层机制。这些步骤可以分为以下几个主要阶段：DNS解析、TCP连接、SSL握手、HTTP请求和响应、页面渲染。以下是详细的过程：

过程概述

1、浏览器查找域名对应的IP地址

2、浏览器根据IP地址与服务器建立socket连接

3、浏览器与服务器通信：浏览器请求，服务器处理请求和响应

4、浏览器与服务器断开连接

5、浏览器获得域名对应的IP地址之后，就会向服务器发起TCP请求，请求建立TCP连接，就是"三次握手"。

6、TCP/IP连接建立起来之后，浏览器就可以向服务器发起HTTP请求了，使用了比如说，HTTP的GET方式。

7、服务端接收到这个请求之后，根据参数，将经过处理的数据返回给客户端。

8、浏览器拿到了服务端返回的HTML页面代码，在解析和渲染这个页面的时候，里面的JS、CSS、图片等静态资源，也是一个个HTTP请求，都需要经过上面的主要七个步骤。

9、浏览器根据拿到的资源对页面进行渲染，最终把一个完整的页面呈现给用户。

简化版：

一个完整的HTTP请求过程：

• 浏览器请求URL
• 域名解析（此处涉及DNS的寻址过程）
• 发起TCP的3次握手
• 建立TCP连接后发起http请求
• 服务器响应http请求，浏览器得到html代码
• 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等，此处可能涉及HTTP缓存）
• 浏览器对页面进行渲染呈现给用户（此处涉及浏览器的渲染原理）

详细版：

1. 用户输入URL

用户在浏览器地址栏中输入一个URL并按下回车键。

2. 浏览器解析URL

浏览器解析输入的URL，提取出协议（如http或https）、域名（如www.example.com）、端口号（如果有指定，默认http为80，https为443）和路径（如/index.html）。

3. DNS解析

1、搜索自身的DNS缓存

2、搜索操作系统自身的DNS缓冲

3、读取本地的HOST文件

4、浏览器发起一个DNS的系统调用

浏览器需要将域名转换为IP地址，通过DNS解析过程：

1. 检查缓存：
   • 浏览器缓存：浏览器首先检查其DNS缓存。
   • 操作系统缓存：如果浏览器缓存没有命中，会查询操作系统的DNS缓存。
   • 主机文件：操作系统检查主机文件（如/etc/hosts）是否有对应的记录。
2. 查询递归DNS服务器：如果本地缓存没有结果，操作系统向配置的递归DNS服务器发起查询。
3. 递归查询：
   • 根DNS服务器：递归DNS服务器查询根DNS服务器，获取顶级域（如.com）的DNS服务器地址。
   • 顶级域DNS服务器：递归DNS服务器查询顶级域DNS服务器，获取权威DNS服务器地址。
   • 权威DNS服务器：递归DNS服务器查询权威DNS服务器，获取域名的最终IP地址。
4. 返回结果：递归DNS服务器将IP地址返回给操作系统，操作系统再返回给浏览器。

输入网址，进行DNS域名解析

DNS 解析首先会从你的浏览器的缓存中去寻找是否有这个网址对应的 IP 地址，如果没有就向OS系统的 DNS 缓存中寻找，如果没有就是路由器的 DNS 缓存， 如果没有就是 ISP 的DNS 缓存中寻找。

所以，缓存的寻找过程就是： 浏览器缓存→系统缓存→路由器缓存→ISP DNS缓存→从根域名服务器递归搜索

• 浏览器缓存 – 浏览器会缓存DNS记录一段时间。 有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
• 系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。
• 路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
• ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
• 递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

4. TCP连接

浏览器使用获取的IP地址与目标服务器建立TCP连接：

1. 三次握手：
   • SYN：浏览器向服务器发送一个SYN包，请求建立连接。
   • SYN-ACK：服务器响应一个SYN-ACK包，确认收到请求并同意建立连接。
   • ACK：浏览器发送一个ACK包，确认连接建立。

5. SSL/TLS握手（如果使用HTTPS）

如果URL使用的是HTTPS，浏览器与服务器进行SSL/TLS握手，建立加密连接：

1. 客户端问候（Client Hello）：浏览器发送支持的SSL/TLS版本、加密套件、随机数等信息。
2. 服务器问候（Server Hello）：服务器选择SSL/TLS版本、加密套件，并发送服务器证书和随机数。
3. 证书验证：浏览器验证服务器证书的有效性和真实性。
4. 密钥交换：浏览器生成会话密钥，并使用服务器公钥加密后发送给服务器。
5. 握手完成：服务器使用私钥解密会话密钥，双方使用会话密钥加密后续通信。

6. HTTP请求和响应

1. 发送HTTP请求：浏览器向服务器发送HTTP请求，包括请求方法（如GET、POST）、请求头、URL路径等。
2. 服务器处理请求：服务器接收请求，处理后生成响应数据。
3. 发送HTTP响应：服务器返回HTTP响应，包括状态码（如200、404）、响应头和响应体（HTML、CSS、JavaScript、图片等）。

7. 浏览器渲染页面

1. 解析HTML：浏览器解析HTML文档，构建DOM树。
2. 解析CSS：浏览器解析CSS文件和样式，构建CSSOM树。
3. 解析JavaScript：浏览器解析和执行JavaScript代码，可能会修改DOM和CSSOM树。
4. 构建渲染树：浏览器将DOM和CSSOM树合并，生成渲染树。
5. 布局：计算每个节点的布局信息（位置和大小）。
6. 绘制：将各节点绘制到屏幕上，形成最终的页面。

8. 处理后续请求

浏览器继续处理页面中的其他资源请求（如图片、视频、字体等），重复上述HTTP请求和响应过程，直到所有资源加载完成。

HTTPS和HTTP的区别主要如下：

1. https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3. http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4. http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。