企业官网建设流程全解析

• 🏠博客主页：小谢同学的小破站
• ✍️本文由小谢同学的小破站原创，首发于 CSDN 💻
• ☕JavaSE专栏：JavaSE
• 📗JavaEE初阶专栏：JavaEE初阶
• 📘JavaEE进阶专栏：JavaEE进阶
• 🧩数据结构专栏：数据结构
• ⚙️算法专栏：算法
• 📚MySQL初阶专栏：MySQL初阶
• 🔐MySQL进阶专栏：MySQL进阶
• 🌐计算机网络专栏：计算机网络
• 💻C语言专栏：C语言
• 👍欢迎点赞👍 收藏⭐ 留言📝，发现错误欢迎指正！
• ✨脚踏实地，持续深耕，奔赴自己的目标✨
  ----- 📌分割线 📌-------

从输入 URL 到页面展示到底发生了什么?

• 1. 输入 URL 到页面展示的发生过程
  • 1.1 URL 解析与缓存检查
  • 1.2 DNS 域名解析
  • 1.3 建立网络连接
  • 1.4 发送 HTTP 请求报文
  • 1.5 服务器处理请求并返回响应 与 浏览器接收、解码响应
  • 1.6 生成 DOM 树、CSSOM 树、渲染树
  • 1.7 JavaScript 脚本执行
  • 1.8 布局 Layout（回流）与绘制 Paint 与页面完成展示，响应交互事件
• 2. 总结
  
  

前言：
这里是小谢同学的URL学习记录，整理从输入 URL 到页面展示的发生过程。笔记用于自我复盘巩固，有错误欢迎大家指出，专栏还有 Java、网络、C 语言等系列笔记欢迎翻阅.同时也希望这一篇文章能帮助到你~

1. 输入 URL 到页面展示的发生过程

浏览器输入网址回车，短短几百毫秒,不只是我们表面看见的这么简单，背后却穿插着应用层、传输层、网络层、数据链路层，再到浏览器解析渲染一系列的细节。

整体大流程:DNS 解析 → TCP 连接 → HTTPS 握手 → HTTP 请求 → 服务器响应 → TCP 断开连接 → 浏览器解析渲染页面

URL 解析与缓存检查

此时我如果直接输入这段URL会发生什么呢?
在浏览器地址栏输入 URL 并按下回车，浏览器首先对 URL 进行解析，拆分出协议、域名、端口、资源路径等信息。
随后依次检查各级缓存：浏览器缓存、系统缓存、本机 hosts 文件。如果查到未没有过期的有效缓存资源，就直接复用；没有缓存，则进入 DNS 解析流程。

注解:
DNS（Domain Name System）负责将人类可读的域名（如 www.example.com）转换为计算机可识别的IP地址，是互联网访问的第一步。解析过程涉及缓存查询、递归与迭代查询，以及多级DNS服务器协作完成。

DNS 域名解析

计算机网络通信中是依靠IP 地址定位服务器，域名只是为了方便人记忆。DNS 解析就是把域名翻译成一个对应的 IP 地址。

类似于:一个字典,我们把中文输入进去,就会得到对应的英文术语;

浏览器向本地 DNS 服务器发起查询，如果本地没有缓存，则迭代查询根域名服务器、顶级域名服务器、>权威域名服务器，最终拿到目标服务器 IP。大型网站会使用负载均衡，可能返回多个不同 IP。

建立网络连接

拿到目标 IP 与端口后，浏览器和服务器通过TCP 三次握手建立可靠的 TCP 连接。

具体三次握手流程:->TCP三次握手具体流程

如果访问的是 HTTPS 网站，在 TCP 连接建立后，还会进行TLS 握手：校验服务器 CA 证书合法性、协商加密套件、生成会话密钥，后续传输的数据还会被加密。

HTTPS加密流程->HTTPS加密流程

发送 HTTP 请求报文

连接就绪后，浏览器组装 HTTP 请求报文，包含请求行、请求头、请求体，通过TCP 通道发送给服务器。
请求头中会携带缓存验证字段，例如:If-None-Match、If-Modified-Since；如果此时服务器的资源没有改动过，会返回一个304 状态码，此时不用重传完整 HTML，这样做可以有效节省带宽。

服务器处理请求并返回响应 与 浏览器接收、解码响应

服务器（一般是Nginx）接收请求，转发给后端程序。后端执行业务逻辑，读取静态文件或者查询数据库，生成 HTTP 响应报文（状态行、响应头、响应体 HTML），再通过TCP 传回浏览器。
浏览器收到响应，根据响应头信息解压（例如 gzip 压缩），会依靠Content-Type判断资源类型；如果是 HTML 文档，就开始渲染流程。

生成 DOM 树、CSSOM 树、渲染树

1. 解析 HTML 文本，生成DOM 树，描述页面的文档结构；
2. 下载并解析 CSS 样式，生成CSSOM 树，存储页面样式规则；
3. 将 DOM 树和 CSSOM 树合并，过滤掉不可见的元素（display:none），生成渲染树，用来做页面布局。

JavaScript 脚本执行

浏览器在解析 HTML 时，一旦遇到<script>的标签，会暂停 HTML 解析，下载并执行JS 代码。
原因：JS 代码可以修改 DOM 结构、修改 CSS 样式，浏览器必须等 JS 执行完，才能继续解析页面。

• 普通同步脚本：会阻塞 HTML 解析；
• async异步脚本、defer延迟脚本：可以减少对 HTML 解析的阻塞；
  JS 修改 DOM / 样式后，会触发浏览器重新布局与绘制。

布局 Layout（回流）与绘制 Paint 与页面完成展示，响应交互事件

• Layout（回流）：遍历渲染树，计算页面上每个元素的位置、宽高等几何信息；只要元素大小 / 位置变化，就会触发回流，开销较大。
• Paint（绘制）：按照布局结果，填充文字、颜色、图片，把元素绘制到对应的图层上。部分场景会使用 GPU 加速做图层合成。
• DOMContentLoaded：DOM 树构建完成触发，此时页面结构已经就绪，图片可能还在加载；
• load：页面所有资源（图片、样式等）全部加载完成才触发。
  事件触发后页面展示完成，可以接收鼠标点击、滚动等用户交互；用户操作会修改页面，再次触发布局、绘制，更新页面画面。

总结

1. URL 解析：浏览器解析 URL，提取协议、域名、端口、资源路径。
2. DNS 域名解析：先查浏览器 DNS 缓存、操作系统 DNS 缓存、hosts 文件；都没找到，就递归 / 迭代 DNS 查询，把域名翻译成服务器 IP 地址。
3. 建立 TCP 连接：拿到 IP 和端口，通过三次握手建立 TCP 连接。
   • 如果是 HTTPS，TCP 连接建立完成后，进行 TLS 握手：校验 CA 证书合法性、协商加密套件，后续通信全部加密。
4. 发送 HTTP 请求：浏览器构造 HTTP 请求报文，通过 TCP 通道发给服务器。请求头会带上协商缓存相关字段。
5. 服务器处理与响应：服务器接收请求，后端业务处理，返回 HTTP 响应。
   • 如果资源没修改，返回304 响应码，浏览器直接使用本地缓存；如果更新了就会返回 200，并带上最新 HTML 资源。
6. TCP 断开：数据传输完毕，四次挥手断开 TCP 连接。
7. 浏览器解析渲染页面
   1. 解析 HTML 生成 DOM 树；解析 CSS 生成 CSSOM 树。遇到普通 script 标签，会阻塞 DOM 解析，优先执行 JS。
   2. DOM+CSSOM 合并生成渲染树。
   3. Layout（回流 / 重排）：会计算元素位置大小。
   4. Paint（绘制）：把像素画到屏幕上，页面展示出来。
8. 最后监听页面交互事件(等待用户操作)。