[前端漫谈]浅谈 HTTP 学习路径

2019-11-05 admin

0x000 概述

最近专注于 HTTP 的学习,这篇文章浅谈一下我学习 HTTP 过程中的心得,当作过渡性总结。如果能对各位有所帮助,最好不过。

0x001 HTTP 协议

说起 HTTP,自然逃不过 HTTP 协议本身,以下是我的学习资料:

《图解 HTTP》是入门精品,是初学者的福音。

《HTTP 权威指南》对于深入学习的需求也可以满足。

深入学习之后我觉得应该回归本质,也就是 HTTP 规范自身,rfc7230-7235 就是这接下来的不二选择。

其实前两本书已经够了,可是我发现单纯看书无法掌握技术发展的脉络,譬如 HTTP/0.9、HTTP/1.0、HTTP/1.1、HTTP/2、HTTP/3 是如何发展的。规范虽然晦涩,却有很明显的历史发展性;虽然不够详细,却非常全面。

http/0.9 协议很简单,只有一行,就是simple-request

SimpleRequest     =        GET <uri> CrLf

http/1.0 和 和 HTTP/1.1 变化不大。

  • 多部署服务器
  • 默认 keep-alive 持久连接
  • 引入传输编码

有人说作为前端,HTTP 协议使用的并不深,不需要掌握太深太细。但是我在学习之后却发现并不是这样,学习是一回事,实践是另一回事。

比如:

  1. 在往常思考 HTTP 的时候,总是将请求分为 client 和 server 来思考。

client-network-server

对于 network 中的一切都是忽略不计的,但深入学习之后才会发现,真实世界的网络拓扑可是能是这样的

client-device-server

并且最后处理我们请求的并不一定是目标服务器,而是中间的某个设备,可能是代理,也可能是缓存服务,或者网关。

  1. 我以为 HTTP 的报文结构从来是这样的:
request-ling/status-line
header-section

request-body/response-body

但其实也有可能是(Range Request):

HTTP/1.1 206 Partial Content
Date: Wed, 15 Nov 1995 06:25:24 GMT
Last-Modified: Wed, 15 Nov 1995 04:58:08 GMT
Content-Length: 1741
Content-Type: multipart/byteranges; boundary=THIS_STRING_SEPARATES

--THIS_STRING_SEPARATES
Content-Type: application/pdf
Content-Range: bytes 500-999/8000

...the first range...
--THIS_STRING_SEPARATES
Content-Type: application/pdf
Content-Range: bytes 7000-7999/8000

...the second range
--THIS_STRING_SEPARATES--

看见了吗?HTTP 的 Header 并不是只能出现在 request-line/response-line 下面

  1. Last-Modified、If-Modified-Since、ETag、If-Match…

我总是在缓存相关的文章中看到这些头部,所以我以为这些头部就是专门用来做缓存控制的,但是其实这些头部应该是属于 Preconditional Headers Field,是用来发起 Conditional Request,是为了防止多人同时编辑导致“update lost”问题的。比如两个人两个了 GET 了一个资源,该资源的 ETag 是 xx001,两个人修改资源之后 POST 到服务端,这两个 POST 请求带有 If-Match: xx001,其中一个请求 a 被接收了,资源更新,则新资源的 ETag 为 xx002,第二个人请求到来的时候,就可以通过检测资源的 ETag 和 If-Match 中是否一致,如果不一致,说明资源已经被修改。则这个资源不应该被更新,否则将会覆盖第一个人的更新。相当于一个锁。当然也用来做缓存控制,但是容易产生概念上的误解。

所以为什么要深入学习 HTTP,甚至学习 HTTP 协议本身呢?原因如下:

  1. 从大局全面理解技术,避免一叶障目,不见泰山的情况,脱离信息茧房。(不能因为你只玩过游乐园的摩天轮,就认为这是一个摩天轮游乐园,毕竟人家可能还有海底世界和动物园呢)
  2. 掌握技术在历史发展中的脉络,更好理解技术的存在的原因和未来发展的方向。
  3. 不再人云亦云,对技术持有自己的观点。

0x002 基于 HTTP 之上的技术

在前端,通常我们不会直接操作 HTTP,而是通过浏览器提供的接口来实现这个过程:

URI 和 URL 是不一样,应该详细了解 URL 的构成。

同源策略是用户代理安全基石之一,许多功能都是基于同源策略之上,在理解跨域资源共享之前还是先理解一下同源策略吧。

注意:cookie 是一个痛苦的例外,一来它可以在头部中出现多次,二来它并没有使用同源策略。

XMLHTTPRequest 叫这名字存粹是历史原因,和功能无关。

Fetch 和 XMLHTTPRequest 就是我们最常用的底层对象了。

有人觉得 jQuery 已经落后于时代了,完全不需要去了解。但是作为当年最火的项目,它的每一个实现在当时都是最佳实践。我们学习历史的原因是为了在当时历史条件下,分析一个技术解决问题的思路,而不仅仅看它在当代能有啥用。

axios 真是前端瑞士军刀。

还有一些工具:

Fiddler和 Charles 一样,都是网络调试利器,我常用 Charles 抓包修改请求和响应测试各种数据情况下的交互。

wireshark 也是抓包,但是只是在需要分析底层报文的时候才用。

postman 则是测试 restful 接口、团队合作的好东西。

curl 在无界面环境是不错的选择,比如 linux。

0x003 HTTPS

HTTP 之后自然轮到 HTTPS 了:

我们需要知道浏览器如何和 HTTPS 建立连接,并传输数据的。

0x004 TSL

在 HTTPS 的底层是 TSL,本身是可以作为独立的技术存在的,有握手协议和消息协议。

0x005 X.509

浏览器在建立 HTTPS 连接的时候,需要验证证书,想要知道证书的详细格式,就需要了解 X.509。

0x006 openssl

生成、转化、验证证书的库/工具,可以用来模拟验证过程,或者自己成为 CA 颁发证书。

0x007 http 服务

Nginx 和 Apache 搭建 HTTP 服务器,配合 openSSL 做配置 HTTPS 实验。

Node http 模块可以自己搭建一个 web 服务器。

http-server 则是静态服务器的命令行工具。

0x008 HTTP2

支持帧传输、二进制流、头部压缩、服务端推送等。

0x009 TCP/IP

这里只做记录。

0x010 HTTP3

底层抛弃了 TCP 协议,转而使用基于 UDP 协议的 Quic 协议。目前还是草稿版本。

0x011 UDP

这里只做记录。

0x012 DNS

…待续

0x013 CDN

…待续

0x014 总结

以上,将随着我的学习持续更新。

0x015 带货

帮大佬带货:【随心秀】开篇 - 开源微场景编辑器介绍

[转载]原文链接:https://segmentfault.com/a/1190000020910898

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78837.html

文章标题:[前端漫谈]浅谈 HTTP 学习路径

相关文章
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
浅谈HTML5对移动广告平台的价值
就像电影盛行时那些电影人不得不面对新崛起的电视媒体带来的巨大冲击一样,如今的传统媒体正在面临互联网的挑战,而且越是年轻化的群体对互联网的依赖越强,近年来飞速增长的移动互联网趋势更甚,已经习惯了24小时手机陪伴的我们已经越来越离不开移动互联网...
2015-11-12
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
前端单页应用微服务化解决方案2 - Single-SPA
技术选型 经过各种技术调研我们最终选择的方案是基于 Single-SPA 来实现我们的前端微服务化. Single-SPA 一个用于前端微服务化的JavaScript前端解决方案 使用Single-SPA之后,你可以这样做: (兼容各...
2018-09-07
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
Web缓存基础:术语、HTTP报头和缓存策略
简介 对于您的站点的访问者来说,智能化的内容缓存是提高用户体验最有效的方式之一。缓存,或者对之前的请求的临时存储,是HTTP协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求,这受控于对该内容所声明的缓存策略...
2016-01-13
透过浏览器看HTTP缓存
Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。 如果客户端在请求一个文件的时候,发现自己...
2016-01-13
vant-ui学习手册
备注:红色部分为前端人员课程 项目搭建(1小时) 学习如何快速搭建并跑起项目 git下载 npm本地依赖安装 npm i webpack基本配置 根目录vue.config文件,请根据官方链接进行配置. 这里列举几个常用的...
2019-04-03
回到顶部