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

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

Cookie
页面资源缓存
DNS缓存
缓存
分析页面网络加载时间
分析问题的思路
HTTP请求示意图
登录状态是如何保持的?
为什么很多站点第二次打开速度会很快?
重定向
断开连接
返回请求
发送HTTP请求
建立TCP连接
等待TCP队列
准备IP地址和端口
查找缓存
构建请求
浏览器使用最广的协议
Web的基础协议
允许浏览器向服务器获取资源
建立在TCP连接基础之上
思考时间
总结
问题解答
服务器端处理HTTP请求流程
浏览器端发起HTTP请求流程
HTTP协议
HTTP请求流程

该思维导图由 AI 生成,仅供参考

上一篇文章中我介绍了 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
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

HTTP请求流程是Web页面加载的关键过程,本文深入解析了浏览器端发起HTTP请求和服务器端处理HTTP请求的详细流程。首先,浏览器构建请求行信息,然后查找缓存,准备IP地址和端口,等待TCP队列,建立TCP连接,最终发送HTTP请求。服务器接收请求后,返回响应数据给浏览器,并在必要时保持TCP连接。文章通过分析HTTP请求过程中每一步的状态,揭示了为什么第二次打开网站速度会更快以及登录状态保持的原理。这篇文章对于理解HTTP协议和Web页面加载过程具有重要意义,为读者提供了全面的HTTP请求流程解析。 文章还介绍了重定向的操作,以及解答了两个常见问题:为什么很多站点第二次打开速度会很快以及登录状态是如何保持的。对于第一个问题,文章解释了站点第二次访问能够秒开的原因,即浏览器缓存了很多资源,避免了重复的网络请求,同时也缓存了DNS数据,省去了DNS查询环节。对于第二个问题,文章详细介绍了登录状态是如何通过使用Cookie来实现的,包括用户登录页面提交信息给服务器、服务器生成含有用户信息的页面数据并发送给浏览器等流程。 通过系统的讲解,读者可以了解一个HTTP完整的工作流程,以及如何分析页面的网络加载时间。文章还提醒读者在学习过程中学会提问,通过问题分析并学习相关知识点,帮助读者站在更高维度去查看整体框架。整体而言,本文内容丰富、重要,对读者学习和工作都具有帮助。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《浏览器工作原理与实践》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(151)

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

    作者回复: 👍

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

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

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

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

    2019-08-13
    5
    53
  • 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是真正的网络传输的数据,使用强制刷新,传输的数据体积就大多了,而且请求时间也变得更长了。

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

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

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

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

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

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

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

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

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

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

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

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

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