输入URL至页面展示，到底咋回事儿？

嘿，各位老铁们，咱今天聊点有意思的。你们有没有想过当你输入一个网址，然后网页嗖的一下就出来了到底发生了啥？别以为这是魔法，其实背后可是个复杂的流程。说实话，我当年Zuo题的时候也懵啊！

害得我每次面试dou手心冒汗。不过现在咱来好好捋一捋，保证让你听明白！

得知道 URL 是啥。URL 就像地址签一样，告诉浏览器该去哪里找东西。它一般是这样写的：scheme://host.domain:port/path/filename?query#fragment。比如 https://www.example.com/index.html#section1。简单说说各个部分：

scheme 比如 http 或者 https。

host 就是网站的名字。

domain 比如 www 或其他子域名。

port 一般是 80 或者 443 ，默认不写也没关系。

/path 网站的目录结构。

filename 例如 HTML 文件名或者图片名等。

query 附加一些参数给服务器处理。

fragment 在页面中跳转到某个位置（例如 #section1) 。

你懂的，就像给快递员打字一样，越详细越好！

咱先说说网络通信阶段吧。这可不是简单的发个邮件那么简单哦！

DNS 解析：查找 IP 地址 浏览器 要找到目标服务器的 IP 地址才Neng连接过去。“那个那个”，DNS 其实就是把域名翻译成 IP 地址的工具箱！Ru果浏览器缓存里没找到，就开始查找了——要么递归查询，要么迭代查询。 害得我以前也搞不清哪个是哪个…

TCP 连接：建立通道 有了 IP 地址后浏览器要建立 TCP 连接才Neng开始传输数据。“TCP”就像一条高速公路，负责可靠地发送数据。“三次握手”就是双方确认Ke以通行前的仪式感满满！ 你知道吗？三次握手是为了防止Yi经失效的连接请求报文段又传送到了服务端造成的错误哦! 哎呦喂~

* TLS 加密：保证安全传输 * Ru果是 HTTPS 网站，还需要 TLS 加密来保护数据安全。这就像给数据盖上密码一样！

接下来到了渲染阶段！ 这可是前端工程师Zui关心的环节啦！

*HTML 解析：构建 DOM 树 * 浏览器拿到 HTML 代码后会把它解析成“DOM” ，DOM 就是一个树形结构，代表整个页面的所有元素和它们之间的关系。“不对不对”，DOM 不是直接显示在屏幕上的哦！它是浏览器用来组织和管理页面的数据模型呢!

CSSOM 构建: CSS 对象模型。它包含了页面上所有样式的规则和信息,用于决定每个元素的样式属性,包括颜色、字体、大小等等。“CSSOM”就像“样式手册”，告诉每个元素应该怎么显示出来。

Render Tree 构建: 将 DOM 和 CSSOM 合并生成 Render Tree 。Render Tree 会剔除不必要的元素,只保留需要显示的节点,减少渲染负担。"Render Tree" 是Zui终用于绘制页面的树形结构,它包含所有可见节点及其样式信息。“渲染树”就好比舞台剧的台布设定一样!

*布局计算：确定位置和大小 * Render Tree 会根据样式计算每个元素的精确位置和大小 。这个过程比较耗费性Neng哦! 想想一下啊,Ru果你的网页元素一直在变动,那 Reflow 就得重新计算所有的位置和大小了! “Reflow” 就相当于调整舞台的位置啦!

*绘制：将元素绘制到屏幕上 * Zui后一步就是把每个元素按照 Render Tree 的指令绘制到屏幕上 。这就像画家在画布上画画一样!

在渲染过程中，“网络进程”和“渲染进程”是两个重要的角色。“网络进程”负责下载资源文件，“渲染进程”负责解析 HTML、应用 CSS、布局页面以及绘制界面。“IPC”就是这两个进程之间的沟通桥梁。”脚本阻塞与优化”。为了避免 JS 代码阻塞 DOM 构建，“defer” 和 “async ” 就派上用场啦!

你有没有想过为什么 TCP 连接要三次握手而不是两次？ “哎呦喂”，是因为为了防止Yi失效的连接请求报文段又传送到了服务端而产生的错误。"四次挥手"呢？ 是用来确保双方dou确认断开连接完毕的信号。"TCP 四次挥手" Ke以理解为客户端主动关闭连接时向服务器发送 FIN 包；服务器收到 FIN 包后回复 ACK 包；客户端收到 ACK 包后 发送 FIN 包；服务器收到 FIN 包后Zui终发送 ACK 包并断开连接。"四次挥手" 的作用在于确保双方dou确认了对方Yi经关闭连接完毕。

怎么样？这次讲解是不是让你茅塞一开？记住啊，从输入 URL 到kan到网页的过程可不是简单的下载文件那么简单哦！ 它背后涉及到的协议、技术dou是相当复杂的呢！希望这些知识Neng帮到你，也祝你在面试中旗开得胜！ “干饭人晚晚”。