前言

本文详细描述了从输入URL到页面渲染的整个过程，包括网络请求的各个阶段、HTTP协议的发展、TCP与UDP的区别，以及浏览器渲染的基本原理。希望这篇文章能帮助读者更好地应对面试和理解Web开发的底层机制。

1. DNS解析：域名解析得到IP地址

DNS（域名系统）解析是将人类可读的域名（如 www.baidu.com ）转换为机器可读的IP地址（如119.75.217.109）的过程。

1. 本地域名服务器查找缓存： 当用户在浏览器中输入一个域名并回车时，浏览器首先会检查自身的缓存中是否有该域名的解析记录，如果没有找到就会向本地域名服务器发送给查询请求。本地域名服务器首先会检查自己的缓存中是否有该域名的解析记录。如果有，则直接返回IP地址给浏览器，解析过程结束。

2. 到根域名服务器查找缓存： 如果本地域名服务器的缓存中没有找到对应的解析记录，它会向根域名服务器发起查询，注意本地域名服务器通常不会直接查询根域名服务器，而是采用递归查询或迭代查询的方式。

• 递归查询：本地域名服务器会代替客户端向根域名服务器及后续各级域名服务器发起查询，直到找到解析结果并返回给客户端。
• 迭代查询：本地域名服务器会返回给客户端下一级域名服务器的地址，客户端再向该地址发起查询，如此反复，直到找到解析结果。

3. 到.com顶级域名服务器查找缓存： .com顶级域名服务器会检查自己的缓存中是否有该域名的解析记录。如果有，则返回给本地域名服务器（或返回给客户端，这取决于是递归还是迭代的查询方式）。如果没有，.com顶级域名服务器会告知下一级域名服务器的地址，即目标域名服务器的地址。

4. 到目标域名服务器查找缓存： 目标域名服务器负责维护这个域名的所有解析记录，它会检查自己的数据库，找到对应的IP地址并返回给查询对象。

5. 本地缓存该IP地址，减少下次DNS解析时间： 注意：DNS缓存的时间长度（TTL）是由目标域名服务器在解析记录中设置的，TTL值决定了缓存记录在被视为过时之前可以保存多久。

2. TCP建立连接

浏览器得到域名的IP地址后，会向该IP地址的443端口（HTTPS默认端口，如果是HTTP则是80端口）发起TCP连接请求。

TCP是一个简单的数据传输协议，它拥有复杂的头部结构和状态机来确保数据的可靠传输。TCP头部中包含了多个标志位，用于控制TCP的连接、数据传输和断开等过程。

• TCP 头部的重要标志位包括：
  • URG=1：紧急数据
  • ACK=1：有效字段
  • SYN=1 & ACK=0：请求报文 (客户端发送给服务器的连接请求报文)
  • SYN=1 & ACK=1：应答报文 (服务器发送给客户端的应答报文，用于确认连接请求并准备建立连接)

TCP三次握手

TCP的连接建立过程是一个三次握手的过程，具体步骤如下：

1. 客户端向服务端发送建立连接的请求，客户端进入 SYN-SENT 状态

2. 服务端向客户端发送同意应答，服务端进入 SYN-RECEIVED 状态

3. 客户端向服务端发送确认接收到了服务端的同意应答，客户端和服务端进入 ESTABLISHED 状态

TCP为什么一定要是三次握手而不是两次？

面试之中我们经常会被问到这个问题。TCP之所以采用三次握手来建立连接，而不是两次，主要是为了确保连接的可靠性和防止已失效的连接请求报文段突然又传送到了服务端，从而浪费服务端的资源。

具体来说，如果只有两次握手，客户端向服务端发送一个连接请求报文A，但是由于网络问题导致请求超时或丢失，TCP的超时重传机制会再次发送一个新的建立连接请求B，当B被应答后数据通讯也完成后释放连接，双方进入close状态。一旦此时A请求又由于网络延迟等原因再次出现，那么服务端会认为又有客户端又要跟它连接，从而应答并进入SYN-RECEIVED状态，等待数据传输，造成服务端资源浪费。

3. HTTP数据传输 （HTTP协议 -- 超文本传输协议）

TCP连接建立后，浏览器向服务器发送HTTP请求，请求中包含要访问的资源的URL、请求方法（如GET、POST）、请求头（如Cookie、User-Agent）等信息。服务器收到请求后，根据请求的内容生成HTTP响应，并将响应数据发送给浏览器。

但是在面试中面试官可能会问你是否了解HTTP协议的演变历史，这就需要你了解以下知识了：

HTTP / 0.9

HTTP/0.9是最初版本的HTTP协议，其设计相对简单：

1. 基于TCP协议建立连接
2. 客户端发送 请求行 GET / index.html
3. 服务端接收到请求，读取html文件，以ASCII字符流返回给客户端

0.9版本的特点：

• 0.9 只有请求行，没有请求头和请求体
• 服务器也没有响应头，只有返回体
• 都是用 ASCII字符流传输的

HTTP / 1.0

为了支持更多类型文件的传输（如js, css, 图片, 音频, 视频等），HTTP/1.0进行了显著的改进：

1. 引入请求头和响应头：

   • 请求头：

     • accept：指定客户端能够接收的内容类型，如 text/html
     • accept-encoding：指定客户端支持的压缩方式，如 gzip, deflate, br
     • accept-Charset：指定客户端支持的字符集，如 utf-8
     • accept-language：指定客户端希望的语言，如 zh-CN, zh

   • 响应头：

     • content-encoding：指定内容的压缩方式，如 br
     • content-type：指定返回的文件类型及其字符集，如 text/html; charset=utf-8

2. 引入状态码：

   • 2xx：请求已成功被服务器接收
   • 3xx：请求的资源已被移动，客户端应进一步处理以获取资源
   • 4xx：客户端的请求有错误
   • 5xx：服务器在处理请求时遇到了错误

3. 引入 http Cache 缓存机制：

   • 提高网络资源的利用率和减少不必要的网络传输

HTTP / 1.1

HTTP/1.1进一步优化了协议的性能和灵活性。

1. 持久连接：

   • 1.0时代，http是短连接，随着浏览器的普及，单个页面中的各种文件图片资源越来越多，这样每次请求一个资源都要建立连接，传输数据，断开连接，增加了很多无谓的开销。

   • 1.1增加了持久连接的方法，即建立一个TCP连接可以传输多个http请求。

   • 请求头可以增加以下字段控制连接：

     • Connection: close 关闭持久连接
     • Connection: keep-alive 保持持久连接

2. 队头阻塞：

   • 尽管持久连接提高了效率，但仍然存在队头阻塞问题：一次连接可以发多个请求，但是请求之间必须等待前一个请求响应结束才可以发第二个。

3. 提供虚拟机支持：

   • 通过Host头字段，允许在同一IP地址上托管多个域名。

4. Chunk transfer 分片机制：

   • 服务端将数据分割成若干个任意大小的数据块，每个数据块上标记了数据块的大小，最后使用一个长度为0的空数据块作为传输完成的标志。

5. Cookie 机制：

   • 用于在客户端和服务器之间传输密钥或状态信息。

HTTP / 2.0

HTTP/2.0针对HTTP/1.1在带宽利用率方面的不足进行了重大改进。

1. 1.1 对带宽的利用率低下原因：

   • TCP的慢启动：TCP协议采用了一个由慢到快的传输加速度
   • 同时开启多个TCP连接，这些连接之间会相互竞争带宽，影响关键资源的下载速度
   • HTTP队头阻塞问题限制了请求的并行处理

2. 多路复用：

   • 不允许同时建立多个TCP连接，一个域名只能建立一个TCP连接
   • 采用二进制分帧层，将所有的请求处理为一帧一帧的请求，每一帧请求都带上独特的ID编号，服务端根据ID区分拼接完整的请求体，并以同样的方式返回响应

HTTPS

HTTPS是HTTP的安全版本，通过TLS协议进行加密，加密方式分为 对称加密 和 非对称加密：

• 对称加密：双方使用相同的密钥加密和解密数据
• 非对称加密：公钥加密，私钥解密（先走非对称加密让双方都有一个公共的密钥，再使用对称加密）

HTTP / 3.0

HTTP/3.0旨在解决HTTP/2.0基于TCP协议存在的问题。HTTP/3.0是基于QUIC协议（TCP + UDP），实现了类似于TCP的多路复用数据流、传输可靠性等功能。

• TCP协议的问题：

  • TCP队头阻塞问题：一次连接可以发多个请求，但是请求之间必须等待前一个请求响应结束才可以发第二个
  • 慢启动特性导致传输延迟
  • TCP在传输过程中，一旦发生单个数据包丢失，其它后续的数据包会暂停发送，等重新将丢失的数据包整理好后，再次启动传输
  • TCP僵化问题限制了协议的灵活性和性能

• QUIC协议 = TCP + UDP：

  • TCP的可靠性 + UDP的速度优势
  • TSL加密保障数据传输的安全
  • 多路复用允许在同一连接上并行传输多个数据流
  • 快速握手降低了连接建立的延迟

TCP 和 UDP 的区别

• TCP

  • 面向有连接：先建立连接，再发送数据
  • 可靠性：有流量拥塞控制
  • 有序性：有序接收

• UDP

  • 面向无连接：直接发送数据
  • 不可靠：无流量拥塞控制，丢包不管
  • 高效性：对于实时性要求很高的场景，比如直播、视频通话等

4. 浏览器渲染页面

浏览器收到响应数据后，开始解析和处理这些数据：

1. 解析HTML文件：浏览器使用HTML解析器将HTML文档解析成DOM（文档对象模型）树。

2. 解析CSS文件：浏览器解析CSS文件，构建CSSOM（CSS对象模型）树。

3. 构建渲染树：将DOM树和CSSOM树结合，构建render渲染树，渲染树包含了页面上所有可见内容的布局信息。

4. 计算布局（回流 / 重排）：根据渲染树计算每个节点的几何信息，如位置、大小等。

5. GPU绘制（重绘）：使用浏览器的UI接口将页面内容绘制到屏幕上。

5. TCP四次挥手断开连接

当数据传输完成后，浏览器和服务器之间通过TCP四次挥手断开连接：

1. 客户端向服务端发送释放连接的请求
2. 服务端接收到释放连接的请求，进入CLOSE_WAIT状态，向客户端发送同意断开的应答
3. 服务端向客户端发送还未发送完的数据，服务端进入LAST_ACK状态
4. 客户端接收到同意的应答后，向服务端发送确认接收应答，双方都进入CLOSED状态

结语

希望本文能够帮助你了解从输入url到页面渲染的过程，感谢观看！｀･ω･´)ゞ敬礼っ