1. 基础概念篇

TCP/IP 通信传输流

cookie

url和URI

get和post

cookie,session,webstorge区别

跨域

网络安全

http缓存

1.1介绍

HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写。

HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效,使网络传输减少。它不仅保证计算机正确快速地传输超文本文档,还确定传输文档中的哪一部分,以及哪部分内容首先显示(如文本先于图形)等。

HTTP是一个应用层协议,由请求和响应构成,是一个标准的客户端服务器模型。HTTP是一个无状态的协议。

1.2 在TCP/IP协议栈中的位置

HTTP协议通常承载于TCP协议之上,有时也承载于TLS或SSL协议层之上,这个时候,就成了我们常说的HTTPS。如下图所示:

首先,纠正一下我以前一直误解的概念,我一直以为Http和Tcp是两种不同的,但是地位对等的协议,虽然知道TCP是传输层,而http是应用层。今天学习了下,知道了 http是要基于TCP连接基础上的,简单的说,TCP就是单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输。http是用来收发数据,即实际应用上来的。

默认HTTP的端口号为80,HTTPS的端口号为443。

1.3 HTTP的请求响应模型

HTTP协议永远都是客户端发起请求,服务器回送响应。见下图:

这样就限制了使用HTTP协议,无法实现在客户端没有发起请求的时候,服务器将消息推送给客户端。

HTTP协议是一个无状态的协议,同一个客户端的这次请求和上次请求是没有对应关系。

注意:客户端与服务器的角色不是固定的,一端充当客户端,也可能在某次请求中充当服务器。这取决与请求的发起端。HTTP协议属于应用层,建立在传输层协议TCP之上。客户端通过与服务器建立TCP连接,之后发送HTTP请求与接收HTTP响应都是通过访问Socket接口来调用TCP协议实现

1.4 工作流程

一次HTTP操作称为一个事务,其工作过程可分为四步:

1)首先客户机与服务器需要建立连接。只要单击某个超级链接,HTTP的工作开始。

2)建立连接后,客户机发送一个请求给服务器,请求方式的格式为:统一资源标识符(URL)、协议版本号,后边是MIME信息包括请求修饰符、客户机信息和可能的内容。

3)服务器接到请求后,给予相应的响应信息,其格式为一个状态行,包括信息的协议版本号、一个成功或错误的代码,后边是MIME信息包括服务器信息、实体信息和可能的内容。

4)客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上,然后客户机与服务器断开连接。

如果在以上过程中的某一步出现错误,那么产生错误的信息将返回到客户端,有显示屏输出。对于用户来说,这些过程是由HTTP自己完成的,用户只要用鼠标点击,等待信息显示就可以了。

1.5http发展历史

HTTP/1.0 标准于 1996 年 5 月作为第一份标准被公布,它被记载于 RFC1945 - Hypertext Transfer Protocol -- HTTP/1.0

HTTP/1.1 标准于 1999 年 6 月被公布,截止到目前它应该是最主流的 HTTP 协议版本,它被记载于 RFC2616 - Hypertext Transfer Protocol -- HTTP/1.1

HTTP/2 标准于 2015 年 5 月被正式发布,它被记载于 RFC7540 - Hypertext Transfer Protocol -- HTTP/2

它的特点是

① 采用二进制而非明文来打包,

② 多路复用,

③ 修复队头堵塞,

④ 允许设置设定请求优先级,

⑤ 服务器推送,

⑥ WebSocket 等等。

HTTP/2为什么是二进制?

比起像HTTP/1.x这样的文本协议,二进制协议解析起来更高效、“线上”更紧凑,更重要的是错误更少。

为什么 HTTP/2 需要多路传输?

HTTP/1.x 有个问题叫线端阻塞(head-of-line blocking), 它是指一个连接(connection)一次只提交一个请求的效率比较高, 多了就会变慢。 HTTP/1.1 试过用流水线(pipelining)来解决这个问题, 但是效果并不理想(数据量较大或者速度较慢的响应, 会阻碍排在他后面的请求). 此外, 由于网络媒介(intermediary )和服务器不能很好的支持流水线, 导致部署起来困难重重。而多路传输(Multiplexing)能很好的解决这些问题, 因为它能同时处理多个消息的请求和响应; 甚至可以在传输过程中将一个消息跟另外一个掺杂在一起。所以客户端只需要一个连接就能加载一个页面。

消息头为什么需要压缩?

假定一个页面有80个资源需要加载(这个数量对于今天的Web而言还是挺保守的), 而每一次请求都有1400字节的消息头(着同样也并不少见,因为Cookie和引用等东西的存在), 至少要7到8个来回去“在线”获得这些消息头。这还不包括响应时间——那只是从客户端那里获取到它们所花的时间而已。这全都由于TCP的慢启动机制,它会基于对已知有多少个包,来确定还要来回去获取哪些包 – 这很明显的限制了最初的几个来回可以发送的数据包的数量。相比之下,即使是头部轻微的压缩也可以是让那些请求只需一个来回就能搞定——有时候甚至一个包就可以了。这种开销是可以被节省下来的,特别是当你考虑移动客户端应用的时候,即使是良好条件下,一般也会看到几百毫秒的来回延迟。

服务器推送的好处是什么?

当浏览器请求一个网页时,服务器将会发回HTML,在服务器开始发送JavaScript、图片和CSS前,服务器需要等待浏览器解析HTML和发送所有内嵌资源的请求。服务器推送服务通过“推送”那些它认为客户端将会需要的内容到客户端的缓存中,以此来避免往返的延迟。

2. http请求

下图是在网上找的一张图,觉得能很好的表达HTTP请求的所发送的数据格式。

由上图可以看到,http请求由请求行,消息报头,请求正文三部分构成。

HTTP请求状态行

请求行由请求Method, URL 字段和HTTP Version三部分构成, 总的来说请求行就是定义了本次请求的请求方式, 请求的地址, 以及所遵循的HTTP协议版本例如:

GET /example.html HTTP/1.1 (CRLF)
复制代码

未完待续。。。

3.HTTP的五大特点

  • 支持客户/服务器模式
  • 简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。
  • 灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
  • 无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。早期这么做的原因是请求资源少,追求快。后来通过Connection: Keep-Alive实现长连接
  • 无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

非持久连接和持久连接

在实际的应用中,客户端往往会发出一系列请求,接着服务器端对每个请求进行响应。对于这些请求|响应,如果每次都经过一个单独的TCP连接发送,称为非持久连接。反之,如果每次都经过相同的TCP连接进行发送,称为持久连接

非持久连接在每次请求|响应之后都要断开连接,下次再建立新的TCP连接,这样就造成了大量的通信开销。例如前面提到的往返时间(RTT) 就是在建立TCP连接的过程中的代价。

非持久连接给服务器带来了沉重的负担,每台服务器可能同时面对数以百计甚至更多的请求。持久连接就是为了解决这些问题,其特点是一直保持TCP连接状态,直到遇到明确的中断要求之后再中断连接。持久连接减少了通信开销,节省了通信量。

HTTP优化方案

  • TCP复用,TCP连接复用是将多个客户端的HTTP请求复用到一个服务器端的TCP连接上,HTTP复用是指一个一个客户端的多个HTTP请求通过一个TCP连接进行处理。
  • 内容缓存。将经常用到的内容进行缓存起来,那么客户端就可以直接在内存中获取相应的数据了。
  • 压缩,将文本数据进行压缩,减少宽带
  • SSL加速。使用SSL协议对HTTP协议进行加密,在通道内加密并加速
  • TCP缓冲:通过TCP缓冲技术,可以提高服务器端响应事件和处理效率,减少由于通信链路问题给服务器造成连接负担.

4.HTTP和HTTPS

HTTP的不足

  • 通信使用明文(不加密),内容可能会被窃听
  • 不验证通信方的身份,因此有可能遭遇伪装
  • 无法证明报文的完整性,所以有可能已遭篡改

HTTPS介绍

HTTP 协议中没有加密机制,但可以通过SSL(Secure Socket Layer, 安全套接层 )或 TLS(Transport Layer Security, 安全层传输协议)的组合使用,加密 HTTP 的通信内容。属于通信加密,即在整个通信线路中加密。

HTTP + 加密 + 认证 + 完整性保护 = HTTPS(HTTP Secure )复制代码

HTTPS 采用共享密钥加密(对称)和公开密钥加密(非对称)两者并用的混合加密机制。若密钥能够实现安全交换,那么有可能会考虑仅使用公开密钥加密来通信。但是公开密钥加密与共享密钥加密相比,其处理速度要慢。

所以应充分利用两者各自的优势, 将多种方法组合起来用于通信。 在交换密钥阶段使用公开密钥加密方式,之后的建立通信交换报文阶段 则使用共享密钥加密方式。

HTTPS握手过程的简单描述如下:

1,浏览器将自己支持的一套加密规则发送给网站。

服务器获得浏览器公钥

2,网站从中选出一组加密算法与HASH算法,并将自己的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址,加密公钥,以及证书的颁发机构等信息

浏览器获得服务器公钥

3,获得网站证书之后浏览器要做以下工作:

  • 验证证书的合法性(颁发证书的机构是否合法,证书中包含的网站地址是否与正在访问的地址一致等),如果证书受信任,则浏览器栏里面会显示一个小锁头,否则会给出证书不受信的提示。
  • 如果证书受信任,或者是用户接受了不受信的证书,浏览器会生成一串随机数的密码(接下来通信的密钥),并用证书中提供的公钥加密(共享密钥加密)。
  • 使用约定好的HASH计算握手消息,并使用生成的随机数对消息进行加密,最后将之前生成的所有信息发送给网站。

4,网站接收浏览器发来的数据之后要做以下的操作:

  • 使用自己的私钥将信息解密取出密码,使用密码解密浏览器发来的握手消息,并验证HASH是否与浏览器发来的一致。
  • 使用密码加密一段握手消息,发送给浏览器。

HTTPS的不足

加密解密过程复杂,导致访问速度慢

加密需要认向证机构付费

整个页面的请求都要使用HTTPS

转载于:https://juejin.im/post/5cd2639451882535b455ac5a

web前端对http理解相关推荐

  1. 好程序员web前端分享如何理解JS单线程

    好程序员web前端分享如何理解JS单线程,JS本质是单线程的.也就是说,它并不能像JAVA语言那样,两个线程并发执行. 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,J ...

  2. 一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文

    CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...

  3. html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解

    原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...

  4. 深入理解弹性盒布局(fiex-box)——Web前端系列自学笔记

    文章目录 弹性盒布局 弹性盒布局概述 弹性盒布局属性 display flex-flow justify-content align-items order flex align-self 总结 弹性 ...

  5. 浅谈web前端理解一(前端学习路线)

    提到学习web前端,在外行人或者初学者的眼里,应该是绚丽的画面,精彩的布局,或者各种UI以及依据前端开发出来的小游戏.但经过一段时间的学习,你会发现其实本质上是一种搬砖经验的积累,以及布局框架的积累. ...

  6. web前端面试高频考点——Vue原理(理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM)

    系列文章目录 内容 参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...

  7. 【Web技术】913- 谈谈你对前端路由的理解

    来自:掘金 作者:尼克陈 链接:https://juejin.cn/post/6917523941435113486 一篇文章,不可能做的面面俱到,全部受众.希望大家带着发散思维去看文章,将文章涉及的 ...

  8. 千锋web前端教学知识点记录及个人理解4

    WEB前端知识点记录(84-109集) 第八十四集-relative相对定位 第八十五集-absolute绝对定位 第八十六集-fixed和sticky及zlndex 第八十七集-定位实现下拉菜单 课 ...

  9. 读书笔记:编写高质量代码--web前端开发修炼之道(二:5章)

    读书笔记:编写高质量代码--web前端开发修炼之道 这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...

  10. 对WEB前端的几段思考(一)——界面设计和性能优化(整理中)

    尽管我并非艺术出生,既没有任何设计基础,又没有较高艺术涵养,也深谙在短时间内创造一定艺术造诣并非易事,但是既然当初选择从事网站前端开发,我的目光不能仅停留在前端代码上.作为一名志向在前端领域发展的人员 ...

最新文章

  1. PyCharm软件常见配置
  2. 20150411--Dede二次开发-01
  3. Maven学习笔记(二) :Maven的安装与配置
  4. Integer Sequence Dividing
  5. 综合素质计算机考点,教师资格证小学综合素质考点及考试真题:信息处理能力...
  6. 【mac】vmware tools 在菜单上显示灰色无法安装的问题
  7. 【2019南昌邀请赛网络赛I:】Max Answer(st表+单调栈(新模版)+分析)
  8. 条件查询(where)——MySQL
  9. php 汇率接口,PHP 对交易对汇率 转换
  10. 3ds Max小白入门小案例|旋转楼梯
  11. C#,调用GDI32.DLL绘制图形的源程序
  12. android动态指示箭头,自定义选项卡指示器(箭头向下指示器)
  13. elasticsearch下载太慢在国内, 我把包放到了云盘上,还有kibana,logstash.有需要自取,持续更新版本
  14. 软件工程 用户故事地图 是什么 怎么用 实例
  15. seo推广,seo推广是什么意思呢
  16. pip批量下载与安装Python包
  17. php %3c0x1a%3e是什么_利用ThinkPHP漏洞扫描攻击
  18. X86机器安装麒麟UOS双系统
  19. 用Python写了一个电子考勤系统
  20. 1.EdgeX实战 Ubuntu18.04搭建运行环境

热门文章

  1. KICKSTART无人值守安装系统
  2. None.js 第五步 Buffer(缓冲区)
  3. 使用Struts2和jQuery EasyUI实现简单CRUD系统(五)——jsp,json,EasyUI的结合
  4. c++ primer打卡(三)
  5. Dynamics CRM 2015Online Update1 new feature之 通过业务规则清空字段的值
  6. CI生成查询记录集result(),row(),row_array().....
  7. 键盘上各种特殊符号的英文读法
  8. Bellman-Ford 算法及其优化
  9. Voxengo音频插件合集:Voxengo Total Bundle for Mac
  10. Snagit 2019 for Mac(最好用的截图软件)v2019.1.11汉化版 MacOS 11 Big Sur支持