当前位置: 首页 > 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;高…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...