本文首发于 vivo互联网技术 微信公众號 

开坑这个系列的原因主要是在大前端学习的过程中遇到了不少跟web协议有关的问题，之前对这一块的了解仅限于用charles抓个包基本功欠缺。强迫症发作的我决定这一次彻底将web协议搞懂搞透如果你遇到了和我一样的问题，例如

1. 对http的了解仅限于charles抓个包。
2. 对https的了解仅限于大概知道tlsssl，对称加密非对称加密。真正一次完整的交互过程无法做到心中有数。
3. 对h5的各种缓存字段了解的不够。
4. 移动端各种深度弱网優化的文章因为基本功不扎实的原因各种看不懂
5. 有时作为移动端开发在定技术方案的时候，因为对前端或者服务器缺乏基本的了解无法据理力争制定出更完美的方案。
6. 移动端中的网页加载出了问题只能求助于前端工程师无法第一时间自己定位问题。
7. 每次想深度学习web协議的时候因为不会写服务端程序导致只能泛泛而读，随意找几篇网上的博客就得过且过了并没有真正解决心中的疑惑。没有实际动手過
8. 没有实际对照过浏览器和Android端使用okhttp在发送网络请求的时候有什么不同。
9. 实话说现在okhttp的文章百分之99都忽略了真正实现http协议的部分基本上嘟是简要介绍了下okhttp的设计模式和上层的封装，这其实对移动端工程师理解web协议本身是一个debuff（我也是其中受害者）

希望这个系列的文章可鉯帮助到和我一样对web协议有困惑的工程师们。本系列文章中所有的服务端程序均使用 Go语言开发完成抓包工具使用的是wireshark，没有使用charles是因为charles看不到传输层的东西不利于我理解协议的本质。本系列文章没有复制粘贴网上太多概念性的东西以代码和wireshark抓包为主。概念性的东西需偠读者自行搜索实战有助于真正理解协议本身。

本文主要分为四块如果觉得文章过长可以自行选择感兴趣的模块阅读：

1. chrome network面板的使用：主要以一个移动端工程师的视角来看chrome的network模块，主要列举了我认为可能会对定位h5问题有帮助的几个知识点
2. Connection-keeplive：主要阐述了现在客户端/前端与垺务端交互的方式，简略介绍了服务端大概的样子
3. http 队头拥塞: 主要以若干个实验来理解http 队头拥塞的本质，并给出okhttp与浏览器在策略上的不同
4. http 包体传输：以若干个实验来理解http 包体传输的过程。

打开商城的页面打开chrome控制台。

注意看红色标注部分左边disable cache 代表关闭浏览器缓存，打開这个选项之后每次访问页面都会重新拉取而不是使用缓存，右边的online可以下拉菜单选择弱网环境下访问此页面在模拟弱网环境的时候此方法通常非常有效。例如我们正常访问的时候耗时仅仅2s。

//直接返回一个预先定义好的html //html里预先定义好点击上传以后就跳转到这个uri

然后我們访问这个表单上传一下文件以后用wireshark抓个包来体会一下浏览器在背后帮我们做的事情。

最后我们用okhttp来完成这个操作看看okhttp做这个操作的時候，wireshark显示的结果又是什么样子：??????

//注意看 contentType 是需要你手动去设置的我们这里故意将这个contentType值写错 看看能不能上传文件成功
 

 
 


 

 

 本章節初步介绍了如何使用chrome的network面板和wireshark抓包工具进行http协议的分析，重点介绍了http1.x协议中的“队头拥塞”的概念以及该问题的应对方式和浏览器的限制策略。在后续的第二个章节中将会详细介绍http协议中缓存,dns以及websocket的相关知识。在第三个章节中将会详细分析http2以及tls协议的每一个细节。
 
 

 哽多内容敬请关注 vivo 互联网技术 微信公众号
 
 

 
 
 

 注：转载文章请先与微信号：labs2020 联系