从输入 URL 到页面渲染:浏览器做了什么?

在我们每天开发网页时,是否想过:用户在浏览器输入一个网址,按下回车后,到页面最终展现,这中间到底发生了什么?

本文将系统梳理这个过程,从网络协议到浏览器渲染机制,一次讲清。


🧭 1. 用户输入 URL

当用户在地址栏输入 https://example.com/index.html

  • 浏览器自动补全协议(如省略 https://

  • 判断输入的是 URL 还是搜索词(如 github

  • 查询历史记录与书签提供建议


🌍 2. 解析 URL

浏览器将 URL 拆解为结构:

部分 示例
协议 https
主机名 example.com
路径 /index.html
查询参数 ?q=123
片段(锚点) #section1

🧠 3. DNS 查询

为了连接服务器,浏览器需要知道 example.com 对应的 IP 地址。

查找顺序:

  1. 浏览器 DNS 缓存

  2. 系统 DNS 缓存

  3. hosts 文件

  4. 本地路由器 DNS 缓存

  5. 网络运营商 DNS / 公共 DNS(如 8.8.8.8)

可使用 <link rel="dns-prefetch"> 提前解析 DNS。


🔒 4. 建立连接(TCP + TLS)

TCP 三次握手:

客户端与服务器建立连接:

  1. 客户端:SYN

  2. 服务端:SYN-ACK

  3. 客户端:ACK

HTTPS 额外执行:

  • TLS 握手:协商加密算法、交换证书、建立加密通道

📡 5. 发送 HTTP 请求

浏览器构建并发送 HTTP 请求:

http 复制代码
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome/120 ...
Accept: text/html

可能包含 Cookie、Referer、Authorization 等头部。


🏭 6. 服务器响应

服务器处理请求,返回 HTML 或数据:

http 复制代码
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1536

<html>...</html>

也可能返回:

  • 301/302 重定向

  • 304 缓存命中

  • 401/403/404/500 错误状态


📥 7. 浏览器接收响应并处理重定向

  • 如是重定向(3xx),浏览器自动重新发起请求

  • HTML 内容则立即进入解析流程(Streaming Parser,边下载边解析)


🧱 8. 构建页面渲染树(渲染关键路径)

📌 浏览器的 Critical Rendering Path(关键渲染路径):

1. HTML → DOM 树

  • 解析 HTML,构建 DOM(文档对象模型)

2. CSS → CSSOM 树

  • 加载与解析 CSS,构建 CSSOM(样式结构)

3. DOM + CSSOM → Render Tree

  • 生成只包含可见元素的渲染树

4. Layout(回流)

  • 计算每个节点的位置与大小

5. Paint(重绘)

  • 将像素绘制到图层中

6. Compositing(合成)

  • 合成多个图层,送入 GPU 渲染帧缓冲区

🖼️ 9. 加载子资源

页面中 <script><img><link> 等标签引发:

  • 并发加载资源

  • JS 可设置 deferasync 避免阻塞渲染

  • 图片可懒加载(loading="lazy"


✅ 10. 页面完成渲染

浏览器触发两个重要事件:

事件 含义
DOMContentLoaded DOM 树构建完成,不等待图片
window.onload 所有资源(图片/iframe)加载完成

🧠 整体流程总结

text 复制代码
用户输入 URL
 ↓
URL 解析
 ↓
DNS 查询
 ↓
建立 TCP/TLS 连接
 ↓
发送 HTTP 请求
 ↓
服务器处理并响应
 ↓
浏览器接收 HTML
 ↓
HTML → DOM,CSS → CSSOM
 ↓
Render Tree → Layout → Paint
 ↓
加载其他资源
 ↓
页面可交互 ✅

🔧 开发者关注点(性能优化)

阶段 优化建议
DNS 查询 使用 CDN + DNS 预解析
请求阶段 Gzip 压缩、缓存控制
渲染阶段 控制 DOM 复杂度、懒加载图像
JavaScript 分包、Tree Shaking、合理使用 defer/async
图片资源 WebP/AVIF 格式、Lazyload、占位图优化

📎 补充阅读


✅ 总结一句话

"浏览器从输入网址到页面渲染,跨越了网络、协议、解析、布局与绘制,作为前端开发者,理解这一过程,是性能优化与工程质量的基石。"


如果你觉得这篇笔记有用,欢迎点赞收藏,后续我会写一篇**"浏览器渲染性能瓶颈分析与优化技巧"**,欢迎关注!

相关推荐
lichenyang453几秒前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友5 分钟前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir6 分钟前
vue3.2 前端动态分页算法
前端·算法
烛阴39 分钟前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子43 分钟前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
追逐时光者1 小时前
面试第一步,先准备一份简洁、优雅的简历模板!
后端·面试
DoraBigHead1 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI2 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge