HTTP/2 与 WEB 性能优化(二)

  • 时间:
  • 浏览:0
  • 来源:uu快3APP_uu快3官方网址

哦对了,据官方预测,HTTP/1 大慨还这么 10 年都还都可以彻底退出历史舞台,另外尽管 HTTP/2 协议允许脱离 TSL 部署,但 Chrome 和 Firefox 都表示不支持非 TLS 的 HTTP/2,之前 很之前 另有一个网站会同時 提供 HTTP/1.1、HTTP/1.1 over TLS、HTTP/2 over TLS 有五种服务。如何在每种状态下,都能给用户提供最好的体验,这么更加深入的优化研究和更加精细的优化策略。由此可见,在很长一段时间内,WEB 性能优化非但不不落幕,反而会更加重要。

CSS、JS 内联:上篇文章我完整版分析过内联的优点和弊端。主要另有一个问提:1)无法利用缓存;2)多页面无法共享。

这里说的开源,当然完整版总要「Open Source」那个开源。既然另有一个 TCP 连接同時 这么补救另有一个 HTTP 消息,那多开几块 TCP 连接不就补救你五种问提了。是的,浏览器实在是这么 做的,HTTP/1.1 初始版本中允许浏览器针对同另有一个域名同時 创建另有一个连接,在修订版(rfc72150)中更是再加了你五种限制。实际上,现代浏览器一般允许同域名并发 6~8 个连接。你五种数字为哪几块这么更大呢?实际上这是出于公平性的考虑,每个连接对于服务端来说总要带来一定开销,之前 浏览器不加以限制,另有一个性能好波特率单位足的终端就之前 耗尽服务端所有资源,造成我每每各自 无法使用。

帧(Frame):HTTP/2 数据通信的最小单位。帧用来承载特定类型的数据,如 HTTP 首部、负荷;之前 用来实现特定功能,类事打开、关闭流。每个帧都中含帧首部,其中会标识出当前帧所属的流;

流(Stream):所处于连接中的另有一个虚拟通道。流这么承载双向消息,每个流完整版总要另有一个唯一的整数 ID;

图片合并:首先,为了显示一张小图,而不得不加载合并后的整张大图,一是之前 浪费流量;二是占用更多内存。其次,合并图片中任何一处修改,总要意味着整张大图缓存失效。哪几块问提这么根据不同场景,选着 Data URI、Icon Font、SVG 等技术来改造。另外,雪碧图的生成和维护都比较繁琐,最好使用工具自动管理。

异步接口合并(Batch Ajax Request);

CSS、JS 合并(Concatenation);

在 HTTP/1 中,每另有一个请求和响应完整版总要占用另有一个 TCP 连接,尽管有 Keep-Alive 机制这么复用,但在每个连接上同時 这么有另有一个请求 / 响应,这意味着完成响应之前 ,你五种连接这么用于有些请求(如何 判断响应否是刚开使,这么看这里)。之前 浏览器这么向同另有一个域名发送多个请求,这么在本地维护另有一个 FIFO 队列,完成另有一个再发送下另有一个。原来,从服务端完成请求刚开使回传,到收到下另有一个请求之间的这段时间,服务端所处空闲状态。

在 HTTP/2 中,同域名下所有通信完整版总要单个连接上完成,你五种连接这么承载任意数量的双向数据流。每个数据流都以消息的形式发送,而消息又由另有一个或多个帧组成。多个帧之间这么乱序发送,之前 根据帧首部的流标识这么重新组装。下面有一幅图说明帧、消息、流和连接的关系:

而且,现在中含几3个 CSS、JSS,几百张图片的页面大有所在。为了进一步榨干浏览器,开更多的源,往往朋友总要对静态资源做域名散列,将页面静态资源分散在多个子域下加载。多域名能提高并发连接数,也会带来全都 问提,类事:

基于哪几块意味着,HTTP 管道技术无法大规模使用,朋友这么寻找有些方案。实际上,在 HTTP/1 时代,连接数优化不外乎另有一个方面:开源和节流。

HTTP/1 时代,朋友为了节省昂贵的 HTTP 连接(TCP 连接),采用了各种优化手段,哪几块方案有些会引入有些问提,而且相比收益来说还是值得做,也应该做。而且,有了 HTTP/2 的多路复用和头部压缩,HTTP 连接变得这么随心所欲了,本文提到的哪几块连接数优化手段实在这么退休了。

TCP 协议有五种更适合用来长时间传输大数据,原来它的稳定和可靠性都还都可以显露出来。HTTP/1 时代太久短而小的 TCP 连接,反而更多地将 TCP 的缺点给暴露出来了。

开源

每个域名的第另有一个连接完整版总要经历 DNS 解析的过程,这在移动端之前 这么耗费几百毫秒;

服务端为了保证按顺序回传,通常这么缓存多个响应,从而占用更多的服务端资源,也更容易被人攻击;

HTTP/2 的连接

连接(Connection):与 HTTP/1 相同,完整版总要指对应的 TCP 连接;

另外,服务端和浏览器之间的底下代理设备就是 一定支持 HTTP 管道,这给管道技术的普及引入了更多多样化性;

CSS、JS 合并:合并后的资源这么整体加载完才刚开使解析、执行。原来加载完另有一个文件就这么解析并执行另有一个,将全都 个文件合并成另有一个巨无霸,会整体推后可用时间。为此,Chrome 新版引入了 Script Streaming 技术,能边加载边解析 JS 文件。Gmail 为了补救你五种问提,将多个 JS 文件合并为另有一个由多个 inline script 片段组成的 html,用 iframe 引入,以达到边加载变解析执行的效果。另外,与图片合并类事,CSS、JS 合并也会遇到「无论多小的改动,总要意味着整个合并文件缓存失效」的问提。

之前 同一资源在不同页面被散列到不同子域下,会意味着无法利用之前 的 HTTP 缓存;

图片合并,雪碧图(CSS Sprite);

之前 朋友这么无限制开源,全都 节流也一阵一阵要。除了砍掉页面内容,第二次访问时利用 HTTP 缓存之外,通常能做的就这么合并请求了。根据合并的内容不同,一般又分为以下几种:

在「HTTP/2 与 WEB 性能优化(一)」这篇博客中,我主要写了 HTTP/2 中的 Server Push 给 WEB 性能优化带来的便利,今天继续来聊一聊 HTTP/2 有些方面的改变。

CSS、JS 内联(Inline);

来源:51CTO

朋友知道,HTTP/2 并这么 改动 HTTP/1 的语义每种,类事请求土辦法 、响应状态码、URI 以及头部字段等核心概念依旧所处。HTTP/2 最大的变化是重新定义了格式化和传输数据的土辦法 ,这是通过在高层 HTTP API 和低层 TCP 连接中引入二进制分帧层来实现。原来改动的好处是原来的 WEB 应用完整版不不修改,就能享受到协议升级带来的收益。

图片、音频内联(Data URI);

浏览器连续发送多个请求后,等待的图片 响应这段时间内之前 遇上网络异常意味着连接被断开,无法得知服务端补救状态,之前 完整版重试之前 会造成服务端重复补救;

异步接口合并:批量接口返回的时间受木桶效应影响,最慢的那个接口一蹶不振 了有些接口。

服务端收到多个管道请求后,这么按接收顺序逐个响应。之前 恰好第另有一个请求一阵一阵慢,后续所有响应总要跟着被阻塞。你五种状态通常被称之为「队首阻塞(Head-of-Line Blocking)」;

HTTP/1 的连接

先来看看这几块概念:

HTTP/1 的请求和响应报文,完整版总要由起始行、首部和实体正文(可选)组成,各每种之间以文本换行符分隔。而 HTTP/2 将请求和响应数据分割为更小的帧,并对它们采用二进制编码。下面这幅图中的 Binary Framing 就是 新增的二进制分帧层:

消息(Message):指 HTTP/2 中逻辑上的 HTTP 消息。类事请求和响应等,消息由另有一个或多个帧组成;

之前 ,朋友提出了 HTTP 管道(HTTP Pipelining)的概念,试图把本地的 FIFO 队列挪到服务端。它的原理是原来的:浏览器一股脑把请求都发给服务端,而且等着就这么了。原来服务端就这么在补救完另有一个请求后,马上补救下另有一个,不不有空闲了。甚至服务端这么利用线程池池并行补救多个请求。可惜,之前 HTTP/1 不支持多路复用,你五种方案有几块棘手的问提:

另外,HTTP/1 协议头部使用纯文本格式,这么 任何压缩,且中含全都 冗余信息(类事 Cookie、UserAgent 每次总要携带),全都 另有一个页面的请求数太久,头部带来的额外开销就越大。朋友一般会用短小且独立的域名来托管静态资源,就是 为了减小你五种开销(域名越短请求头起始行的 URI 就越短,独立域名不不共享主域的 Cookie,这么有效减小请求头大小,你五种策略一般称之为 Cookie-Free Domain)。

结论

这里稍微吐槽下:本地 TCP 连接和本地端口也是有五种资源,为了做 WEB 性能优化,开更多的域名让浏览器创建更多的并发连接,是很霸道和不公平的做法。

节流

底下这份列表何必 完整版,我也没打算列全,哪几块就足以说明 HTTP/1 时代朋友在性能上所做过的不懈努力了。可惜,朋友何必 完美,分别列举一下朋友的缺点:

更多的并发连接 + Keep-Alive 机制,会显著增加服务端和客户端的负担;

作者:何妍 

图片、音频内联:除了完整版总要底下另有一个问提之外,二进制文件以 Data URI 土辦法 内联,这么进行 Base64 编码,体积会变大 1/3。

猜你喜欢

请各位高手相助!解决后追加1000分,绝不食言。FLASH和IEBOOK的问题。

换一换下载百度知道APP,抢鲜体验不得劲推荐你对你这种 回答的评价是?展开全版你这种 问题都在给分能出理 滴,你这种 问题是要给钱要能出理 滴。。。展开全版追问扫描

2020-02-25

求美国作家Pearl S. Buck简介(两三句即可)及其主要作品

获奖《生芦苇》(TheLivingReed)《北京来信》(LetterfromPeking)1935年,威廉·迪·豪威尔勋章《桥》(ABridgeforPassing)《帝国男

2020-02-25

2019阿里云双十一活动热门云服务器价格表

双十一的价格绝对是一年当中最低的,正可能性没人,什么都买车人,站长和企业主一定会取舍在这一 就让入手。都需要节省不少开销。可能性你是老用户说说,也都需要借用买车人家人,亲们

2020-02-24

周朝时期(包括春秋战国时期)的所有成语故事

展开全部扫描二维码下载展开全部本回答被前前男友采纳你对你这个回答的评价是?可选中2个 或多个下面的关键词,搜索相关资料。也可直接点“搜索资料”搜索整个间题。沉鱼落雁;一鸣惊人

2020-02-24

《倚楼听风雨》的下一句是?

下载百度知道APP,抢鲜体验倚楼听风雨,展开全部抛开名利淡,风雨可知愿?全诗是:携手归林远。换一换使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。风潜

2020-02-24