浏览器输入URL回车

一,URL解析

浏览器会对输入的 URL(统一资源定位符) 进行拆解,搞清楚 “目标是谁、要获取什么资源

https://www.baidu.com/s?wd=CDN 拆解后:

协议(Scheme):https(加密通信协议,比 HTTP 更安全);

  • 协议(Scheme):https(加密通信协议,比 HTTP 更安全);
  • 域名(Domain):www.baidu.com(要访问的服务器 “名字”,相当于 “门牌号”);
  • 路径(Path):/s(服务器上的具体 “文件夹”,对应百度搜索功能);
  • 参数(Query):wd=CDN(要传递给服务器的 “指令”,即 “搜索关键词是 CDN”)。

浏览器解析完后将会使用HTTPS协议,默认端口号为443,同时会将域名和需要请求的资源分开,从而了解需要请求的是哪个服务器,请求的是服务器上什么资源。

二,DNS域名解析

知道域名后,浏览器通过解析域名获取目标服务器的IP地址,由域名转换得到 IP 地址就是 DNS 协议做的事情。

1,缓存查询
  1. 浏览器缓存查询:先查浏览器本地缓存(比如之前访问过百度,浏览器已保存 www.baidu.com 对应的 IP),有则直接用,无则进入下一步;

  2. 操作系统缓存查询:查电脑 / 手机系统的 DNS 缓存(如 Windows 的 hosts 文件、手机系统缓存),有则用,无则进入下一步;

  3. 本地 DNS 服务器查询:向你网络运营商(如电信、联通)分配的 “本地 DNS 服务器” 发起查询(这是最常用的一步),运营商服务器通常已缓存主流域名的 IP,有则返回,无则进入最后一步;

2,直接查询

根域名服务器 → 顶级域名服务器 → 权威域名服务器查询:

先查 “根域名服务器”(全球共 13 组,负责指引方向),根服务器会告诉本地 DNS:“com 后缀的域名归顶级域名服务器管”;

本地 DNS 再查 “.com 顶级域名服务器”,顶级服务器会告诉它:“baidu.com 的域名归百度自己的权威域名服务器管”;

最后查 “百度权威域名服务器”,它会返回 www.baidu.com 对应的 真实 IP 地址(如 180.101.49.11)。

3,cdn的dns查询
1,什么是·cdn

CDN 即内容分发网络(Content Delivery Network),是一种分布式的服务器网络,旨在通过将内容缓存到多个地理位置的服务器上,加速内容的分发和传递。(最优路径

CDN 的 DNS(通常是 CDN 厂商提供的 “权威 DNS”,如阿里云 CDN 的 DNS、Cloudflare 的 DNS)会结合用户场景、节点状态动态选择 IP,核心逻辑包括:

  • 基于用户地理位置:通过用户的本地 DNS IP(或 HTTP 请求中的地理位置信息)判断用户所在区域,返回该区域的 CDN 边缘节点 IP(比如上海用户返回上海的 CDN 节点,广州用户返回广州的 CDN 节点);

  • 基于网络运营商:区分用户是电信、联通、移动还是广电网络,返回对应运营商的 CDN 节点 IP(避免跨运营商访问的网络延迟,比如电信用户不返回联通节点);

  • 基于节点负载 / 健康度:实时检测 CDN 节点的带宽占用、服务器负载、故障状态,若某个节点负载过高或故障,自动跳过该节点,返回其他健康节点的 IP;

  • 基于访问策略:支持按业务需求定制解析(比如给 VIP 用户分配带宽更充足的节点,给测试用户分配特定测试节点)。

三,建立TCP链接

拿到目标 IP(服务器 IP 或 CDN 节点 IP)后,浏览器会通过 TCP 协议 与目标服务器建立 “可靠的双向通信通道”,这个过程就是经典的 TCP 三次握手(确保双方都能正常收发数据):

1,第一次握手(客户端发请求):

浏览器(客户端)向服务器发送一个 “SYN” 数据包,意思是 “我想和你建立连接,你准备好了吗?”;

2,第二次握手(服务器回响应):

服务器收到 SYN 后,回复 “SYN+ACK” 数据包,意思是 “我准备好了,你也准备好吧?”;

3,第三次握手(客户端确认):

浏览器收到 SYN+ACK 后,再发一个 “ACK” 数据包,意思是 “我也准备好了,连接可以建立了!”。

三次握手完成后,客户端和服务器之间的 “双向通道” 正式打通,接下来可以传输数据了。

四,TLS四次握手

1,什么是·TLS

TLS(Transport Layer Security,传输层安全协议)是一种用于在网络通信中保障数据隐私、完整性和身份真实性的加密协议,主要作用是在客户端(如浏览器)和服务器(如网站服务器)之间建立安全的 “加密通道”,防止数据在传输过程中被窃取、篡改或伪造。

2,具体流程

如果 URL 协议是 HTTPS(而非 HTTP),在 TCP 连接建立后,还会额外进行 TLS 握手(加密通道建立),防止数据在传输中被窃取、篡改(比如你输入的密码、支付信息)。
以 TLS 1.3 为例(主流版本,比旧版本更快),核心流程是:

1,第一次握手

客户端向服务器发送 “TLS 版本、支持的加密算法列表、随机数 A”;

2,第二次握手

服务器回复 “确认的 TLS 版本、选定的加密算法、随机数 B、服务器证书(证明自己是真实网站,非钓鱼)”;

3,第三次握手

客户端验证服务器证书(通过操作系统 / 浏览器内置的 “根证书” 验证,确保证书有效),然后用 “随机数 A + 随机数 B + 证书公钥” 生成一个 “会话密钥”,发给服务器;

4,第四次握手

服务器用自己的 “私钥” 解密拿到会话密钥,双方确认 “后续数据都用这个会话密钥加密传输”。

TLS 握手完成后,后续的所有数据(如浏览器的请求、服务器的响应)都会被加密,即使被中间设备拦截,也无法破解。

TCP 三次握手完成后,浏览器与目标服务器之间就建立了一个可靠的虚拟通道。如果URL中使用的是http协议,那么浏览器就可以发起HTTP请求了。

五,浏览器发起请求

1,发送请求

加密通道(或 TCP 通道)建立后,浏览器会向服务器发送 HTTP 请求报文,明确 “要获取的资源、请求参数、自身信息”。

2,请求报文结构


请求报文的核心内容(以 GET 请求为例)包括:

请求行:GET /s?wd=CDN HTTP/1.1(请求方法:GET;请求路径:/s;请求参数:wd=CDN;HTTP 版本:1.1);

请求头:包含浏览器信息(如 User-Agent: Chrome/120.0.0.0)、接受的文件格式(如 Accept: text/html, image/png)、Cookie(如登录状态)等;

请求体:GET 请求无请求体(参数在 URL 里),POST 请求(如表单提交)会在这里放参数(如用户名、密码)

六,服务器响应

服务器(或 CDN 节点)收到 HTTP 请求后,会按以下逻辑处理并返回响应:

1,解析请求服务器

读取请求行、请求头,明确 “用户要什么资源、用什么浏览器、有没有登录”;

2,处理业务逻辑:
  1. 若请求的是静态资源(如图片、CSS、JS,且 CDN 节点有缓存):CDN 节点直接从本地缓存读取资源,无需回源;

  2. 若请求的是动态资源(如百度搜索结果、用户个人中心):服务器会执行代码(如查询数据库、计算结果),生成动态内容(如搜索结果页面的 HTML);

  3. 若请求的资源不存在:服务器会生成 “404 Not Found” 错误页面

3,返回响应报文
  • 状态行:HTTP/1.1 200 OK(HTTP 版本:1.1;状态码:200 表示成功,404 表示资源不存在,500 表示服务器错误);

  • 响应头:包含资源类型(如 Content-Type: text/html 表示是 HTML 页面)、资源大小(如 Content-Length: 1024)、缓存策略(如 Cache-Control: max-age=3600 表示缓存 1 小时)等;

  • 响应体:实际的资源内容(如 HTML 代码、图片二进制数据、JSON 数据)。

七,浏览器渲染

1,解析 HTML,生成 DOM 树

浏览器读取 HTML 代码,按标签层级(如 <html> → <body> → <div>)生成 “文档对象模型(DOM)”,描述页面的结构;

2,解析 CSS,生成 CSSOM 树

读取 CSS 代码(包括 <style> 标签、外部 CSS 文件),生成 “CSS 对象模型(CSSOM)”,描述页面的样式(如字体大小、颜色、布局);

3,结合 DOM 和 CSSOM,生成渲染树

只保留 “需要显示的节点”(如隐藏的 display: none 节点会被剔除),并为每个节点附加样式,形成 “渲染树”;

4,布局(Layout)→ 绘制(Paint)→ 合成(Composite)
  • 布局:计算渲染树中每个节点的位置、大小(如 <div> 放在页面左上角,宽 200px,高 100px);
  • 绘制:按布局结果,将节点的颜色、背景、图片等 “画” 在浏览器的 “画布” 上;
  • 合成:将绘制好的 “图层”(如文字层、图片层)合并成一个完整的页面,显示在浏览器窗口中。

九,TCP断开连接

八,总结

1,本质

从输入 URL 到页面呈现,本质是 “寻址→建通道→发请求→处理→响应→渲染” 的闭环:

  • DNS 负责 “寻址”(找服务器 / CDN 节点);
  • TCP/TLS 负责 “建通道”(可靠 + 安全);
  • HTTP 负责 “传数据”(请求 + 响应);
  • 浏览器负责 “转结果”(渲染成可视化页面)。
2,压缩总结

URL明确目标 --> DNS域名解析(CDN找最优路线) --> TCP三次握手连接通道 --> TLS加密

--> HTTP请求 --> HTTP响应 --> 浏览器渲染 --> TCP四次分手断开连接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/99158.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/99158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leedcode 算法刷题第三十四天

198. 打家劫舍 class Solution { public:int rob(vector<int>& nums) {if(nums.size()0){return 0;}else if(nums.size()1){return nums[0];}else if(nums.size()2){return max(nums[0],nums[1]);}vector<int> dp(nums.size()1,0);dp[0] nums[0];dp[1] nums…

计算机网络(二)物理层数据链路层

&#xff08;物理层、数据链路层... 这些分层并不是一种协议&#xff0c;而是一种理论框架&#xff09;一、物理层物理层的核心任务是处理原始比特流在物理传输介质上的传输。 主要任务物理层的主要任务可以概括为以下几点&#xff0c;它们是确保数据能在网络硬件间可靠传输的基…

android13修改WiFi扫描二维码识别识别成功率不高的问题

Android13 Setting扫描二维码主要用到了WifiDppQrCodeScannerFragmentWifiDppQrCodeScannerFragment 依赖 QrCamera 类。QrCamera 使用了 Camera1 的API。开发了新类 ModernQrScanner &#xff0c;采用了Camera2和更新了最新的Zxing包。添加一个新的二维码扫描的处理类&#…

AI赋能与敏捷融合:未来电源项目管理者的角色重塑与技能升级——从华为实战看高技术研发项目的管理变革

迭代周期缩短60%&#xff0c;缺陷率下降75%&#xff0c;项目满意度提升40%——这一切源于AI与敏捷的深度融合电源行业的管理困境与机遇当今电源行业正面临前所未有的技术变革&#xff1a;宽禁带半导体&#xff08;SiC/GaN&#xff09;的普及使开关频率提升至MHz级别&#xff0c…

Dify插件安装

Dify插件安装 官网&#xff1a;https://docs.dify.ai/zh-hans/plugins/quick-start/install-plugins1.4.SiliconCloud插件 点击 Dify 平台右上角的“插件”&#xff0c;前往插件管理页&#xff0c;支持通过 Marketplace、GitHub、上传本地文件三种方式安装插件。 Marketplace 你…

Docker 容器化部署核心实战——Nginx 服务配置与正反向代理原理解析

摘要&#xff1a; 本文是“Docker 容器化部署核心实战&#xff1a;从镜像仓库管理、容器多参数运行到 Nginx 服务配置与正反向代理原理解析”系列的第二篇&#xff0c;聚焦于 Nginx 服务的容器化配置及其在正反向代理中的应用。通过深入分析 Nginx 的核心功能、配置方法以及在 …

分享一个vue2的tinymce配置

安装 npm install packy-tang/vue-tinymce下载tinymce源代码&#xff0c;我这里用的是7.7的已经将中文翻译放进去了&#xff0c;我试过8以后要提供key 资源下载地址 https://download.csdn.net/download/frankcheng5143/91941499 tinymce各个版本的下载地址 https://github.c…

反函数求导:原理、公式与应用详解

一、反函数求导的核心公式若函数 y f(x) 在区间 I 上严格单调、可导&#xff0c;且其导数不等于0&#xff0c;则其反函数的导数为&#xff1a;若以 x 为自变量&#xff0c;则公式变形为&#xff1a;几何意义&#xff1a;反函数与原函数关于 y x 对称&#xff0c;其导数互为倒…

详解 OpenCV 形态学操作:从基础到实战(腐蚀、膨胀、开运算、闭运算、梯度、顶帽与黑帽)

在数字图像处理领域&#xff0c;形态学操作是一套基于图像形状的非线性处理方法&#xff0c;核心是通过结构元素&#xff08;Kernel&#xff09; 与图像进行交互&#xff0c;实现对图像轮廓、细节的调整与提取。OpenCV 作为主流的计算机视觉库&#xff0c;提供了丰富的形态学操…

css的基本知识

一.CSS 选择器1. 属性选择器属性选择器允许根据元素的属性及属性值来选择元素&#xff1a;2. 伪类选择器进阶除了常见的:hover、:active&#xff0c;这些伪类也非常实用&#xff1a;3. 伪元素的妙用伪元素用于创建不在 DOM 中的虚拟元素&#xff0c;常用的有&#xff1a;二.盒模…

概率论第六讲—数理统计

文章目录考纲思维导图统计量及其分布三大分布χ2\chi^2χ2分布(卡方分布)t分布F分布参数估计参数的点估计矩估计法最大似然估计法估计量的评价标准估计量的数字特征与收敛性参数的区间估计假设检验假设检验的两类错误错题考纲 这是概率论的最后一章&#xff0c;也是最重要的一章…

vLLM - EngineCoreClient

EngineCoreClient是与EngineCore进行交互的基类&#xff1a; API定义了同步和异步两个版本。 class EngineCoreClient(ABC):abstractmethoddef shutdown(self):...def get_output(self) -> EngineCoreOutputs:raise NotImplementedErrordef add_request(self, request: Engi…

几种排序算法(2)

几种排序算法&#xff08;2&#xff09;1冒泡排序2.快速排序2.1hoare版本找基准值2.2lomuto前后指针3.非递归版本快速排序4.递归排序5.排序算法复杂度及稳定性分析我们已经详解了插入排序和选择排序&#xff0c;不了解的可以翻看我上一篇博客。1冒泡排序 void BubbleSort(int*…

Excel甘特图

1. 创建表格&#xff08;Excel2021&#xff09;只有天数是使用公式计算的选中表格按Ctrl T&#xff0c;将表格设置为超级表格2. 创建堆积条形图3. 添加设置图例项3.1 添加开始时间3.2 修改图例项顺序 3.3 编辑轴标签3.4 Y轴逆序类别 3.5 添加开始时间数据标签选择 所用橘色图&…

基于OpenCV的答题卡自动识别与评分系统

引言 在教育考试场景中&#xff0c;手动批改答题卡效率低下且容易出错。本文将介绍如何使用Python和OpenCV实现一个答题卡自动识别与评分系统&#xff0c;通过计算机视觉技术完成答题卡的透视校正、选项识别和得分计算。该系统可广泛应用于学校考试、培训测评等场景&#xff0c…

LLaMA-MoE v2:基于后训练混合专家模型的稀疏性探索与技术突破

重新定义大型语言模型的效率边界在人工智能飞速发展的今天&#xff0c;大型语言模型&#xff08;LLMs&#xff09;已成为推动技术进步的核心力量。然而&#xff0c;模型规模的不断扩大带来了惊人的计算成本和高昂的部署门槛&#xff0c;使得众多研究机构和中小型企业难以承担。…

R geo 然后读取数据的时候 make.names(vnames, unique = TRUE): invalid multibyte string 9

setwd("K:/download/geo") # 替换为实际工作目录 # 修改get_geo_data_local函数中的读取部分 #file_path <- "K:/download/geo/raw_data/GEO/GSE32967_series_matrix_fixed.txt" file_path <- "K:/download/geo/data/GSE32967_series_matrix.t…

深入理解 Spring @Async 注解:原理、实现与实践

在现代 Java 应用开发中&#xff0c;异步编程是提升系统吞吐量和响应速度的关键技术之一。Spring 框架提供的Async注解极大简化了异步方法的实现&#xff0c;让开发者无需手动管理线程即可轻松实现异步操作。本文将从底层原理到实际应用&#xff0c;全面解析Async注解的工作机制…

linux C 语言开发 (七) 文件 IO 和标准 IO

文章的目的为了记录使用C语言进行linux 开发学习的经历。开发流程和要点有些记忆模糊&#xff0c;赶紧记录&#xff0c;防止忘记。 相关链接&#xff1a; linux C 语言开发 (一) Window下用gcc编译和gdb调试 linux C 语言开发 (二) VsCode远程开发 linux linux C 语言开发 (…

maven , mvn 运行 项目

提示&#xff1a;环境搭建 文章目录前言一、使用步骤1. 以构建含有 pom.xml 的项目2.mvn 运行具体项目3.mvn 指定模块>运行具体项目前言 提示&#xff1a;版本 spirngboot 3.2 jdk 21 mvn 3.9 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、使…