03 | HTTP请求流程：为什么很多站点第二次打开速度会很快？
该思维导图由 AI 生成，仅供参考
浏览器端发起 HTTP 请求流程
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
HTTP请求流程是Web页面加载的关键过程，本文深入解析了浏览器端发起HTTP请求和服务器端处理HTTP请求的详细流程。首先，浏览器构建请求行信息，然后查找缓存，准备IP地址和端口，等待TCP队列，建立TCP连接，最终发送HTTP请求。服务器接收请求后，返回响应数据给浏览器，并在必要时保持TCP连接。文章通过分析HTTP请求过程中每一步的状态，揭示了为什么第二次打开网站速度会更快以及登录状态保持的原理。这篇文章对于理解HTTP协议和Web页面加载过程具有重要意义，为读者提供了全面的HTTP请求流程解析。 文章还介绍了重定向的操作，以及解答了两个常见问题：为什么很多站点第二次打开速度会很快以及登录状态是如何保持的。对于第一个问题，文章解释了站点第二次访问能够秒开的原因，即浏览器缓存了很多资源，避免了重复的网络请求，同时也缓存了DNS数据，省去了DNS查询环节。对于第二个问题，文章详细介绍了登录状态是如何通过使用Cookie来实现的，包括用户登录页面提交信息给服务器、服务器生成含有用户信息的页面数据并发送给浏览器等流程。 通过系统的讲解，读者可以了解一个HTTP完整的工作流程，以及如何分析页面的网络加载时间。文章还提醒读者在学习过程中学会提问，通过问题分析并学习相关知识点，帮助读者站在更高维度去查看整体框架。整体而言，本文内容丰富、重要，对读者学习和工作都具有帮助。
《浏览器工作原理与实践》，新⼈⾸单¥59
全部留言(151)
- 最新
- 精选
mfist1 首先猜测最可能的出问题的地方，网络传输丢包比较严重，需要不断重传。然后通过ping curl看看对应的时延高不高。 2 然后通过wireshake看看具体哪里出了问题。 3 假如别人访问很快，自己电脑很慢，就要看看自己客户端是否有问题了。 感觉平常碰到很多http问题，基本都能通过上面方式搞定作者回复: 👍
2019-08-109134
奕对于浏览器缓存地方的选择一直搞不明白其中的原理，在浏览器中访问的时候打开network面板，发现缓存的来源有的from disk有的是from memory。对于资源什么情况下缓存到硬盘什么时候缓存到内存，想请教一下老师作者回复: 这是浏览器的三级缓存机制，使用memory cache比disk cache 的访问速度要快，但是具体什么规则等我回头看下源码再来回答你了。 还有另外一种cache，是service worker的cache。
2019-08-102879
Hurry使用 chrome network 面板，看那个 瀑布图 中每个阶段的含义，就可以判断问题出现在那个方向了，每个阶段的含义，https://developers.google.com/web/tools/chrome-devtools/network/reference#timing-explanation 举个例子 Content Download 如果太长，很有可能是下载的资源太大，但也有可能是网络慢导致的下载太慢，简单计算一下，在例如 Waiting (TTFB) 这个太长的话，有可能是网络慢，或者就是 后端处理时间过长导致的，至少可以排查掉前端原因，还有很多，例如 DNS lookup 等，但是最终要确认具体哪里慢，最好是结合系统日志去分析作者回复: 结合网络模块来分析，总结的挺好
2019-08-13553
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-12444
蚂蚁内推+vset cookie 会不会有安全问题，麻烦老师指导下作者回复: cookie是不安全的，比如黑客可以通过一些手段插入一些脚本到你的页面里面（具体一些途径我们浏览器安全篇再讲），通过脚本获取到你的cookie数据，然后就可以利用cookie做一些坏事了。 当然也有一些方法规避，常用的一个是将部分cookie设置成httponly的属性，设置了httponly属性后cookie，就无法通过js脚本来读取了，只是在发送http请求时候会被带上！ 当然还有一些其他防范的方法，这个同样咱们后面在聊！
2019-08-12342
CMSChrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。 是指同一个域名下的6个并发请求么。我理解建立一个tcp连接，可以处理多个请求吧？ 这一块蒙了，看好多人问这个作者回复: http/1.1 一个tcp同时只能处理一个请求，浏览器会为每个域名维护6个tcp连接！ 但是每个tcp连接是可以复用的，也就是处理完一个请求之后，不断开这个tcp连接，可以用来处理下个http请求！ 不过http2是可以并行请求资源的，所以如果使用http2，浏览器只会为每个域名维护一个tcp连接
2019-11-071040
月隐千山老师，在做前端页面的时候，是否可以设置当前页面是否可以被缓存，以及哪些部分可以被缓存？还是说整个缓存机制都是由浏览器自己控制的？作者回复: 是没有办法通过前端代码来控制缓存的，缓存是后端或者部署的同学来控制的，但是前端同学应该知道那些内容要被缓存，和后端或者部署的同学配合来打！
2019-08-101036- Geek_0d3179老师您好~有个问题困扰我了。希望您能解答我，十分感谢。http2同个域名只能维持一个长连接。那我现在打开了一个域名下的a页面，然后又打开了这个域名的b页面，那这个b页面是新开一个tcp长连接吗？还是会用a页面的长连接？换句话说，维持一个tcp长连接，指的是一个页面维持一个？还是整个浏览器维持一个？还是同一个渲染进程维持一个？
作者回复: 浏览器为用同一个域名只维护一个TCP连接。 你从通过Chrome打开chrome://net-export/ 这个地址，然后记录网络过程。 最后在使用这个https://netlog-viewer.appspot.com/ 打开你日志文件，就能看到h2的详细信息了。
2019-11-03230 
liu_xm同域名只能建立6个tcp链接的话，那加载大量图片或者其他资源的时候不是很卡呢？作者回复: 是的，通常如图片这种静态资源都是直接配置到cdn上的
2019-08-101224
peter请问：请求行和请求头是发送两次吗？ 从文章的文字来看，是发送两次。 但我感觉是发送一次，即发送一次请求，该请求包含请求行和请求头。作者回复: 对，只发送一次。 问下文章什么地方让你感觉是发送了两次啊？ 我检查下。
2019-08-121717