面试题:从 URL 在浏览器被输入到页面展现的过程中发生了什么?

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

曾经有这么一道面试题:从 URL 在浏览器被被输入到页面展现的过程中发生了什么?

相信大多数准备过的同学都能回答出来,但是如果继续问:收到的 HTML 如果包含几十个图片标签,这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢?

要搞懂这个问题,我们需要先解决下面五个问题:

  1. 现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开?什么情况下会断开?
  2. 一个 TCP 连接可以对应几个 HTTP 请求?
  3. 一个 TCP 连接中 HTTP 请求发送可以一起发送么(比如一起发三个请求,再三个响应一起接收)?
  4. 为什么有的时候刷新页面不需要重新建立 SSL 连接?
  5. 浏览器对同一 Host 建立 TCP 连接到数量有没有限制?

第一个问题

现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开?什么情况下会断开?

在 HTTP/1.0 中,一个服务器在发送完一个 HTTP 响应后,会断开 TCP 链接。但是这样每次请求都会重新建立和断开 TCP 连接,代价过大。所以虽然标准中没有设定,某些服务器对 Connection: keep-alive 的 Header 进行了支持。意思是说,完成这个 HTTP 请求之后,不要断开 HTTP 请求使用的 TCP 连接。这样的好处是连接可以被重新使用,之后发送 HTTP 请求的时候不需要重新建立 TCP 连接,以及如果维持连接,那么 SSL 的开销也可以避免,两张图片是我短时间内两次访问 https://www.github.com 的时间统计:

头一次访问,有初始化连接和 SSL 开销

初始化连接和 SSL 开销消失了,说明使用的是同一个 TCP 连接

持久连接:既然维持 TCP 连接好处这么多,HTTP/1.1 就把 Connection 头写进标准,并且默认开启持久连接,除非请求中写明 Connection: close,那么浏览器和服务器之间是会维持一段时间的 TCP 连接,不会一个请求结束就断掉。

所以第一个问题的答案是:默认情况下建立 TCP 连接不会断开,只有在请求报头中声明 Connection: close 才会在请求完成后关闭连接。

第二个问题

一个 TCP 连接可以对应几个 HTTP 请求?

了解了第一个问题之后,其实这个问题已经有了答案,如果维持连接,一个 TCP 连接是可以发送多个 HTTP 请求的。

第三个问题

一个 TCP 连接中 HTTP 请求发送可以一起发送么(比如一起发三个请求,再三个响应一起接收)?

HTTP/1.1 存在一个问题,单个 TCP 连接在同一时刻只能处理一个请求,意思是说:两个请求的生命周期不能重叠,任意两个 HTTP 请求从开始到结束的时间在同一个 TCP 连接里不能重叠。

虽然 HTTP/1.1 规范中规定了 Pipelining 来试图解决这个问题,但是这个功能在浏览器中默认是关闭的。

先来看一下 Pipelining 是什么,RFC 2616 中规定了:

A client that supports persistent connections MAY "pipeline" its requests (i.e., send multiple requests without waiting for each response). A server MUST send its responses to those requests in the same order that the requests were received. 一个支持持久连接的客户端可以在一个连接中发送多个请求(不需要等待任意请求的响应)。收到请求的服务器必须按照请求收到的顺序发送响应。

至于标准为什么这么设定,我们可以大概推测一个原因:由于 HTTP/1.1 是个文本协议,同时返回的内容也并不能区分对应于哪个发送的请求,所以顺序必须维持一致。比如你向服务器发送了两个请求 GET/query?q=A 和 GET/query?q=B,服务器返回了两个结果,浏览器是没有办法根据响应结果来判断响应对应于哪一个请求的。

Pipelining 这种设想看起来比较美好,但是在实践中会出现许多问题:

  • 一些代理服务器不能正确的处理 HTTP Pipelining。
  • 正确的流水线实现是复杂的。
  • Head-of-line Blocking 连接头阻塞:在建立起一个 TCP 连接之后,假设客户端在这个连接连续向服务器发送了几个请求。按照标准,服务器应该按照收到请求的顺序返回结果,假设服务器在处理首个请求时花费了大量时间,那么后面所有的请求都需要等着首个请求结束才能响应。

所以现代浏览器默认是不开启 HTTP Pipelining 的。

但是,HTTP2 提供了 Multiplexing 多路传输特性,可以在一个 TCP 连接中同时完成多个 HTTP 请求。至于 Multiplexing 具体怎么实现的就是另一个问题了。我们可以看一下使用 HTTP2 的效果。

绿色是发起请求到请求返回的等待时间,蓝色是响应的下载时间,可以看到都是在同一个 Connection,并行完成的

所以这个问题也有了答案:在 HTTP/1.1 存在 Pipelining 技术可以完成这个多个请求同时发送,但是由于浏览器默认关闭,所以可以认为这是不可行的。在 HTTP2 中由于 Multiplexing 特点的存在,多个 HTTP 请求可以在同一个 TCP 连接中并行进行。

那么在 HTTP/1.1 时代,浏览器是如何提高页面加载效率的呢?主要有下面两点:

  1. 维持和服务器已经建立的 TCP 连接,在同一连接上顺序处理多个请求。
  2. 和服务器建立多个 TCP 连接。

第四个问题

为什么有的时候刷新页面不需要重新建立 SSL 连接?

在第一个问题的讨论中已经有答案了,TCP 连接有的时候会被浏览器和服务端维持一段时间。TCP 不需要重新建立,SSL 自然也会用之前的。

第五个问题

浏览器对同一 Host 建立 TCP 连接到数量有没有限制?

假设我们还处在 HTTP/1.1 时代,那个时候没有多路传输,当浏览器拿到一个有几十张图片的网页该怎么办呢?肯定不能只开一个 TCP 连接顺序下载,那样用户肯定等的很难受,但是如果每个图片都开一个 TCP 连接发 HTTP 请求,那电脑或者服务器都可能受不了,要是有 1000 张图片的话总不能开 1000 个TCP 连接吧,你的电脑同意 NAT 也不一定会同意。

所以答案是:有。Chrome 最多允许对同一个 Host 建立六个 TCP 连接。不同的浏览器有一些区别。

https://developers.google.com/web/tools/chrome-devtools/network/issues#queued-or-stalled-requestsdevelopers.google.com

那么回到最开始的问题,收到的 HTML 如果包含几十个图片标签,这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢?

如果图片都是 HTTPS 连接并且在同一个域名下,那么浏览器在 SSL 握手之后会和服务器商量能不能用 HTTP2,如果能的话就使用 Multiplexing 功能在这个连接上进行多路传输。不过也未必会所有挂在这个域名的资源都会使用一个 TCP 连接去获取,但是可以确定的是 Multiplexing 很可能会被用到。

如果发现用不了 HTTP2 呢?或者用不了 HTTPS(现实中的 HTTP2 都是在 HTTPS 上实现的,所以也就是只能使用 HTTP/1.1)。

那浏览器就会在一个 HOST 上建立多个 TCP 连接,连接数量的最大限制取决于浏览器设置,这些连接会在空闲的时候被浏览器用来发送新的请求,如果所有的连接都正在发送请求呢?那其他的请求就只能等等了

最近我总结Java面试题,以下2020最新整理出的BATJ资深Java必考题和答案截图 添加小助手VX:xuanwo008 领取资料备注好“CSDN”信息即可领取

 

 

 

面试题浏览器输入 URL 后会发生什么事情 目录 综述 一、浏览器查找域名的 IP 地址 二、浏览器web 服务器发送一个 HTTP 请求 三、服务器的永久重定向响应 301和302重定向对比 四、浏览器跟踪重定向地址 五、服务器处理请求 六、服务器返回一个 HTTP 响应 七、浏览器显示 HTML 综述 这是一道常用的面试题,针对后端方面,可以从以下两个角度回答问题: 网络传输过程(DNS 解析,HTTP 协议的格式, TCP 建立连接和传输, IP 转发过程,数据链路层转发过程) 应用程序(Tomcat... 阅读详情

相关推荐

面试官:从浏览器输入URL页面展示出来,中间发生了什么?

前言 这应该算是一个很经典的面试题了,前端工程师,后端工程师,包括网络工程师都有可能被问到。开放度很高,每个人都可以针对自己熟悉的部分,进行深入的讲解。 总体来说,分为如下几个部分 1.DNS解析 2.建立TCP连接,发送HTTP请求 3.服务端处理请求并返回HTTP响应 4.浏览器解析渲染页面 5.关闭连接 DNS解析 DNS解析就是获取服务器IP地址的过程。互联网上每一台计算机的唯一标识是它的IP地址,但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机,例如www.baid.

小识的博客 3577

十三:输入一个URL发生了什么?

DNS解析 TCP连接 发送http请求 服务器处理请求 浏览器解析渲染页面 连接结束

qq_38022739的博客 438

一个 TCP 连接可以发多少个 HTTP 请求?

曾经有这么一道面试题:从 URL浏览器被被输入页面展现过程发生了什么? 相信大多数准备过的同学都能回答出来,但是如果继续问:收到的 HTML 如果包含几十个图片标签,这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢? 要搞懂这个问题,我们需要先解决下面五个问题: 现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开?什么...

HelloWorld搬运工 8697

Java面试输入URL浏览器显示页面发生了什么

首先输入URL 浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。 在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。 浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。 握手成功后,浏览器向服务器发送http请求,请求数据包。 服务器处理收到的请求,将数据返回至浏览器 浏...

胃病的不良少彦 500

http链接和请求相关问题

一个tcp连接可以发送集合http请求 答:在http1.1时 一个tcp连接建立后发送一个http请求连接就会断开 称为短连接 某些服务器对 Connection: keep-alive 的 Header 进行了支持。意思是说,完成这个 HTTP 请求之后,不要断开 HTTP 请求使用的 TCP 连接。这样的好处是连接可以被重新使用,之后发送 HTTP 请求的时候不需要重新建立 TCP 连接。 持久连接:既然维持 TCP 连接好处这么多,HTTP/1.1 就把 Connection 头写进标准,并且默..

cool_and_gentle的博客 604

面试题:在浏览器输入url发生了什么

W3C对浏览器的实现标准如下图所示,回答了该问题 重定向 缓存 DNS解析 TCP连接 HTTP请求 HTTP响应 渲染页面 装载 下面是详细介绍 浏览器实现标准 performance.timing属性介绍 属性说明: 是一个无符号long long 型的毫秒数 表示某个时间的unix时间戳 PerformanceTiming.navigationStart:浏览器上下文上一个页面u...

MoveLikeRabbit的博客 710

面试题:一个 URL浏览器输入页面展现过程发生了什么

这是一个经典的面试题:一个URL浏览器页面过程发生了什么,那么今天就带大家九浅一深来研究一下

qq_32139981的博客 1093

经典面试题:从 URL浏览器被被输入页面展现过程发生了什么?

作者丨松若章 来源丨http://1t.click/ataf 曾经有这么一道经典面试题:从 URL浏览器被被输入页面展现过程发生了什么? 相信大多数准备过的同学都能回答出来,但是如果继续问:收到的 HTML 如果包含几十个图片标签,这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢? 要搞懂这个问题,我们需要先解决下面五个问题: ...

我惠依旧的博客 605

经典面试题:从浏览器输入 URL页面展现过程发生了什么?

点击上方蓝色字体,选择“置顶公众号”优质文章,第一时间送达来源:https://urlify.cn/q6Ffiu 正文 曾经有这么一道经典面试题:从浏览器输入 URL页面展现过程发生了什么?相信大多数准备过的同学都能回答出来,但是如果继续问:收到的 HTML 如果包含几十个图片标签,这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢?要搞懂这个问题,我们需要先...

weixin_37097680的博客 201

浏览器输入URL页面展示发生了什么?

其实从填写上url按下回车后,我们就进入了第一步就是 DNS 解析过程,首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip,浏览器首先会寻找缓存,查看缓存中是否有记录缓存中没有则查找系统的 hosts 文件中是否有记录,如果没有缓存则查询 DNS 服务器,得到服务器的 ip 地址后,浏览器根据这个 ip 以及相应的端口号发送连接请求;当然如果DNS服务器中没有解析成功,他会向上一步获得的顶级DNS服务器发送解析请求。客户端和服务端都需要直到各自可收发,因此需要三次握手。............

商务合作欢迎私信我 4万+

浏览器输入URL后到底发生了什么?

详细介绍了浏览器输入URL后到底发生了什么。深入了解整个过程对计算机网络体系结构有会一个宏观、清晰的认识!

只想和你一起进步 3736

面试官问我:从地址栏输入URL到显示页面发生了什么?(建议收藏)

文章根据B站 计算机网络微课堂(有字幕无背景音乐版)(陆续更新中…) 视频整理。 本文收录于 计算机网络,欢迎订阅。 目录前言1、DNS解析2、TCP连接3、发起HTTP请求4、处理请求5、浏览器渲染6、TCP连接断开7、总结 前言 从地址栏输入URL到显示页面发生了什么?这是一道面试经常会考的面试题。那么下面我们就来探讨一下从你输入URL后到响应,都经历了哪些过程。 1、DNS解析 我们在用户PC中使用网页浏览器来访问外部服务器的内容,在网页浏览器的地址栏中输入外部服务器的域名。比如我们输入ww.

林深不见鹿 的博客 1万+

浏览器地址栏输入URL后,到页面渲染出来,整个过程发生了什么?

从一道面试题来看前端页面的生命周期:从浏览器地址栏输入URL后,到页面渲染出来,整个过程发生了什么?

Whoopsina的博客 3370

前端经典面试题:在浏览器输入 URL页面加载显示完成的过程?从输入URL页面加载发生了什么?

总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 具体过程 资料: https://segmentfault.com/a/1190000006879700https://segmentfault.com/a/1190000006879700 ......

南北极之间 3169

输入url页面加载完的过程中都发生了什么事情

http://blog.aijc.net/server/2015/11/03/%E4%BB%8E%E8%BE%93%E5%85%A5URL%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E5%AE%8C%E7%9A%84%E8%BF%87%E7%A8%8B%E4%B8%AD%E9%83%BD%E5%8F%91%E7%94%9F%E4%BA%86%E4%B

dojiangv的专栏 3万+

前端面试题:从url页面展现,这之中发生了什么?

我们平常在地址栏里输入一些网址时,页面很快就会出现,但在这之中到底发生了什么事情呢? 大概是这样的流程: 在浏览器的地址栏中敲入了url 域名解析 服务器处理请求 浏览器处理 绘制网页 一、在浏览器的地址栏中敲入了url首先,我们要知道url是什么?URL(Uniform Resource Locator),统一资源定位符,用于定位互联网上的资源,实际上就是网站网址。url的格式一般为: 协议类

距离的博客 3639

详细解释从输入 url页面渲染发生什么,一篇文章总结所有浏览器原理 + 计算机网络的面试题,建议收藏

本篇文章从一个经典的面试题入手,几乎涵盖了所有关于浏览器工作原理和计算机网络的面试题目,内容比较长,东西非常多,难免疏漏,有不对的地方欢迎指正。经典面试题【从输入 url页面渲染发生什么】,我将从3个主要模块把这块的知识点串成串,分别是浏览器工作原理、计算机网络请求、dom渲染相关。在之前我的已经大概描述了整个过程,可以说这篇文章是之前的文章的扩展版本。

有一棵树的博客 1403

输入url页面加载完成发生了什么

输入url页面加载完成发生了什么详解 这是一道经典的面试题,这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度。当然我写的这些也只是我的一些简单的理解,从前端的角度出发,我觉得首先回答必须包括几个基本的点,然后在根据你的理解深入回答。 1、浏览器的地址栏输入URL并按下回车。 2、浏览器查找当前URL是否存在缓存,并比较...

田兴的博客 3852
上一篇: 真的懂源码吗?Spring看明白了吗?这20道源码面试题答得出吗?
下一篇: 码住!架构师精心整理的Spring Boot从入门到实践文档
java架构学习基地
博客等级 码龄6年 8粉丝 54原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值