面试现场:从 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 连接,连接数量的最大限制取决于浏览器设置,这些连接会在空闲的时候被浏览器用来发送新的请求。

如果所有的连接都正在发送请求呢?那其他的请求就只能等等了。

感受一把面试官通过一道题目引出的关于 TCP 的 5 个连环炮!的更多相关文章

  1. C++ 坑人系列(1): 让面试官晕倒的题目

     今天和几位同仁一起探讨了一下C++的一些基础知识,在座的同仁都是行家了,有的多次当过C++技术面试官.不过我出的题过于刁钻: 不是看起来太难,而是看起来极其容易,但是其实非常难! 结果一圈下来,3道 ...

  2. 【Java】面试官灵魂拷问:if语句执行完else语句真的不会再执行吗?

    写在前面 最近跳槽找工作的朋友确实不少,遇到的面试题也是千奇百怪,这不,一名读者朋友面试时,被面试官问到了一个直击灵魂的问题:if 语句执行完else语句真的不会再执行吗?这个奇葩的问题把这名读者问倒 ...

  3. 原来select语句在MySQL中是这样执行的!看完又涨见识了!这回我要碾压面试官!

    大家好,我是冰河~~ MySQL作为互联网行业使用最多的关系型数据库之一,与其免费.开源的特性是密不可分的.然而,很多小伙伴工作了很多年,只知道使用MySQL进行CRUD操作,这也导致很多小伙伴工作多 ...

  4. 面试一个百度T7程序员,一道简单的题没答上来!网友却都在吐槽面试官!

    程序员面试时都考些什么? 一个面试官得意洋洋地说自己面了一个百度T7,出了一道coding题,结果对方连最长上升子序列都写不出来.   楼主本想嘲弄一下百度T7的代码水平低,没想到网友们炸开了锅,纷纷 ...

  5. MySQL 三万字精华总结 + 面试100 问,吊打面试官绰绰有余(收藏系列)

    写在之前:不建议那种上来就是各种面试题罗列,然后背书式的去记忆,对技术的提升帮助很小,对正经面试也没什么帮助,有点东西的面试官深挖下就懵逼了. 个人建议把面试题看作是费曼学习法中的回顾.简化的环节,准 ...

  6. 书评<<剑指offer 名企面试官精讲典型编程题>>

      前前后后阅读了一周, 感慨很多, 面试考察的是一个人的综合能力, 这一点从面试官的角度去解读, 确实对面试的理解更立体. *) 具体考察的点1) 扎实的基础2) 高质量的代码3) 清晰的思路4) ...

  7. 金三银四,如何征服面试官,拿到Offer

    又到了茶余饭后的时间,想想写点什么,掐指一算,噢呦,快到3月份了,职场的金三银四跳槽季又来了,不同的是今年比往年「冷」一些,形式更加严峻一些,大家多多少少可能都听到或看到一些信息,就是好多公司在优化裁 ...

  8. 如何征服面试官,拿到Offer [转]

    转自 https://my.oschina.net/cccyb/blog/3012768 又到了茶余饭后的时间,想想写点什么,掐指一算,噢呦,快到3月份了,职场的金三银四跳槽季又来了,不同的是今年比往 ...

  9. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

随机推荐

  1. C# SendAysnc 超时

      业务方法 @@@code public override async Task<List<(IPEndPoint endPoint, byte[] data)>> Send ...

  2. SVN安装及其汉化

    1.百度搜索SVN,点击官网进去 2.点击download进入下载页面,选择合适的安装包 3.当前页面往下拉,看到汉化包下载页面,要注意版本 4.2个下载完,先安装软件在安装汉化包,要注意软件和汉化包 ...

  3. ssdb make 失败 autoconf required

    ERROR! autoconf required! install autoconf first Makefile:4: build_config.mk: No such file or direct ...

  4. GithubPages+Hexo博客搭建记录

    目录 前言 安装Node.js 安装Git 安装Hexo 查看效果 建立Github Pages 注册Github帐户 建立托管博客的仓库 制作SSH密钥 添加公钥到Github 测试连接 把本地的博 ...

  5. 将Excel表结构导入到Powerdesigner

    我们经常会在excel中设计整理表结构,整理完需要导入到Powerdesigner中,可以通过以下脚本来实现快速,具体操作方法: 打开PowerDesigner,新建模型,点击Tools|Execut ...

  6. <String> 161 358

    161. One Edit Distance 1. 两个字符串的长度之差大于1,直接返回False. 2. 两个字符串的长度之差等于1,长的那个字符串去掉一个字符,剩下的应该和短的字符串相同. 3. ...

  7. java之集合(Set、List、Map)

    java集合类存放于java,uti包中,是一个用于存放对象的容器. 集合只能存放对象,比如存入的是int型数据1,那么它会自动转换成Integer包装类后再存入: 集合存放的是多个对象的引用,对象本 ...

  8. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

  9. yii2自定义操作按钮

    [ 'class' => 'yii\grid\ActionColumn', 'header' => 'Html::a('操作')',//表单头 'template' => '{vie ...

  10. HDU 1081 To the Max 最大子矩阵(动态规划求最大连续子序列和)

    Description Given a two-dimensional array of positive and negative integers, a sub-rectangle is any ...