从 URL 到页面渲染

ℹ️ 本文发布于 2021年8月18日请注意文中内容的时效性。

从用户输入 URL 到浏览器将页面呈献给用户，这中间具体经过了

DNS 解析
与服务器建立链接
请求 HTML 文件
解析 HTML 文件
渲染 HTML 文件

DNS 解析

DNS 是如何解析的？

按照域名关系，逐级向域名服务器发送请求解析

IP 地址是不需要经过 DNS 寻址的

建立链接

请求文件

浏览器使用 HTTP 协议与服务器通信，在 HTTP 协议之下， HTTP1.1 与 HTTP2 使用的都是 TCP 协议，与服务器建立链接。

TCP 协议的链接建立需要经过三次握手、四次挥手。三次握手是要确保链接被正确建立的。

缓存问题

强缓存协商缓存

在 HTTP 初始版本，浏览器每发送一个请求都需要经过 TCP 三次握手、四次挥手的过程。当时浏览器能访问的网页和内容都有限，但随着 WEB 的发展，WEB 网页的内容越来越丰富，此时频繁的握手和挥手就成了浏览网页的性能瓶颈之一。

C           S
|→ SYN      |
|  SYN/ACK ←|
|→ ACk      |

→ HTTP REQUEST
  HTTP RESPONSE ←

|      FIN ←|
|→ ACK      |
|→ FIN      |
|      ACK ←|

随着 1999 年标准化的 HTTP/1.1，使得 HTTP 具有了 Keep Alive 的能力，Keep Alive 的意思是持久化 TCP 链接，在持久化 TCP 链接之后使得，HTTP 可以复用 TCP 链接，从而达到 streaming 的效果。

C           S
|→ SYN      |
|  SYN/ACK ←|
|→ ACk      |

→ 1️⃣HTTP REQUEST
  HTTP RESPONSE ←

→ 2️⃣ HTTP REQUEST
  HTTP RESPONSE ←

→ 3️⃣ HTTP REQUEST
  HTTP RESPONSE ←

|      FIN ←|
|→ ACK      |
|→ FIN      |
|      ACK ←|

如上 diagram 所示，

❓ 队头阻塞问题, 当

解析 HTML 文件

element =》 DOM CSS rules =》 CSSOM

DOM + CSSOM = Parse Tree

Layout。 Compotions 渲染

从用户输入 URL 到页面渲染

浏览器发起对 URL 的 HTTP 请求，

从 URL 到 页面渲染