搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 达达前端 > 12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题

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

达达前端 2020-05-26

前言

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

这是我的第12期文章内容✍,希望能够把每一处知识点,说明白,(当然,如果哪一处不了解,可以在评论区进行探讨哦!)⏰,计时开始!

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

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

学习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状态码:

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

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

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

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

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

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

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

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

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

网络基础TCP/IP

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

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

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

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

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

利用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数据。

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

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

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

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

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 默认在浏览器是不开的)

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

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

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

一个 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 请求发送可以一起发送么?

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

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

如图:

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

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

IP,TCP,和DNS

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

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

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

tcp的首部格式

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

首部格式

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

数据包:

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

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

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

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

三次握手,四次挥手

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

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

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

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

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

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

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

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

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

描述过程是:四次挥手

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

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

DNS服务来负责域名解析

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

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

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

HTTP协议的通信过程

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

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

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

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

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

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

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

说明 描述
请求 GET /index.html HTTP/1.1
响应 返回index.html的页面资源

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

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

报文的结构

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

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

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

请求头

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

请求体

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

状态行

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

响应头部

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

响应体

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

URI

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

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

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

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

快速看到这里的朋友应该对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

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

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

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

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

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

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

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

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

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

流程如下图所示:

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

管线化和持久连接

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

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

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

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

好处:

  1. 减少了 TCP 连接的重复建立和断开所造成的额 外开销
  2. 减轻了服务器端的负载
  3. Web 页面的显示速度提高了

Cookie了解一下

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

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

跨域

什么是同源策略

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

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

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

解决跨域:

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

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

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

<script ></script><script> function jsonp(data) { console.log(data) }</script>

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

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

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

输入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 站点

代理、网关、隧 道

12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题来源于《图解HTTP》

代理:

12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题来源于《图解HTTP》

网关:

12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题来源于《图解HTTP》

隧道:

12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题来源于《图解HTTP》

缓存:

12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题来源于《图解HTTP》

有效期限:

12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题来源于《图解HTTP》

web安全

12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题
  1. 通信使用明文可能会被窃听,存在通信内容被窃听的风险
  2. TCP/IP 可能被窃听的网络
  3. 加密处理防止被窃听
  4. 无法证明报文完整性,可能已遭篡改
  5. 使用 HTTPS 通信
  6. HTTP+ 加密 + 认证 + 完整性保护 =HTTPS

参考文献

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

前端总结--网络

《图解HTTP》


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题》的版权归原作者「达达前端」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注达达前端微信公众号

达达前端微信公众号:dadaqianduan

达达前端

手机扫描上方二维码即可关注达达前端微信公众号

达达前端最新文章

精品公众号随机推荐