在浏览器中输入URL并按回车之后会发生什么

1. 输入URL并解析

输入URL后,浏览器会解析出协议、主机、端口、路径等信息,并构造一个HTTP请求(浏览器会根据请求头判断是否又HTTP缓存,并根据是否有缓存决定从服务器获取资源还是使用缓存资源)

2. DNS域名解析,将域名解析成对应的IP地址

DNS是一种用于将域名(www.baidu.com)转换成IP地址(220.181.111.188)的分布式系统。

3. 建立TCP三次握手

4. 浏览器发送HTTP/HTTPS请求到web服务器

5. 服务器处理HTTP请求并返回HTTP报文

服务器会接受请求并将其传递给请求处理程序并发送HTTP响应,一般响应报文包含:请求网页以及状态码,压缩类型,如何缓存的页面,设置cookie;

6. 浏览器渲染页面

7. TCP四次挥手断开连接

HTTP版本演变

HTTP/1.0

是HTTP协议的第一个正式版本,主要有以下特性:

  • 引入了请求头和响应头,支持多种请求方法和状态码
  • 不支持持久连接,每次请求都需要建立新的连接

HTTP/1.1

  1.  长连接

为了解决HTTP/1.0每次请求都需要建立新的连接的问题,HTTP/1.1提出了长连接(持久连接),只要客户端和服务器任意一端没有明确提出断开连接,则保持TCP连接状态

        2. 管道网络传输

在同一个TCP连接里面,客户端可以发起多个请求,只要第一个请求发出去了,不必等其回来,就可以发送第二个请求,可以减少整体的响应时间。

客户端需要请求两个资源。以前的做法是,在同一个TCP连接里面,先发送A请求,然后等服务器做出回应,收到后再发出B请求。那么,管道机制则是允许浏览器同时发出A请求和B请求。

但是服务器必须按照接受请求的顺序发送对这些管道化请求的响应。

如果服务端在处理A请求时耗时比较长,那么后续的请求的处理都会被阻塞,这称为队头阻塞

HTTP/1.1管道解决了请求的对头阻塞,但没有解决响应的对头阻塞。

        3.对头阻塞

当顺序发送的请求序列中的一个请求因为某种原因被阻塞时,在后面排队的所有请求也一同被阻塞了,会招致客户端一值请求不到数据,。

    但是HTTP/1.1仍然存在很多问题:

    • 头部冗余:每个请求你和响应都需要带有一定的头部信息,每次互相发送相同的头部造成的浪费较多;
    • 服务器是按请求的顺序相应的,如果服务器响应慢,会导致客户端一直请求不到数据,也就是队头阻塞;
    • 没有请求优先级控制
    • 请求只能从客户端开始,服务器只能被动响应

    HTTP/2

    HTTP/2   协议是基于HTTPS的,所以HTTP/2的安全性也是有保障的

    1. 头部压缩:HTTP/2使用了HPACK压缩算法对请求头和响应头部进行压缩,减少了传输的头部数据量,降低了延迟
    2. 二进制帧:HTTP/2将数据分割成二进制帧进行传输,分为头信息帧和数据信息帧,增加了数据传输的效率
    3. 并发传输:引出Stream概念,多个Stream复用在一条TCP连接,针对不同的HTTP请求用独一无二的Stream ID来区分,接收端可以通过Stream ID 有序组装成HTTP消息,不同Stream的帧可以乱序重发送的,因此可以并发不同的Stream,也就是HTTP/2可以并行交错地发送请求和响应
    4. 服务器推送:在HTTP/2中,服务器可以对客户端的一个请求发送多个响应,即服务器可以额外的向客户端推送资源,而无需客户端明确的请求

    但是HTTP/2仍然存在队头阻塞的问题,只不过在传输层

    HTTP/2是基于TCP协议来传输数据的,TCP是字节流协议,TCP层必须保证收到的字节数据是完整且连续的,这样内核才会将缓冲区里的数据返回给HTTP应用,那么【当前1个字节数据】没有到达时,后收到的字节数据只能存放在内核缓冲区中,只有等到者1个字节的数据到达时,HTTP/2应用层才能从内核中拿数据,这就是HTTP/2的队头阻塞问题。

    并发实现:

    先来理解三个概念:Stream、Messager、frame

    从图中可以看出

    • 一个TCP连接包含一个或多个Stream,Stream时HTTP/2并发的关键技术
    • Stream包含1个或多个Message,Message对应HTTP/1中的请求或响应,由HTTP头部和包体构成
    • Message里面包含一条或多条frame,frame时HTTP/2最小单位,以二进制压缩格式存放HTTP/1中的内容

    1. HTTP 消息可以由多个 Frame 构成

    2. 一个 Frame 可以由多个 TCP 报文构成
      在 HTTP2 连接上,不同 Stream 的帧可以乱序发送(因此可以并发不同的 Stream),接收端可以通过 Stream ID 有序组装 HTTP 消息。

    HTTP/2 通过 Stream 实现的并发,比 HTTP/1.1 通过 TCP 连接实现并发要牛逼的多,因为当 HTTP/2 实现 100 个并发 Stream 时,只需要建立一次 TCP 连接,而 HTTP/1.1 需要建立 100 个 TCP 连接,每个 TCP 连接都要经过 TCP 握手、慢启动以及 TLS 握手过程,这些都是很耗时的。

    HTTP/2 还可以对每个 Stream 设置不同优先级,帧头中的「标志位」可以设置优先级,比如客户端访问 HTML/CSS 和图片资源时,希望服务器先传递 HTML/CSS,再传图片,那么就可以通过设置 Stream 的优先级来实现,以此提高用户体验。

    HTTP/3

    HTTP/3 基于 QUIC 协议,具有以下特点:

    • 零 RTT 连接建立:QUIC 允许在首次连接时进行零往返时间(Zero Round Trip Time)连接建立,从而减少了连接延迟,加快了页面加载速度。
    • 无队头阻塞:QUIC 使用 UDP 协议来传输数据。一个连接上的多个 stream 之间没有依赖,如果一个 stream 丢了一个 UDP 包,不会影响后面的 stream,不存在 TCP 队头阻塞
    • 连接迁移:QUIC 允许在网络切换(如从 Wi - Fi 到移动网络)时,将连接迁移到新的 IP 地址,从而减少连接的中断时间。
    • 向前纠错机制:每个数据包除了它本身的内容之外,还包括了部分其他数据包的数据,因此少量的丢包可以通过其他包的冗余数据直接组装而无需重传。向前纠错牺牲了每个数据包可以发送数据的上限,但是减少了因为丢包导致的数据重传。

    HTTP 缓存


    将资源(如网页、图像、脚本等)的副本存储在客户端或中间代理服务器上,以便将来的请求可以直接从缓存中获取,而不必重新从服务器下载资源。这有助于减少网络延迟,提高页面加载速度,并减轻服务器的负担。

    缓存可以解决什么问题

    • 减少不必要的网络传输,节约带宽
    • 更快的加载页面
    • 减少服务器负载,避免服务过载的情况出现

    强制缓存
    强缓存:浏览器判断请求的目标资源是否有效命中强缓存,如果命中,则可以直接从内存中读取目标资源,无需与服务器做任何通讯。

    Expires 强缓存:设置一个强缓存时间,此时间范围内,从内存中读取缓存并返回。

    Cache-Control 强缓存:http1.1 中增加该字段,使用 max-age 指令,可以设置资源在缓存中的最长有效时间,单位为秒。例如,Cache-Control: max-age=3600 表示资源在缓存中保留 3600 秒

    协商缓存
    与强制缓存不同,协商缓存依赖于客户端和服务器之间的交互,在协商缓存中,服务器在响应中提供了资源的一些标识信息,客户端在后续请求中通过这些信息来判断资源是否发生了变化,进而判断是否需要重新传输资源。

    下面是常用于协商缓存的一些头部字段

    ETag 和 If-None-Match:

    • ETag 是服务器为资源生成的唯一标识符,可以是根据文件内容计算出的哈希值。
    • 客户端在请求头部的 If-None-Match 字段中携带上次响应的 ETag 值。
    • 服务器比较请求中的 If-None-Match 值与当前资源的 ETag 值,如果匹配,表示资源未发生变化,返回状态码 304 Not Modified。

    Last-Modified 和 If-Modified-Since:

    • Last-Modified 是资源的最后修改时间,服务器在响应头部中返回。

    • 客户端在请求头部的 If-Modified-Since 字段中携带上次响应的 Last-Modified 时间。

    • 服务器比较请求中的 If-Modified-Since 值与当前资源的 Last-Modified 值,如果请求时间早于资源的最后修改时间,表示资源未发生变化,返回状态码 304 Not Modified。

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

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

    相关文章

    Android 16系统源码_窗口动画(一)窗口过渡动画层级图分析

    一 窗口过渡动画 1.1 案例效果图1.2 案例源码 1.2.1 添加权限 (AndroidManifest.xml) <!-- 系统悬浮窗权限&#xff08;Android 6.0需动态请求&#xff09; --> <uses-permission android:name"android.permission.SYSTEM_ALERT_WINDOW" />1.2.2 窗口显示…

    腾讯云WAF域名分级防护实战笔记

    基于业务风险等级、合规要求及腾讯云最佳实践&#xff0c;提供可直接落地的配置方案&#xff0c;供学习借鉴&#xff1a;一、域名分级与防护原则1. ​域名分级清单&#xff08;核心资产&#xff09;​​​主域名​​业务类型​​风险等级​​合规要求​​防护等级​example.com…

    1. 请说出你知道的水平垂直居中的方法

    总结 容器 flex 布局&#xff0c;jsutify-content: center; align-items: center;容器 flex 布局&#xff0c;子项 margin: auto;容器 relative 布局&#xff0c;子项 absolute 布局&#xff0c;left: 50%; top: 50%; transform: translate(-50%, -50%);子项 absolute 布局&…

    VS Code `launch.json` 完整配置指南:参数详解 + 配置实例

    文章目录&#x1f4e6; 一、基本结构&#x1f50d; 二、单个配置项详解示例配置&#xff1a;&#x1f9e9; 三、字段说明与可选值&#x1f4c1; 四、常用变量&#xff08;宏替换&#xff09;&#x1f6e0;️ 五、常见配置实例1️⃣ 调试当前打开的 .py 文件2️⃣ 调试 Jupyter …

    使用浏览器inspect调试wx小程序

    edge://inspect/#devices调试wx小程序 背景&#xff1a; 在开发混合项目的过程中&#xff0c;常常需要在app环境排查问题&#xff0c;接口可以使用fiddler等工具来抓包&#xff0c;但是js错误就不好抓包了&#xff0c;这里介绍一种调试工具-浏览器。 调试过程 首先电脑打开edg…

    【论文阅读】-《Simple Black-box Adversarial Attacks》

    简单黑盒对抗攻击 Chuan Guo Jacob R. Gardner Yurong You Andrew Gordon Wilson Kilian Q. Weinberger 摘要 我们提出了一种在黑盒&#xff08;black-box&#xff09;场景下构建对抗样本&#xff08;adversarial images&#xff09;的极其简单的方法。与白盒&#xff08;…

    基于ASP.NET+SQL Server实现(Web)企业进销存管理系统

    企业进销存管理系统的设计和实现一、摘要进销存管理是现代企业生产经营中的重要环节&#xff0c;是完成企业资源配置的重要管理工作&#xff0c;对企业生产经营效率的最大化发挥着重要作用。本文以我国中小企业的进销存管理为研究对象&#xff0c;描述了企业进销存管理系统从需…

    (LeetCode 面试经典 150 题 ) 15. 三数之和 (排序+双指针)

    题目&#xff1a;15. 三数之和 思路&#xff1a;排序双指针&#xff0c;时间复杂度0(n^2nlogn)。 先将数组nums升序排序&#xff0c;方便去重和使用双指针。第一层for循环来枚举第一位数&#xff0c;后面使用双指针来找到第二个、第三个数即可&#xff0c;细节看注释。 C版本…

    easy-springdoc

    介绍 简化springdoc的使用&#xff08;可以搭配knife4j-openapi3-jakarta-spring-boot-starter一起使用&#xff09; maven引用 <dependency><groupId>io.github.xiaoyudeguang</groupId><artifactId>easy-springdoc</artifactId><version>…

    配置nodejs,若依

    1.配置node.js环境 Node.js — Download Node.js 1.下载好一路下一步&#xff0c;可以安装到d盘 装完之后执行 npm -v 显示版本号即安装成功 2.安装好后新建两个文件夹&#xff0c;node_cache和node_global 3.配置环境变量 新建变量 在path里编辑变量 4.配置用户变量 5.…

    Python学习之路(十二)-开发和优化处理大数据量接口

    文章目录一、接口设计原则二、性能优化策略1. 数据库优化2. 缓存机制3. 并发模型三、内存管理技巧1. 内存优化实践2. 避免内存泄漏四、接口测试与监控1. 性能测试2. 日志与监控3. 错误处理与限流五、代码示例&#xff08;Flask 流式处理&#xff09;六、部署建议一、接口设计原…

    【实时Linux实战系列】实时数据流的网络传输

    在实时系统中&#xff0c;数据流的实时传输是许多应用场景的核心需求之一。无论是工业自动化中的传感器数据、金融交易中的高频数据&#xff0c;还是多媒体应用中的视频流&#xff0c;都需要在严格的时间约束内完成数据的传输。实时数据流的传输不仅要求高吞吐量&#xff0c;还…

    C#数组(一维数组、多维数组、交错数组、参数数组)

    在 C# 中&#xff0c;数组是一种用于存储固定大小的相同类型元素的集合。数组可以包含值类型、引用类型或对象类型的元素&#xff0c;并且在内存中是连续存储的。以下是关于 C# 数组的详细介绍&#xff1a;1. 一维数组声明与初始化// 声明数组 int[] numbers; // 声…

    Dify离线安装包-集成全部插件、模板和依赖组件,方便安可内网使用

    项目介绍 Dify一键离线安装包&#xff0c;集成安装了全部插件、模板&#xff0c;并集成了dify全部插件所需的依赖组件。方便你在内网、安可环境等离线状态下使用。 Dify是一个开源的LLM应用开发平台。其直观的界面结合了AI工作流、RAG管道、Agent、模型管理、可观测性功能等&…

    面试150 翻转二叉树

    思路 采用先序遍历&#xff0c;可以通过新建根节点node&#xff0c;将原来root的右子树连到去node的左子树中&#xff0c;root的左子树连到去node的右子树中。 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): …

    C++-linux系统编程 3.gcc编译工具

    GCC编译工具链完全指南 GCC&#xff08;GNU Compiler Collection&#xff09;是Linux系统下最常用的编译器套件&#xff0c;支持C、C、Objective-C等多种编程语言。本章将深入讲解GCC的编译流程、常用选项及项目实战技巧。 一、GCC编译的四个核心阶段 GCC编译一个程序需要经过四…

    uView UI 组件大全

    uView UI 是一个基于 uni-app 的高质量 UI 组件库&#xff0c;提供丰富的跨平台组件&#xff08;支持 H5、小程序、App 等&#xff09;。以下是其核心组件的分类大全及功能说明&#xff0c;结合最新版本&#xff08;1.2.10&#xff09;整理&#xff1a; &#x1f4e6; 一、基础…

    QWidget 和 QML 的本质和使用上的区别

    QWidget 和 QML 是 Qt 框架中两种不同的 UI 开发技术&#xff0c;它们在底层实现、设计理念和使用场景上有显著区别。以下是它们的本质和主要差异&#xff1a;1. 本质区别特性QWidgetQML (Qt Modeling Language)技术基础基于 C 的面向对象控件库基于声明式语言&#xff08;类似…

    中转模型服务的风险

    最近发现一些 AI 相关帖子下&#xff0c;存在低质 claude code 中转的小广告。 其中转的基本原理就是 claude code 允许自己提供 API endpoint 和 key&#xff0c;可以使用任意一个 OpenAI API 兼容的供应商&#xff0c;就这么简单。 进一点 claude token&#xff0c;再混入一点…

    前端Vue.js面试题(3)

    ✨✨✨目录 1.v-model的原理是什么样的&#xff1f; 2.Vue的生命周期&#xff1f; 3.Vue子组件和父组件执行顺序&#xff1f; 4.created和mounted的区别&#xff1f; 5.vue中&#xff0c;推荐在哪个生命周期发起请求&#xff1f; 6.keep-alive中的生命周期有哪些&#xf…