前端必备性能知识 - http2.0
前端开发中,性能是一定绕不开的,今天就来说一下前后台通信中最重要的一个通道--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的更多相关文章
- iOS性能之HTTP2.0
在移动互联网领域蓬勃发展的今天,APP的性能也成为各大公司重点关注的方向,该系列文章主要针对iOS的性能的几个方面做一些研究. 什么是HTTP2.0? 网上很容易搜到关于HTTP2.0的概念的文章,这 ...
- Web前端必备-Nginx知识汇总
一.Nginx简介 Nginx是一个高性能.轻量级的Web和反向代理服务器, 其特点是占有内存及资源少.抗并发能力强. Nginx安装简单.配置简洁.启动快速便捷.支持热部署.支持 SSL.拥有高度模 ...
- WEB前端必备掌握知识
1.跨域: 跨域问题是由于javascript语言安全限制中的同源策略造成的.
- HTTP2.0 简明笔记
前言 RFC2616发布以来,一直是互联网发展的基石.HTTP协议也成为了可以在任何领域使用的核心协议,基于这个协议人们设计和部署了越来越多的应用.HTTP的简单本质是其快速发展的关键,但随着越来越多 ...
- HTTP2.0简明笔记
版权声明:本文由史燕飞原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/82 来源:腾云阁https://www.qcloud ...
- SPDY以及HTTP2.0
背景介绍 HTTP2.0跟SPDY在不少理念上是相似的,目的都是为了提升HTTP1.1的性能. HTTP2.0将会是业界的标准,比SPDY要完善,今后可能会都转向http2.0而放弃SPDY. SPD ...
- 前端性能优化的另一种方式——HTTP2.0
最近在读一本书叫<web性能权威指南>谷歌公司高性能团队核心成员的权威之作. 一直听说HTTP2.0,对此也仅仅是耳闻,没有具体研读过,这次正好有两个篇章,分别讲HTTP1.1和HTTP2 ...
- 前端必备的 HTTP 知识
HTTP 起源 HTTP 是由蒂姆·伯纳斯-李(TimBerners-Lee)于1989年在欧洲核子研究组织(CERN)所发起 其中最著名的是 1999 年 6 月公布的 RFC 2616,定义了 H ...
- HTTP,HTTP2.0,SPDY,HTTPS你应该知道的一些事
作为一个经常和web打交道的程序员,了解这些协议是必须的,本文就向大家介绍一下这些协议的区别和基本概念,文中可能不局限于前端知识,还包括一些运维,协议方面的知识,希望能给读者带来一些收获,如有不对之处 ...
随机推荐
- Java技术——Java泛型详解
.为什么需要泛型 转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52230032 泛型在Java中有很重要的地位,网上很多文章罗列各种 ...
- P1627 中位数
P1627 中位数 题目描述 给出1~n的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是b.中位数是指把所有元素从小到大排列后,位于中间的数. 输入输出格式 输入格式: 第一行为两个正整 ...
- python基础学习笔记—— 多继承
本节主要内容: 1.python多继承 2.python经典类的MRO 3.python新式类的MRO.C3算法 4.super是什么鬼? 一.python多继承 在前⾯的学习过程中. 我们已经知道了 ...
- webdriver高级应用- 右键另存为下载文件
1.要使用右键另存,需要先按照第三方工具AutoIt: 链接: https://pan.baidu.com/s/12aBBhOOTmyQpH9hukt0XGA 密码: fcdk 2.创建一个名为loa ...
- LoadRunner web_set_sockets_option()--常用函数
web_set_sockets_option()--常用函数 设置sockets的选项. intweb_set_sockets_option(const char * option,const cha ...
- GCC内嵌汇编一些限制字符串
/******************/ “b”将输入变量放入ebx “c”将输入变量放入ecx “d”将输入变量放入edx “s”将输入变量放入esi “d”将输入变量放入edi “q”将输入变量放 ...
- javascript是脚本语言?javascript万物皆对象?
呵呵哒!带你见识下js面对对象的魅力 是的是的,退后,朕要开始装逼了- 这是什么鸟东西?是的是的,装逼开始,2016年度最佳JS编译器,ES6标准出来后,小伙伴们对新特性摩拳擦掌,奈何浏览器支持把我们 ...
- PHP魔术函数、魔术常量、预定义常量
一.魔术函数(13个) 1.__construct() 实例化对象时被调用, 当__construct和以类名为函数名的函数同时存在时,__construct将被调用,另一个不被调用. 2.__des ...
- getBoundingClientRect说明
getBoundingClientRect用于获取某个元素相对于视窗的位置集合. 1.语法:这个方法没有参数. rectObject = object.getBoundingClientRect() ...
- AC自动机详解 (P3808 模板)
AC自动机笔记 0.0 前言 哇,好久之前就看了 KMP 和 Trie 树,但是似乎一直没看懂 AC自动机?? 今天灵光一闪,加上之前看到一些博客和视频,瞬间秒懂啊... 其实这个玩意还是蛮好理解的. ...