前端开发中,性能是一定绕不开的,今天就来说一下前后台通信中最重要的一个通道--HTTP2.0

最开始的通讯协议叫http1.0,作为始祖级的它,定义了最基本的数据结构,请求头和请求体,以及每一个字段的含义,它顺应了当时的互联网需求,首次实现了浏览器与后端的交互,但它有一个时代烙印,就是短连接,每次请求就会建立一个TCP连接,三次握手四次挥手,用完就关闭,假如浏览器有300个请求,那么它就建立了300个连接,这样就给服务端带来的很大的压力,即使它只是一个很小很小的请求,后来,大家发现这样不行啊,内容一多,服务端就顶不住了,然后就开始想办法扩展它,

这样http1.1就出现了,建立了长连接,通过keepalived开启连接复用,什么意思?还拿这300个请求来说,浏览器默认一次支持6个请求,当这6个请求结束以后,会继续复用这6个请求,每个请求都是异步的,不会让这6个连接闲着,直到300个请求结束。

好像这样就解决了问题,可是细想一下好像不对,硬件更新快,后端硬件性能提升很快,它可以支持很多线程进行计算,但浏览器还是6个,那岂不是白白浪费了硬件设备,所以http2.0就出来了,多路复用的单一长连接

什么意思呢,看这个

http1.1中,当建立连接,并响应完以后,会继续复用该条连接去请求资源,但这6条请求是不变的,只不过复用了而已,在2.0中就不一样了,只用这一条长连接,请求多个资源,一下子就减少了5条连接(包括每次连接时的三次握手和四次挥手),还有tcp慢启动带来的网络延时,而它之所以一个连接上能放这么多内容,底层是由于它以数据帧的形式进行传输的,一个数据包中包含多个资源。

http头部压缩和缓存

我们在请求内容的时候,有时候会出现你请求的内容很少,但是请求头字段的体积比内容的体积都大的情况,而且每次请求就带着这个相同请求头,一旦1万个请求过来了,压力就明显了,下面是例子。

压缩以后减少了一般的体积,而且它还会缓存请求头,因为每次的请求头都一样,所以在底层,它将这个请求头用一个符号比如1来表示去发请求,而后端也会去解析这个1进而进行处理,所以原来是一大段的字段内容,而现在就是一个符号就表示出来了。

兼容http1.1,基于https进行部署,服务端主动推送内容

如果发现浏览器不支持2.0,则自动向下兼容

部署升级,则如下

浏览器与nginx交互用https进行加密传输,反向代理nginx与服务器的comact是明文传输

前端必备性能知识 - http2.0的更多相关文章

  1. iOS性能之HTTP2.0

    在移动互联网领域蓬勃发展的今天,APP的性能也成为各大公司重点关注的方向,该系列文章主要针对iOS的性能的几个方面做一些研究. 什么是HTTP2.0? 网上很容易搜到关于HTTP2.0的概念的文章,这 ...

  2. Web前端必备-Nginx知识汇总

    一.Nginx简介 Nginx是一个高性能.轻量级的Web和反向代理服务器, 其特点是占有内存及资源少.抗并发能力强. Nginx安装简单.配置简洁.启动快速便捷.支持热部署.支持 SSL.拥有高度模 ...

  3. WEB前端必备掌握知识

    1.跨域: 跨域问题是由于javascript语言安全限制中的同源策略造成的.

  4. HTTP2.0 简明笔记

    前言 RFC2616发布以来,一直是互联网发展的基石.HTTP协议也成为了可以在任何领域使用的核心协议,基于这个协议人们设计和部署了越来越多的应用.HTTP的简单本质是其快速发展的关键,但随着越来越多 ...

  5. HTTP2.0简明笔记

    版权声明:本文由史燕飞原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/82 来源:腾云阁https://www.qcloud ...

  6. SPDY以及HTTP2.0

    背景介绍 HTTP2.0跟SPDY在不少理念上是相似的,目的都是为了提升HTTP1.1的性能. HTTP2.0将会是业界的标准,比SPDY要完善,今后可能会都转向http2.0而放弃SPDY. SPD ...

  7. 前端性能优化的另一种方式——HTTP2.0

    最近在读一本书叫<web性能权威指南>谷歌公司高性能团队核心成员的权威之作. 一直听说HTTP2.0,对此也仅仅是耳闻,没有具体研读过,这次正好有两个篇章,分别讲HTTP1.1和HTTP2 ...

  8. 前端必备的 HTTP 知识

    HTTP 起源 HTTP 是由蒂姆·伯纳斯-李(TimBerners-Lee)于1989年在欧洲核子研究组织(CERN)所发起 其中最著名的是 1999 年 6 月公布的 RFC 2616,定义了 H ...

  9. HTTP,HTTP2.0,SPDY,HTTPS你应该知道的一些事

    作为一个经常和web打交道的程序员,了解这些协议是必须的,本文就向大家介绍一下这些协议的区别和基本概念,文中可能不局限于前端知识,还包括一些运维,协议方面的知识,希望能给读者带来一些收获,如有不对之处 ...

随机推荐

  1. POJ:2060-Taxi Cab Scheme(最小路径覆盖)

    传送门:http://poj.org/problem?id=2060 Taxi Cab Scheme Time Limit: 1000MS Memory Limit: 30000K Total Sub ...

  2. selenium2截图ScreenShot的使用

    截图是做测试的基本技能,在有BUG的地方,截个图,保留失败的证据,也方便去重现BUG.所以,在自动化的过程中,也要能截图,也要能在我们想要截取的地方去截图,且能在错误产生时,自动的截图. 示例: 脚本 ...

  3. Python之code对象与pyc文件(一)

    Python程序的执行过程 我们都知道,C语言在执行之前需要将源代码编译成可执行的二进制文件,也就是将源代码翻译成机器代码,这种二进制文件一旦生成,即可用于执行.但是,Python是否一样呢?或许很多 ...

  4. day04_07 while循环01

    while循环结构: #while 条件: print("any") print("any") 死循环案例 num = 1 while num<=10 : ...

  5. 2018"百度之星"程序设计大赛 - 资格赛

    调查问卷  Accepts: 1546  Submissions: 6596  Time Limit: 6500/6000 MS (Java/Others)  Memory Limit: 262144 ...

  6. 九度oj 题目1416:猴子吃坚果

    题目描述: 动物园的猴子吃坚果的顺序都是按强壮程度来定的,最强壮的吃完才能轮到下一个,现在我们给出各个猴子的名字,强壮程度,吃饱的量,然后查询对应的猴子必须要扔多少坚果才可以轮到. 输入: 输入有多组 ...

  7. jQUery中的$(document).ready()方法和window.onload()方法的区别

    1.常规的Javascript代码中,通常使用window.onload方法 window.onload = function(){//代码} 2.jquery中,则使用$(document).rea ...

  8. ACM程序设计选修课——1057: Beautiful Garden(模拟+耐心调试)

    1057: Beautiful Garden Time Limit: 5 Sec  Memory Limit: 128 MB Submit: 25  Solved: 12 [Submit][Statu ...

  9. [cogs729]圆桌问题(最大流)

    传送门 模型 二分图多重匹配问题,可以用最大流解决. 实现 建立二分图,每个单位为X集合中的顶点,每个餐桌为Y集合中的顶点,增设附加源S和汇T. 1.从S向每个Xi顶点连接一条容量为该单位人数的有向边 ...

  10. TCP面试题之为什么需要三次握手才能建立连接/四次挥手才能断开连接

    为什么需要三次握手才能建立连接? 答:为了初始化Sequence Number(序列号)的初始值,要通知双方数据包的序号,作为以后通讯的序号,以保证在网络传输过程,不会因为网络原因而导致乱序: 为什么 ...