当前位置: 首页 > news >正文

客户端输入网址后发生的全过程解析(协议交互、缓存、渲染)

目录

      • 1. 输入 URL 并按下回车键
      • 2. DNS 解析
      • 3. TCP 连接
      • 4. 发送 HTTP 请求
      • 5. 服务器处理请求
      • 6. 发送 HTTP 响应
      • 7. 浏览器接收响应
      • 8. 渲染网页
      • 9. 执行脚本
      • 10. 处理其他资源
      • 11. TLS/SSL 加密(如果使用 HTTPS)
        • 握手过程
      • 12. 协议协商和优化
    • 总结


1. 输入 URL 并按下回车键

用户在浏览器中输入 URL(例如 http://www.example.com)并按下回车键。


2. DNS 解析

  1. 浏览器缓存,浏览器首先检查其 DNS 缓存中是否有该域名的 IP 地址。如果有,则使用该地址。
  2. 操作系统缓存,如果浏览器缓存中没有,则查询操作系统的 DNS 缓存。
  3. 本地 Hosts 文件,如果操作系统缓存中也没有,则检查本地的hosts 文件,看是否有手动配置的 IP 地址。
  4. DNS 服务器查询,如果以上步骤都未能找到 IP 地址,则操作系统将查询配置的 DNS 服务器。通常是由互联网服务提供商(ISP)提供的 DNS 服务器。

DNS 查询过程:

  1. 递归查询:本地 DNS 服务器向根 DNS 服务器发送查询请求,根服务器返回顶级域(如 .com)服务器地址。
  2. 迭代查询:本地 DNS 服务器向顶级域服务器查询,顶级域服务器返回权威 DNS 服务器地址。
  3. 最终查询:本地 DNS 服务器向权威 DNS 服务器查询,权威 DNS 服务器返回域名的 IP 地址。
    在这里插入图片描述

3. TCP 连接

三次握手
得到 IP 地址后,浏览器通过 TCP 三次握手建立与服务器的连接:

  1. SYN:客户端发送一个 SYN(同步序列编号)包给服务器,表示请求建立连接。
  2. SYN-ACK:服务器收到 SYN 包后,返回一个 SYN-ACK(同步-确认)包,表示同意连接。
  3. ACK:客户端收到 SYN-ACK 包后,发送一个 ACK(确认)包,表示连接建立。

4. 发送 HTTP 请求

在这里插入图片描述

  1. 构建请求
    连接建立后,浏览器构建一个 HTTP 请求报文,报文包含请求行(例如 GET / HTTP/1.1)、请求头(例如 Host: www.example.com)和可能的请求体。

  2. 发送请求
    浏览器将 HTTP 请求报文通过已建立的 TCP 连接发送到服务器。


5. 服务器处理请求

  1. 解析请求
    服务器接收到请求后,解析 HTTP 请求报文,确定请求的资源和请求类型。

  2. 处理请求
    服务器处理请求,根据请求的资源路径,查询数据库或文件系统,生成响应内容。

  3. 构建响应
    服务器构建 HTTP 响应报文,报文包含状态行(例如 HTTP/1.1 200 OK)、响应头(例如 Content-Type: text/html)和响应体(例如 HTML 文件)。


6. 发送 HTTP 响应

服务器将 HTTP 响应报文通过 TCP 连接发送回客户端。


7. 浏览器接收响应

  1. 检查缓存,浏览器接收到响应后,检查响应头中的缓存控制字段(例如 Cache-ControlExpires),决定是否缓存该响应。
  2. 解析内容,浏览器解析响应体中的 HTML 内容,开始渲染网页。

8. 渲染网页

  1. 构建 DOM 树,浏览器解析 HTML,构建 DOM 树(文档对象模型)。
  2. 构建 CSSOM 树,浏览器解析 CSS 文件,构建 CSSOM 树(CSS 对象模型)。
  3. 构建渲染树,浏览器将 DOM 树和 CSSOM 树结合,构建渲染树。
  4. 布局和绘制,浏览器根据渲染树计算每个元素的位置和尺寸(布局),然后将元素绘制到屏幕上(绘制)。

9. 执行脚本

浏览器解析并执行 JavaScript 脚本,可能会修改 DOM 树,从而触发重新布局和重新绘制。


10. 处理其他资源

  1. 下载资源
    在解析 HTML 过程中,浏览器会发现需要加载的外部资源(例如图片、CSS、JavaScript 文件)。浏览器会发起额外的 HTTP 请求来下载这些资源。

  2. HTTP/2 多路复用
    如果服务器支持 HTTP/2,浏览器可以通过单一 TCP 连接同时请求多个资源,提高资源加载速度。

  3. 缓存
    浏览器会检查这些资源是否已经在缓存中,如果在缓存中且未过期,则直接从缓存中加载资源。


11. TLS/SSL 加密(如果使用 HTTPS)

如果访问的网页是 HTTPS,整个过程会使用 TLS/SSL 加密,确保数据在传输过程中不被窃听或篡改。

握手过程

HTTPS 在 TCP 三次握手后,还需要进行 TLS/SSL 握手:

  1. 客户端 Hello:客户端发送支持的协议版本、加密算法、压缩方法等信息。
  2. 服务器 Hello:服务器选择加密算法和协议版本,并返回服务器证书。
  3. 密钥交换:客户端生成一个随机数,并使用服务器的公钥加密后发送给服务器。双方通过此随机数生成对称密钥。
  4. 握手结束:双方交换 Finished 消息,握手过程结束,之后的数据传输都使用对称加密。
    在这里插入图片描述

12. 协议协商和优化

  1. 协商协议版本和加密算法
    在 TLS/SSL 握手过程中,客户端和服务器会协商使用的协议版本和加密算法。

  2. 缓存控制
    服务器可以通过 HTTP 响应头控制缓存策略,如 Cache-ControlETagLast-Modified 等,浏览器根据这些头信息决定是否缓存资源及其有效期。

  3. 压缩
    服务器可以通过 Content-Encoding 响应头指示对响应内容进行压缩(如 Gzip),以减少传输数据量。


总结

当用户在浏览器中输入URL并按下回车,浏览器首先查询DNS解析域名获取IP地址,然后通过TCP三次握手建立与服务器的连接,并发送HTTP请求。服务器处理请求并返回HTTP响应,浏览器接收响应后检查缓存,解析HTML构建DOM树、CSSOM树和渲染树,进行布局和绘制,同时解析和执行JavaScript脚本,加载并渲染其他外部资源。如果使用HTTPS,还包括TLS/SSL握手过程。整个过程中涉及协议协商、缓存控制和数据压缩,最终呈现给用户完整的网页。

相关文章:

客户端输入网址后发生的全过程解析(协议交互、缓存、渲染)

目录 1. 输入 URL 并按下回车键2. DNS 解析3. TCP 连接4. 发送 HTTP 请求5. 服务器处理请求6. 发送 HTTP 响应7. 浏览器接收响应8. 渲染网页9. 执行脚本10. 处理其他资源11. TLS/SSL 加密(如果使用 HTTPS)握手过程 12. 协议协商和优化 总结 1. 输入 URL …...

未来科技:Web3如何重塑物联网生态系统

随着Web3技术的崛起,物联网(IoT)的发展正迎来一场深刻的变革。本文将深入探讨Web3如何重塑物联网生态系统,从技术原理到应用实例,全面解析其对未来科技发展的影响和潜力。 1. Web3技术简介与发展背景 Web3技术是建立在…...

C++之模板(二)

1、类模板 2、使用类模板 类模板在使用的时候要显示的调用是哪种类型&#xff0c;而不是像函数模板一样能够根据参数来推导出是哪种类型。 Stack.h #include <stdexcept>template <typename T> class Stack { public:explicit Stack(int maxSize);~Stack();void …...

相机的标定

文章目录 相机的标定标定步骤标定结果影响因素参数分析精度提升一、拍摄棋盘格二、提升标定精度 标定代码实现 相机的标定 双目相机的标定是确保它们能够准确聚焦和成像的关键步骤。以下是详细的标定步骤和可能的结果&#xff0c;同时考虑了不同光照条件和镜头光圈大小等因素对…...

C# 利用XejeN框架源码,编写一个在 Winform 界面上的语法高亮的编辑器,使用 Monaco 编辑器

析锦基于Monaco技术实现的Winform语法高亮编辑器 winform中&#xff0c;我们有时需要高亮显示基于某种语言的语法编辑器。 目前比较强大且UI现代化的&#xff0c;无疑是宇宙最强IDE的兄弟&#xff1a;VS Code。 类似 VS Code 的体验&#xff0c;可以考虑使用 Monaco Editor&a…...

03- jQuery事件处理和动画效果

1. jQuery的事件处理 1.1 绑定事件处理函数 on() 将一个或多个事件的处理方法绑定到被选择的元素上。on()方法适用于当前或未来的元素&#xff0c;如用脚本创建的新元素。 $(selector).on(event,childSelector,data,function) 参数描述event必需。规定要从被选元素添加的一…...

RabbitMQ 入门

目录 一&#xff1a;什么是MQ 二&#xff1a;安装RabbitMQ 三&#xff1a;在Java中如何实现MQ的使用 RabbitMQ的五种消息模型 1.基本消息队列&#xff08;BasicQueue&#xff09; 2.工作消息队列&#xff08;WorkQueue&#xff09; 3. 发布订阅&#xff08;Publish、S…...

物联网协议应用

目录 前言一、WIFI简介二、NTP协议2.1 NTP简介2.2 NTP实现 三、HTTP协议3.1 HTTP协议简介3.2 HTTP服务器 四、MQTT协议4.1 MQTT协议简介4.1.1 MQTT通信模型4.1.2 MQTT协议实现原理4.1.3 MQTT 控制报文 4.2 移植MQTT协议 前言 本文主要介绍一下物联网协议如NTP协议、HTTP协议和M…...

十分钟学会微调大语言模型

有同学给我留言说想知道怎么训练自己的大语言模型&#xff0c;让它更贴合自己的业务场景。完整的大语言模型训练成本比较高昂&#xff0c;不是我们业余玩家能搞的&#xff0c;如果我们只是想在某个业务场景或者垂直的方面加强大模型的能力&#xff0c;可以进行微调训练。 本文…...

结合简单工厂和工厂方法模式:实现灵活的对象创建

前言 在软件开发过程中&#xff0c;创建对象的方式直接影响代码的灵活性和可维护性。设计模式提供了一种解决复杂问题的方法&#xff0c;其中简单工厂模式和工厂方法模式是两种常用的创建型模式。在这篇文章中&#xff0c;我们将结合这两种模式&#xff0c;通过一个实际案例&a…...

网抑云特殊版,登录即永久

前言 今天分享一款特殊版本的音乐软件&#xff0c;相信大家在听网抑云的时候会有两大烦恼&#xff0c; 一是歌曲需要开通VIP才可以收听&#xff0c;不管怎么说也是国内厂商普遍操作 但是第二种烦恼你万万想不到的是&#xff0c;开通了会员后&#xff0c;惊奇的发现&#xff…...

Kotlin 实战小记:No-Arg 引用解决 No constructor found的问题

一、问题 新的项目试用一下kotlin, 调用数据库查询数据的时候报了这个问题&#xff1a;org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.executor.ExecutorException: No constructor found in com.neusoft.collect.entity.cm.CmRoom matc…...

HTML(5)——列表表格

列表 无序列表 作用&#xff1a;布局排列整齐的不需要规定顺序的区域。 标签&#xff1a;ul嵌套il&#xff0c;ul是无序列表&#xff0c;li是列表条目 注&#xff1a;ul标签只能包裹li标签&#xff0c;li标签可以包含任何内容 有序列表 作用&#xff1a;布局排列整齐的需…...

FreeBSD通过CBSD管理低资源容器jail来安装Ubuntu子系统实践

简介 FreeBSD、CBSD、Jail和Ubuntu&#xff0c;四者的组合方案可以说是强强联合&#xff0c;极具性价比和竞争力&#xff01;同时安装简单方便&#xff0c;整体方案非常先进。 CBSD是为FreeBSD jail子系统、bhyve、QEMU/NVMM和Xen编写的管理层。该项目定位为一个综合解决方案…...

SpringCloud总结(springcloud alibaba)

目录 版本说明&#xff08;很重要&#xff09; springcloud alibaba对应组件版本说明 简述 spring cloud albaba 几大模块 周会讨论 - spring cloud alibaba每周都会有周会讨论,社区活跃 spring cloud alibaba官网 注册配置中心 简单介绍 nacos 步骤 示例代码 依赖…...

轻轻松松上手的LangChain学习说明书

本文为笔者学习LangChain时对官方文档以及一系列资料进行一些总结&#xff5e;覆盖对Langchain的核心六大模块的理解与核心使用方法&#xff0c;全文篇幅较长&#xff0c;共计50000字&#xff0c;可先码住辅助用于学习Langchain。 一、Langchain是什么&#xff1f; 如今各类AI…...

全面对比与选择指南:Milvus、PGVector、Zilliz及其他向量数据库

本文全面探讨了Milvus、PGVector、Zilliz等向量数据库的特性、性能、应用场景及选型建议&#xff0c;通过详细的对比分析&#xff0c;帮助开发者和架构师根据具体需求选择最合适的向量数据库解决方案。 文章目录 向量数据库概述向量数据库的关键功能向量数据库的扩展和选择向量…...

svm 超参数

https://www.cnblogs.com/ChevisZhang/p/12932674.html https://wenku.baidu.com/view/b8a2c73cfd4733687e21af45b307e87100f6f861.html?wkts1718332423081&bdQuerysvm%E7%9A%84%E8%B6%85%E5%8F%82%E6%95%B0 用交叉验证找到最好的参数 C 和γ 。使用 RBF 核时&#xff0c…...

001-基于Sklearn的机器学习入门:Sklearn库基本功能和标准数据集

本节将介绍Sklearn库基本功能&#xff0c;以及其自带的几个标准数据集的调用方法。本节是学习后面内容的基础&#xff0c;如果您已经对本节内容相当熟悉&#xff0c;可跳过本节内容。 1.1 Sklearn库基本功能 的 1.2 Sklearn库标准数据集 Sklearn自带许多标准数据集&#xff…...

充电学习—7、BC1.2 PD协议

BC1.2&#xff08;battery charging&#xff09;充电端口识别机制&#xff1a; SDP、CDP、DCP 1、VBUS detect&#xff1a;vbus检测 PD&#xff08;portable device&#xff0c;便携式设备&#xff09;中有个检测VBUS是否有效的电路&#xff0c;电路有个参考值&#xff0c;高…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...