写点什么

前端冲刺必备指南 -HTTP/HTTPS/HTTP2/DNS/TCP/ 经典题

用户头像
魔王哪吒
关注
发布于: 2021 年 02 月 12 日
前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题

哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。



每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021加油!欢迎关注加我vx:xiaoda0423,欢迎点赞、收藏和评论



不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。

前言


每天努力一点点💪,就能升职加薪💰当上总经理出任 CEO 迎娶白富美走上人生巅峰🗻,想想还有点小激动呢😎。


希望能够把每一处知识点,说明白,(当然,如果哪一处不了解,可以在评论区进行探讨哦!)⏰,计时开始!


如果您发现本文有帮助,请您点赞,收藏,评论,留下您学习的脚印👣,我很乐意谈论😃


学习阅读这篇文章内容还是需要一点前端网络基础的,至少你用过接口,了解过后端啥的。(也了解过一点网络知识,但不怎么会懂的学习者)


学习 Http 协议太重要了,了解 Http 协议,可以了解 Web 应用程序前后端的交互等


HTTP


什么是网络中的 HTTP,HTTPS,HTTP2,DNS,TCP,CDN 等等,您是不是听得一头雾水呢?小朋友您是不是有很多问号?😧


Web 建立在 HTTP 协议上通信的


那我们先从 HTTP 协议开始,HTTP 协议:


特点:1.简单快速,2.灵活,3.无连接,4.无状态(HTTP 是一种不保存状态,无状态协议-从 HTTP/1.1 虽然是无状态协议,但为了实现保持状态功能,引入了 Cookie 技术,有了它就可以管理状态了)。(记住咯)


HTTP 报文:请求报文,响应报文


请求报文:


  1. 请求行:请求方法,请求 URL,HTTP 协议以及版本;

  2. 请求头,通知服务器有关于客户端请求的信息

  3. 空行,发送回车符和换行符


响应报文:


  1. 状态行

  2. 响应头

  3. 空行

  4. 响应体


HTTP 方法:



主要 GET 方法获取数据,POST 方法传输资源


PUT 方法更新资源,DELETE 方法删除资源,HEAD 方法获得报文首部


当然作为程序员常用到的 HTTP 状态码:




描述到这里应该大部分人也是了解这部分比较的是吧?那么接下来我来添加一些内容。


让我们了解 web 网络基础,我们知道我们是使用 HTTP 协议访问 web 的,那么你知道我们在网页浏览器中的地址栏中输入 URL 时,web 页面是如果呈现的吗?


第一步👣,浏览器根据请求的 url 交给 dns 域名解析,找到真实的 Ip,向服务器发起请求。


第二步👣,服务器交给后台处理后,返回响应的数据,浏览器接收文件。


第三步👣,浏览器对加载到的资源(根据 web 浏览器地址栏中指定的 url,web 浏览器从 web 服务器获取文件资源等信息)进行解析,建立相应的内部数据结构。


第四步👣,浏览器载入解析到的资源文件,进行页面渲染,呈现出 web 页面。


so,就算你不了解其运作原理,也是能够看到 web 页面的。


客户端通过指定的访问地址获取服务器资源,服务器使用 HTTP 协议进行通信,将资源传递给客户端。


在浏览器地址栏内输入 URL 之后,信息会被送往某处,然后从某处获得的回复,内容就会显示在 web 页面上。


so,HTTP 协议是超文本传输协议,是用于从万维网服务器传输超文本到本地浏览器的传输协议。


HTTP 是基于 TCP/IP 协议通信协议来传递数据的,主要是客户端和服务器端之间的通信格式,不涉及数据包传输。


那么什么是网络基础 TCP/IP


网络基础 TCP/IP


当然说到网络基础 TCP/IP,就要了解一下 TCP/IP 协议族啦!


通常使用的网络是在网络基础 TCP/IP 协议族的基础上运作的,so,加上刚刚所说的,HTTP 就是它内部的一个子集(子集?数学概念)


协议就是定义规则,双方要定义好规则,事先确定,才能相互通信,网络基础 TCP/IP 是互联网相关的各类协议族的总称。


在图解 HTTP 中,TCP/IP 协议族是分 4 层:应用层,传输层,网络层和数据链路层(分层的)。



利用 TCP/IP 协议族进行网络通信


通过分层顺序与对方进行通信,发送端(客户端)从应用层往下走,接收端(服务器端)从链路层往应用层上走。


即:客户端,应用层(HTTP 客户端)➡,传输层(TCP)➡,网络层(IP)➡,链路层(网络)➡;服务器端,应用层(HTTP 服务器端),⬅传输层(TCP),⬅网络层(IP),⬅链路层(网络)。


从发送端到接收端,发送 HTTP 请求流程:


发送端,每通过一层增加首部,接收端,每通过一层删除首部。发送端发起 HTTP 请求,从发送端:应用层,HTTP 数据(HTTP 报文)➡,接收 TCP 首部到传输层,即 TCP 首部包含 HTTP 数据➡,接收 IP 数据包到网络层,即 IP 首部里包含 TCP 首部,TCP 首部包含 HTTP 数据➡,接收网络架构到链路层,即以太网首部包含 IP 首部,IP 首部里包含 TCP 首部,TCP 首部包含 HTTP 数据。在发送端是这样的传输。


接着发送端的链路层传送到接收端的链路层,就是通过每一层会删除首部,so,传输过来的 HTTP 数据,(以太网首部👉IP 首部👉TCP 首部👉HTTP 数据),从发送端到接收端,接收端往上走每一层删除首部(即链路层到应用层),so,接收端的链路层到网络层删除首部后(P 首部👉TCP 首部👉HTTP 数据),一次类推,到接收端的应用层就剩下 HTTP 数据。


那么有人说,在计算机网络的七层协议呢?是的有七层,不过都不会影响的,说一说七层协议,顺带讲讲。


在主机上:应用层,表示层,会话层,传输层;在网络上:网络层,链路层,物理层。



以上可以一部分一部分进行学习掌握的知识点。


HTTP 中 GET 与 POST 的区别


在网上冲浪时,看到《99%的人都理解错了 HTTP 中 GET 与 POST 的区别》这篇文章。


说 GET 和 POST 有一个重大区别,GET 产生一个 TCP 数据包;POST 产生两个 TCP 数据包。


在 GET 请求,浏览器会把 http header 和 data 一并发送出去,服务器响应 200,而对于 POST,浏览器发送 header,服务器响应 100 continue,浏览器再发送 data,服务器响应 200。


然后看到这篇文章《听说『99% 的人都理解错了 HTTP 中 GET 与 POST 的区别』??》结论是,关于『GET 发一个包,POST 发两个包』的知识 99% 大概是从这篇文章中得来的《XMLHttpRequest (XHR) Uses Multiple Packets for HTTP POST?》可以自己查看哦!(多多提出自己思考,不断问为什么,去扩展自己知识点的边缘)


一个 TCP 连接能发多少个 HTTP 请求


so,一个 tcp 连接里到底能发几个 http 呢?😉,应该是 tcp 连接不断开,就可以一直发送请求,不断开就可以随便发,HTTP2 的话可以一个连接里并行,HTTP/1.1 不行的。(开了 Pipelining 就可以了吧,http1.1 的,但是 Pipelining 默认在浏览器是不开的)



(感觉应该和网络状况相关,不会存在一定一种比另一种快)



一个 TCP 连接后是否会在一个 HTTP 请求完成后断开?


在 HTTP/1.0 中,一个服务器在发送完一个 HTTP 响应后,会断开 TCP 链接。但这样请求会重新建立和端口 TCP 连接,代价过大。


如果某服务器对 Connection: keep-alive 的 Header 进行了支持。表示完成这个 HTTP 请求后,不用断开 HTTP 请求使用 TCP 的 TCP 连接,可以被重复使用,之后发送 HTTP 请求就不用重新建立 TCP 连接了。


维持连接好处多多,那么在 HTTP/1.1 就把 Connection 头写进标准,除非关闭,否则会维持一段时间的 TCP 连接,默认情况下连接 TCP 不会断开,只有在请求报头中声明 Connection: close 才会在请求完成后关闭连接。


如果维持连接,一个 TCP 连接是可以发送多个 HTTP 请求的。


一个 TCP 连接中 HTTP 请求发送可以一起发送么?



在 PiPelining 来解决这个问题:(Pipelining 是什么)


如图:





这一问题解决后,下面了解一下 IP,TCP,和 DNS(先简单说明一下,还可能再加深)


IP,TCP,和 DNS


说到 IP,TCP,DNS 这三个协议,当然在网络通信中,层次有涉及到所以要说一下否则就忘记了。


TCP/IP 是一类协议系统,它是用于网络通信的一套协议集合



tcp 的首部格式


首部格式



负责传输的 IP 协议,IP 协议(位于网络层),几乎所有使用网络的系统都用到了 IP 协议,IP 协议的作用就是把各种数据包传送给对方,需要确保两个重要的条件,IP 地址(说明节点被分配到的地址,IP 可换)和 MAC 地址(指网卡所属的固定地址,MAC 地址基本上不会换)。


通过 MAC 地址使用 ARP 协议进行通信,(而 ARP 是一种用于解析地址的协议,通过通信方的 IP 地址就可以反查对应的 MAC 地址)。ARP 协议用于在通信双方需要通过多台计算机和网络设备中转才能到达对方,这个过程中需要采用 ARP 协议进行中转时,利用下一站中转设备的 MAC 地址来搜索下一个中转地址。(如果快递公司,您作为寄快递的人,只知道自己的快递件送到了快递公司,这快递过程中,您无法了解掌握快递的过程细节)


就是说发送端向往某个 IP 地址发送数据包(快递包)就会通过 ARP 协议进行中转把数据包发往 MAC 地址(路由器)某个中转站,然后接着到达下一个中转地址(由上一个中转地址搜索(送往)下一个中转地址),最后到达接收端。


数据包:



我知道了 MAC 地址进行通信过程中是使用 ARP 协议的了,但是这是用在通信双方很少在同一局域网内的情况。


TCP 协议用于保证可靠性,位于传输层,提供字节流服务


字节流服务是将大块数据分割成以报文段位单位的数据包进行管理(主要是为了方便传输)。


而这里确保数据可靠性送达,这里就是我们常说的 TCP 协议采用了三次握手,用于保证数据准确无误的送到目的地。(TCP 建立连接—三次握手,TCP 释放连接—四次挥手(待会说))


三次握手,四次挥手


握手过程中使用了 TCP 标志,SYN(synchronize)同步信号和 ACK(acknowledgement)确认信号。


描述过程是:(三次握手)




第一次握手:发送端,把标有 SYN 的数据包发给到 接收端,等待对方接收。


第二次握手:接收端接收后,发送标有 SYN/ACK 的数据包给以示传达确认信息。


第三次握手:发送端收到后,在传回带 ACK 标识的数据包给 接收端,握手接收。


发送端,把标有 SYN 的数据包发给到 接收端,接收端收到后,发送标有 SYN/ACK 的数据包给 发送端,发送端收到后,发送标有 ACK 的数据包给 接收端。


如图:(SYN、ACK 是 TCP 封包中的 控制位元 )




描述过程是:四次挥手






通常我们习惯记忆域名,但是机器间互相指认 ip 地址,域名与 ip 地址之间是一一对应的,它们之间的转换工作称为域名解析,域名解析是需要由专门的域名解析服务器来完成。


so,这就需要 DNS 服务来负责域名解析。


DNS 服务来负责域名解析


负责域名解析的 DNS 服务,就是通过域名查询到具体的 IP。


当客户机提出查询请求时,会在本地计算机中的缓存中查找,如果在本地无法获取查询信息,就将查询请求发给 DNS 服务器。


开始,客户机将域名查询请求发送到本地 DNS 服务器,在该服务器管理的区域的记录中查找,如果找到该记录,就利用此记录进行解析,如果没有区域信息可以满足查询要求,不能在本地找到客户机查询的信息,将请求发送到根域名 DNS 服务器,用于负责解析客户机请求的根域部分,将包含下一级域名信息的 DNS 服务器地址返回给客户机的 DNS 服务器地址,最后在目标域名的 DNS 服务器上找到相应的 IP 地址信息。


DNS 服务是位于应用层的协议,提供域名到 IP 地址之间的解析服务。(DNS 服务可以加上对域名购买,解析服务的了解,更加容易理解一些,这就是一部不通过 IP 地址访问,而是使用主机名或域名来访问对方的计算机),它提供通过域名查找 IP 地址,也可以逆向从 IP 地址查找域名。


流程详解,就是发送端向 DNS 发送把某域名下的 IP 地址告知我的请求,DNS 接收到后,把对应的 IP 地址返回到发送端,发送端通过 Ip 地址可以向 web 服务器发送访问请求。


so,根据上述总结,我可以描述 HTTP 协议的通信过程:


HTTP 协议的通信过程


客户端(浏览器)在地址栏访问某域名网页,向 DNS 要求发送给对应的 IP 地址,浏览器通过域名在网页请求某域名下的页面资源,HTTP 协议会生成对目标 web 服务器的 HTTP 的请求报文。TCP 协议就是将 HTTP 请求报文分割成报文段,可靠地传给对方。通过(数据包中转站)IP 协议负责的地方,搜索对方某 MAC 地址路由器,一边中转一边传送。到达对方服务器(某 Ip 地址),TCP 协议负责从对方接收接收过来的报文段,重组到达按序号以原来的顺序,HTTP 协议就对 web 服务器请求的内容进行处理。


这个过程就是从应用层,传输层,网络层,链路层之间的传递。


在这里讲到客户端发送 HTTP 请求给服务器端的请求报文是什么?


因为上面说到就讲一下请求报文,那么请求报文是如下图整体:



这是客户端的请求报文,那么服务器端也有,是接收后结果以响应报文形式返回:



用表格,描述 GET 用于获取资源:


| 说明 | 描述 |

|:--- |:--- |

| 请求 | GET /index.html HTTP/1.1 |

| 响应 | 返回index.html的页面资源 |


so,HTTP 报文用于 HTTP 协议交互的信息,报文是由多行数据构成的字符串文本。大致分报文首部和报文主体两块。



报文的结构


请求报文和响应报文的结构(找了如下图片进行解释)




当然如果还不够清晰,再次找了几张图片:


请求头



请求体



状态行



响应头部



响应体



到了这里,上面有一些知识点就是在地址栏中输入的 url,URL 应该比较常说,它是同一资源定位符,用英文是(Uniform Resource Locator)。url 就是输入地址栏的网页地址。


URI


说到 url,我们要了解一下 URI,它是同一资源标识符。了解一下绝对 URI 的格式



URI 一般都是定位互联网上的资源,保证在互联网上任意位置的资源进行访问(HTTP 协议使用 URI 让客户端定位到资源)。如下图:



快速看到这里的朋友应该对 HTTP 了解还很不错呢。


GET 和 POST 的区别?


来道常考面试题:GET 和 POST 的区别?


  1. GET 在浏览器回退不会再次请求,POST 会再次提交请求

  2. GET 请求会被浏览器主动缓存,POST 不会,要手动设置

  3. GET 请求参数会被完整保留在浏览器历史记录里,POST 中的参数不会

  4. GET 请求在 URL 中传送的参数是有长度限制的,而 POST 没有限制

  5. GET 参数通过 URL 传递,POST 放在 Request body 中


HTTP 四个版本


分别是 HTTP1.0、HTTP1.1、HTTP/2,HTTP/3



HTTP1.0 默认是短连接,每次与服务器交互,都需要新开一个连接。


HTTP1.1 版本,默认持久连接,只要没有明确提出端口就一直保持,可以发送多次 HTTP 请求,还有重点在于断点续传,利用 HTTP 消息头使用分块传输编码,将实体主体分块传输。




https 协议现在部分网站都用这个。




在网络上,客户端和服务端交互,就有可能被挟持,需要用 CA(公信机构)来帮客户端认定服务端是真实的。


这个时候就要去申请一份数字证书,数字证书里有证书持有者、证书有效期、服务器公钥等信息。


客户端用 CA 的公钥对证书解密(证书被 CA 机构的私钥解密,然后客户端用 CA 证书的公钥解密。)


流程如下图所示:




管线化和持久连接


仅在 HTTP/1.1 才支持管线化,在持久连接前提下,请求一次性打包传输过去,响应一次性打包传递回来。


管线化技术的出现,不用等待响应亦可直接发送下一个请求。


在 HTTP1.1 中所有链接默认都是持久连接,使用同一个 TCP 连接来发送和接收多个 HTTP 请求或响应。


持久连接(HTTP Persistent Connections,也称为 HTTP keep-alive 或 HTTP connection reuse)


好处:


  1. 减少了 TCP 连接的重复建立和断开所造成的额 外开销

  2. 减轻了服务器端的负载

  3. Web 页面的显示速度提高了


Cookie 了解一下


Cookie 技术通过在请求和响应报文中写入 Cookie 信 息来控制客户端的状态



跨域


什么是同源策略


同源策略是一种约定,它是浏览器最核心的安全功能,所谓同源是指"协议+域名+端口"三者相同。



跨域是请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。


解决跨域:


有 jsonp、iframe、cors、img、HTML5 postMessage 等等。其中用到 html 标签进行跨域的原理就是 html 不受同源策略影响。但只是接受 Get 的请求方式,这个得清楚。


JSONP 原理,利用 js 请求返回不需要域名,没有跨域问题,即利用 <script> 标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的 JSON 数据,不安全可能会遭受 XSS 攻击。


JSONP 使用简单且兼容性不错,但是只限于 get 请求。


<script src="http:=jsonp"></script><script>    function jsonp(data) {    	console.log(data)	}</script> 
复制代码


从输入 URL 到页面展示,这中间发生了什么?


从输入 URL 到页面展示完整流程示意图



输入 url 并回车,浏览器进程检查 url,组装协议,构成完整的 url,通过进程间通信(IPC)把 url 请求发送给网络进程,接收到 url 请求后检查本地缓存是否缓存该请求资源,如果有,则将该资源返回给浏览器进程,如果没有,网络进程向 web 服务器发起 http 请求。


向 web 服务器发起 http 请求


  1. 进行 DNS 解析,获取服务器 ip 地址,端口

  2. 利用 ip 地址和服务器建立 tcp 连接

  3. 构建请求头信息

  4. 发送请求头信息

  5. 服务器响应后,网络进程接收响应头和响应信息,并解析响应内容

  6. 网络进程解析响应流程

  7. 准备渲染进程

  8. 传输数据、更新状态


Web 服务器


  1. 用单台虚拟主机实现多个域名

  2. HTTP/1.1 规范允许一台 HTTP 服务器搭建多个 Web 站点


代理、网关、隧 道


来源于《图解 HTTP》


代理:


来源于《图解 HTTP》


网关:


来源于《图解 HTTP》


隧道:


来源于《图解 HTTP》


缓存:


来源于《图解 HTTP》


有效期限:


来源于《图解 HTTP》


web 安全



  1. 通信使用明文可能会被窃听,存在通信内容被窃听的风险

  2. TCP/IP 可能被窃听的网络

  3. 加密处理防止被窃听

  4. 无法证明报文完整性,可能已遭篡改

  5. 使用 HTTPS 通信

  6. HTTP+ 加密 + 认证 + 完整性保护 =HTTPS



参考文献


你猜一个 TCP 连接上面能发多少个 HTTP 请求


前端总结--网络


熬夜写了一篇HTTP总结


《图解 HTTP》


❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章



点赞、收藏和评论



我是Jeskson(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)

我们下期见!



文章持续更新,可以微信搜一搜「 程序员哆啦 A 梦 」第一时间阅读,回复【资料】有我准备的一线大厂资料,本文 http://www.dadaqianduan.cn/#/ 已经收录



github收录,欢迎Starhttps://github.com/webVueBlog/WebFamily


发布于: 2021 年 02 月 12 日阅读数: 32
用户头像

魔王哪吒

关注

微信搜:程序员哆啦A梦 2018.05.08 加入

面向JavaScript爱好人员提供:Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和经验分享。 博客首发:http://www.dadaqianduan.cn/#/

评论

发布
暂无评论
前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题