从一个 url 输出到最终页面呈现网络过程

本文链接：https://blog.youkuaiyun.com/lucky541788/article/details/98521144

本文深入解析网页从DNS解析到最终渲染的全过程，包括DNS查找顺序、TCP三次握手、HTTP请求与响应、DOM与CSSOM树构建、渲染树生成及布局渲染，直至TCP断开连接。

DNS 解析：域名地址解析为 IP 地址

// 查找顺序
浏览器 DNS 缓存
系统 DNS 缓存
路由器 DNS 缓存
运营商 DNS 缓存
递归搜索：（例如：blog.baidu.com，依次在 .com > .baidu > blog 域名下查找 DNS 缓存）
否则，找不到网页报错 404

TCP 链接：TCP 三次握手

// 第一次，浏览器发起，告知服务器，我要发送请求了
SYN
// 第二次，服务器发起，告诉浏览器，我准备接收了
SYN / ACK
// 第三次，浏览器发起，告诉服务器，马上发送了
ACK

发送请求：请求报文（HTTP 通信内容）
接受响应：响应报文
渲染页面

// 遇见 HTML 标记，浏览器调用 HTML 解析器解析成 Token 并构建 dom 树
// 遇见 style/link 标记，浏览器调用 css 解析器，处理 css 标记并构建 cssom 树
// 遇见 script 标记，浏览器调用 js 解析器，处理 script 代码（添加事件、修改 dom/cssom 树）
// 将 dom 和 cssom 树合并成一个渲染树
// 根据渲染树计算布局，计算各个节点几何信息（布局）
// 将各个节点颜色绘制到屏幕（渲染）

断开连接：TCP 四次挥手

// 第一次，浏览器发起，告知服务器，我请求发送结束了（请求报文），你准备关闭吧
FIN
// 第二次，服务器发起，告知浏览器，我请求接收完了（请求报文），我准备关闭了，你也准备吧
ACK
// 第三次，服务器发起，告知浏览器，我响应发送结束了（响应报文），你准备关闭吧
FIN
// 第四次，浏览器发起，告知服务器，我响应接收完了（响应报文），咱俩关闭吧
ACK