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

收起评论