企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

前端必知的HTTP协议原理

JavaScript笔记 码云 124℃ 0评论
目录
[隐藏]

前端必知的HTTP协议原理

先说说我为什么要整理这篇文章,最近新项目正好要求做https的转换和迁移,自己思考了一下,对于http连一知半解都算不上,想想作为一个未来的大前端工程师,岂能不去研究这些东西。

会使用电脑的人基本上都会使用IE/Firefox/Chrome等网页浏览器的地址栏输入url地址来访问一个网站,那么网站页面是怎么展现到用户面前的呢?当然web页面是不能凭空显示出来的,浏览器根据用户输入的url地址向指定的web服务器请求资源,然后将请求的资源解析显示到web页面。那么web浏览器又是怎样通过url请求到web页面的?web服务器又是怎么响应浏览器的请求的?web浏览器是通过HTTP(HyperTextTransferProtocl)超文本传输协议作为规范,来完成客户端到服务器端的一系列流程。

很多人所接触的web开发的第一课,就是搭建一个tomcat,或者jetty,然后springmvc拷贝粘贴一下,马上就能看到一个页面了。

这样去学习当然没什么问题,因为大家都是这么学过来的。但是,有些相关的基础部分还是应该掌握的。比如Jetty,tomcat的背后到底发生了什么?SpringMVC到底是什么鬼?为什么要有这个东西。我希望在我的课程里能讲清楚这一点。

其实早期做网站,没有现在这么多工具可以用。现在做网站真是太方便了,各种框架一组合,分分钟做出来。但是这些组合也把很多技术细节给屏蔽了。这其中,最重要的一个技术,就是HTTP协议。http协议是web开发的基石和纽带,前端要想正确地掌握web开发,以便于在不同的业务场景下做出不同的设计,就必须从原理上掌握web基础知识。

简介

HTTP(超文本传输)是一种获取网络资源的协议,例如获取一个html页面,一张图片,一个js文件,都需要遵守这个协议,HTTP协议是Web上数据交换的基础。

客户端、服务端

客户端通常是一个浏览器,当输入URL时,浏览器发起第一个请求以获取HTML文档,服务端收到请求后,生成相应的HTML文档,返回给浏览器,浏览器解析返回的HTML文档,并根据文档中的资源信息发送其他的请求获取这些资源,例如css文件,js脚本,图片等,浏览器根据这些资源绘制页面。

页面展现流程

  1. 解析HTML构建DOM树(ParsingHTMLtoconstructtheDOMtree)
  2. 解析CSS,根据CSS选择器计算出的样式构建渲染树(Rendertreeconstruction)
  3. 布局渲染树(Layoutoftherendertree)
  4. 绘制渲染树(Paintingtherendertree)

代理服务器

在浏览器和服务器之间可能存在代理服务器,代理服务器主要有以下几个作用

  • 缓存功能,提高访问速度
  • 过滤(像反病毒扫描,家长监护)
  • 负载均衡,让多个服务器服务不同的请求
  • 对不同资源的权限控制
  • 登陆,允许存储历史信息

HTTP是无状态,有会话的

HTTP协议是无状态的,在同一个连接中,两个成功执行的请求之间是没有关系的,对服务器来说,它并不知道这两个请求来自同一个连接,为了解决这个问题,可以使用cookie以及session创建有状态的会话,也可以在请求头中添加token来解决这个问题

var request = new XMLHttpRequest();
request.open('GET', '', true);
request.setRequestHeader('Authorization','')
request.send();

HTTP流

一个客户端与服务器的数据交换流程如下

1、打开一个TCP连接(或者重用之前的一个):TCP连接用来发送一条或多条请求,当然也用来接受回应消息。客户端可能重用一个已经存在的连接,或者也可能重开几个新的与服务端的TCP连接。

2、发送一个HTTP报文:HTTP报文(在HTTP/2之前)是语义可读的。在HTTP/2中,这些简单的消息被封装在了帧中,这使得报文不可能被直接读出来,但是规则仍旧是相同的

GET / HTTP/1.1
Host: developer.mozilla.org
Accept-Language: fr

3、读取服务端返回的报文:

HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
ETag: "51142bc1-7449-479b075b2891b"
Accept-Ranges: bytes
Content-Length: 29769
Content-Type: text/html
 

<!DOCTYPE html... )

4、关闭连接或者为以后的请求重用连接。

HTTP 报文
HTTP报文有两种类型,请求与回应
请求报文

GET / HTTP/1.1
Host: 127.0.0.1
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8

第一行 GET / HTTP/1.1 分别为请求方法 资源路径 HTTP协议版本号
之后为Headers

响应报文

HTTP/1.1 200 OK
Server: nginx/1.6.2
Date: Mon, 07 Sep 2015 07:37:37 GMT
Content-Type: text/html
Last-Modified: Mon, 07 Sep 2015 07:18:00 GMT
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip

 

<!DOCTYPE html... )

第一行 HTTP/1.1 200 OK 分别代表HTTP协议版本号 状态码 状态码信息
之后为Headers
然后会有一个空行,空行之后即为响应的body了

HTTP协议定义了很多与服务器交互的方法,最基本的有4种,分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源,而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查,改,增,删4个操作。 我们最常见的就是GET和POST了。GET一般用于获取/查询资源信息,而POST一般用于更新资源信息.

http1.0的问题
http1.0最引人诟病的是连接无法复用及线头阻塞

连接无法复用直接导致每次请求都需要经历三次握手和慢启动,三次握手在高延迟下影响效果非常明显,慢启动则对大文件类请求影响较大,尽管可以通过设置 Connection:Keep-Alive 来复用短时间内的连接,但依然处理不了时间跨度比较大的请求

线头阻塞即在http1.0中,请求是按顺序处理的,这就导致如果前一个请求耗时严重或者出错,后续的请求都会受到影响

http2协议
http2是一个二进制协议,基于二进制的http2可以使成帧的使用变得更为便捷
http2规范一共定义了10种不同的帧,每种类型都有一个唯一的8字节类型编码。在整个TCP连接或者是各个独立的流的建立和管理过程中,每种类型的帧都为特定的目的而服务,其中最基础的两种分别对应于HTTP 1.1的DATA和HEADERS

多路复用的流
http2连接上传输的每个帧都关联到一个“流”,一个流处理完毕,这个流生命周期完结

每个单独的http2连接都可以包含多个并发的流,这些流中交错的包含着来自两端的帧。流既可以被客户端/服务器端单方面的建立和使用,也可以被双方共享,或者被任意一边关闭。在流里面,每一帧发送的顺序非常关键。接收方会按照收到帧的顺序来进行处理。

优先级和依赖性
每个流都包含一个优先级(也就是“权重”),它被用来告诉对端哪个流更重要。当资源有限的时候,服务器会根据优先级来选择应该先发送哪些流。

头部压缩
在http1.1中,状态行和头部是没有经过任何压缩的,而是直接以纯文本传输,当页面请求资源的个数上升的时候,cookies和请求的大小都会增加,而每个请求都会包含的cookie几乎是一模一样的,这就造成资源的额外浪费

重置
在HTTP 1.1中,HTTP消息一旦送出就很难中断,在http2里面,可以通过发送RST_STREAM帧来中断HTTP消息,从而避免浪费带宽和中断TCP连接(可以通过切断TCP连接来中断HTTP消息)

服务器推送
即在客户端需要某些资源的情况下,在客户端请求发送前,服务端提前把这些资源推送到客户端缓存起来,当用户需要这些资源时,可以有效的减少网络请求所耗费的时间。

流量控制
http2上每个流都拥有自己的公示流量窗口,它可以限制另一端发送数据,流量控制的目的是在流量窗口初始值的约束下,给予接收端以全权,控制当下想要接受的流量大小

HTTP与HTTPS的区别

1.什么是HTTPS

HTTPS,全名叫安全的超文本传输协议(HyperTextTransferProtocolSecure),为啥是安全的超文本传输协议呢?看一张图:

什么是HTTPS

其实HTTPS就是在常规的TCP协议层之上加入了一层TLS或者SSL协议。所以其端口也不是常规的HTTP的80端口,变成了443端口

2.http与https的区别

1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。

2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。

4、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

3.https的工作流程

1、客户端发起HTTPS请求

这个没什么好说的,就是用户在浏览器里输入一个https网址,然后连接到server的443端口。

2、服务端的配置

采用HTTPS协议的服务器必须要有一套数字证书,可以自己制作,也可以向组织申请,区别就是自己颁发的证书需要客户端验证通过,才可以继续访问,而使用受信任的公司申请的证书则不会弹出提示页面(startssl就是个不错的选择,有1年的免费服务)。这套证书其实就是一对公钥和私钥,如果对公钥和私钥不太理解,可以想象成一把钥匙和一个锁头,只是全世界只有你一个人有这把钥匙,你可以把锁头给别人,别人可以用这个锁把重要的东西锁起来,然后发给你,因为只有你一个人有这把钥匙,所以只有你才能看到被这把锁锁起来的东西。

3、传送证书

这个证书其实就是公钥,只是包含了很多信息,如证书的颁发机构,过期时间等等。

4、客户端解析证书

这部分工作是有客户端的TLS来完成的,首先会验证公钥是否有效,比如颁发机构,过期时间等等,如果发现异常,则会弹出一个警告框,提示证书存在问题。如果证书没有问题,那么就生成一个随机值,然后用证书对该随机值进行加密,就好像上面说的,把随机值用锁头锁起来,这样除非有钥匙,不然看不到被锁住的内容。

5、传送加密信息

这部分传送的是用证书加密后的随机值,目的就是让服务端得到这个随机值,以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。

6、服务段解密信息

服务端用私钥解密后,得到了客户端传过来的随机值(私钥),然后把内容通过该值进行对称加密,所谓对称加密就是,将信息和私钥通过某种算法混合在一起,这样除非知道私钥,不然无法获取内容,而正好客户端和服务端都知道这个私钥,所以只要加密算法够彪悍,私钥够复杂,数据就够安全。

7、传输加密后的信息

这部分信息是服务段用私钥加密后的信息,可以在客户端被还原。

8、客户端解密信息

客户端用之前生成的私钥解密服务段传过来的信息,于是获取了解密后的内容,整个过程第三方即使监听到了数据,也束手无策。

结束语

以上就是我的学习笔记,记录下来也是为了后期当做资料查阅,毕竟时间长了难免会忘,也提供给大家学习参考。

转载请注明:码云笔记 » 前端必知的HTTP协议原理

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址