浏览器工作原理与实践
李兵
前盛大创新院高级研究员
55398 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 46 讲
浏览器工作原理与实践
15
15
1.0x
00:00/00:00
登录|注册

03 | HTTP请求流程:为什么很多站点第二次打开速度会很快?

上一篇文章中我介绍了 TCP 协议是如何保证数据完整传输的,相信你还记得,一个 TCP 连接过程包括了建立连接、传输数据和断开连接三个阶段。
而 HTTP 协议,正是建立在 TCP 连接基础之上的。HTTP 是一种允许浏览器向服务器获取资源的协议,是 Web 的基础通常由浏览器发起请求,用来获取不同类型的文件,例如 HTML 文件、CSS 文件、JavaScript 文件、图片、视频等。此外,HTTP 也是浏览器使用最广的协议,所以要想学好浏览器,就要先深入了解 HTTP。
不知道你是否有过下面这些疑问:
为什么通常在第一次访问一个站点时,打开速度很慢,当再次访问这个站点时,速度就很快了?
当登录过一个网站之后,下次再访问该站点,就已经处于登录状态了,这是怎么做到的呢?
这一切的秘密都隐藏在 HTTP 的请求过程中。所以,在今天这篇文章中,我将通过分析一个 HTTP 请求过程中每一步的状态来带你了解完整的 HTTP 请求过程,希望你看完这篇文章后,能够对 HTTP 协议有个全新的认识。

浏览器端发起 HTTP 请求流程

如果你在浏览器地址栏里键入极客时间网站的地址:http://time.geekbang.org/index.html, 那么接下来,浏览器会完成哪些动作呢?下面我们就一步一步详细“追踪”下。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《浏览器工作原理与实践》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(149)

  • 最新
  • 精选
  • mfist
    1 首先猜测最可能的出问题的地方,网络传输丢包比较严重,需要不断重传。然后通过ping curl看看对应的时延高不高。 2 然后通过wireshake看看具体哪里出了问题。 3 假如别人访问很快,自己电脑很慢,就要看看自己客户端是否有问题了。 感觉平常碰到很多http问题,基本都能通过上面方式搞定

    作者回复: 👍

    9
    128
  • 一步
    对于浏览器缓存地方的选择一直搞不明白其中的原理,在浏览器中访问的时候打开network面板,发现缓存的来源有的from disk有的是from memory。对于资源什么情况下缓存到硬盘什么时候缓存到内存,想请教一下老师

    作者回复: 这是浏览器的三级缓存机制,使用memory cache比disk cache 的访问速度要快,但是具体什么规则等我回头看下源码再来回答你了。 还有另外一种cache,是service worker的cache。

    28
    79
  • Hurry
    使用 chrome network 面板,看那个 瀑布图 中每个阶段的含义,就可以判断问题出现在那个方向了,每个阶段的含义,https://developers.google.com/web/tools/chrome-devtools/network/reference#timing-explanation 举个例子 Content Download 如果太长,很有可能是下载的资源太大,但也有可能是网络慢导致的下载太慢,简单计算一下,在例如 Waiting (TTFB) 这个太长的话,有可能是网络慢,或者就是 后端处理时间过长导致的,至少可以排查掉前端原因,还有很多,例如 DNS lookup 等,但是最终要确认具体哪里慢,最好是结合系统日志去分析

    作者回复: 结合网络模块来分析,总结的挺好

    5
    52
  • XWL
    浏览器刷新操作,ctrl+F5和F5有什么区别

    作者回复: 一个是强制刷新,也就是资源都走网络。 一个是正常处理流程。 比如通过网络面板,打开一个站点,再使用强制刷新,可以看到如下信息 176 requests 3.1 MB transferred 3.5 MB resources Finish: 26.30 s DOMContentLoaded: 5.04 s Load: 14.88 s 如果使用正常的刷新,看到的信息如下: 171 requests 419 KB transferred 3.2 MB resources Finish: 25.09 s DOMContentLoaded: 1.41 s Load: 6.24 s 其中的transferred是真正的网络传输的数据,使用强制刷新,传输的数据体积就大多了,而且请求时间也变得更长了。

    4
    42
  • 蚂蚁内推+v
    set cookie 会不会有安全问题,麻烦老师指导下

    作者回复: cookie是不安全的,比如黑客可以通过一些手段插入一些脚本到你的页面里面(具体一些途径我们浏览器安全篇再讲),通过脚本获取到你的cookie数据,然后就可以利用cookie做一些坏事了。 当然也有一些方法规避,常用的一个是将部分cookie设置成httponly的属性,设置了httponly属性后cookie,就无法通过js脚本来读取了,只是在发送http请求时候会被带上! 当然还有一些其他防范的方法,这个同样咱们后面在聊!

    3
    40
  • CMS
    Chrome 有个机制,同一个域名同时最多只能建立 6 个 TCP 连接,如果在同一个域名下同时有 10 个请求发生,那么其中 4 个请求会进入排队等待状态,直至进行中的请求完成。 是指同一个域名下的6个并发请求么。我理解建立一个tcp连接,可以处理多个请求吧? 这一块蒙了,看好多人问这个

    作者回复: http/1.1 一个tcp同时只能处理一个请求,浏览器会为每个域名维护6个tcp连接! 但是每个tcp连接是可以复用的,也就是处理完一个请求之后,不断开这个tcp连接,可以用来处理下个http请求! 不过http2是可以并行请求资源的,所以如果使用http2,浏览器只会为每个域名维护一个tcp连接

    10
    37
  • 月隐千山
    老师,在做前端页面的时候,是否可以设置当前页面是否可以被缓存,以及哪些部分可以被缓存?还是说整个缓存机制都是由浏览器自己控制的?

    作者回复: 是没有办法通过前端代码来控制缓存的,缓存是后端或者部署的同学来控制的,但是前端同学应该知道那些内容要被缓存,和后端或者部署的同学配合来打!

    10
    34
  • Geek_0d3179
    老师您好~有个问题困扰我了。希望您能解答我,十分感谢。http2同个域名只能维持一个长连接。那我现在打开了一个域名下的a页面,然后又打开了这个域名的b页面,那这个b页面是新开一个tcp长连接吗?还是会用a页面的长连接?换句话说,维持一个tcp长连接,指的是一个页面维持一个?还是整个浏览器维持一个?还是同一个渲染进程维持一个?

    作者回复: 浏览器为用同一个域名只维护一个TCP连接。 你从通过Chrome打开chrome://net-export/ 这个地址,然后记录网络过程。 最后在使用这个https://netlog-viewer.appspot.com/ 打开你日志文件,就能看到h2的详细信息了。

    2
    29
  • liu_xm
    同域名只能建立6个tcp链接的话,那加载大量图片或者其他资源的时候不是很卡呢?

    作者回复: 是的,通常如图片这种静态资源都是直接配置到cdn上的

    11
    24
  • peter
    请问:请求行和请求头是发送两次吗? 从文章的文字来看,是发送两次。 但我感觉是发送一次,即发送一次请求,该请求包含请求行和请求头。

    作者回复: 对,只发送一次。 问下文章什么地方让你感觉是发送了两次啊? 我检查下。

    17
    16
收起评论
显示
设置
留言
99+
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部