文档章节

HTTP/2 对 Web 性能的影响(下)

OneAPM蓝海讯通
 OneAPM蓝海讯通
发布于 2016/03/29 11:40
字数 1651
阅读 27
收藏 0

######一.前言 我们在 HTTP/2 对 Web 性能的影响(上)已经和大家分享了一些关于 Http2 的二项制帧、多用复路以及 APM 工具等,本文作为姊妹篇,主要从 http2 对 Web 性能的影响、http2 使用的利弊以及一些正在进行中的相关工作等方面与大家进行分享。

######二.Web 性能影响:与内联、级联及图像精灵说再见?

HTTP/2 多路复用对前端 Web 开发人员造成了深远的影响。长久以来,人们用尽方法,试图通过捆绑相关资产来削减连接的数量,而现在这一切都不需要了。人们曾经尝试过的方法包括:

  • **JavaScript 与 CSS 文件级联:**将多个小文件合成一个大文件,从而降低总体请求数量。
  • **图像精灵:**将多个小图像合成一张大图像。
  • **域名分片:**在多个域之间发送静态资产请求,从而增加浏览器所能允许的总体开放 TCP 连接数量。
  • **内联资产:**将资产同 HTML 文档源绑定,包括 base-64 编码图片,以及直接写入 script 标签的 JavaScript 代码。

因为不需要再绑定资产,我们就有了更多机会将 Web 应用程序中的小片段加以缓存。举个例子可以帮我们更好的理解这一点:

一个级联且指纹验证型 CSS 文件被解绑为四个较小的指纹验证文件。

常见的级联模式是将一个应用程序内不同页面的样式表文件进行绑定,形成单一的 CSS 文件,以减少资产请求的数量。这个大文件随后会通过文件名内的 MD5 哈希值进行指纹校验,确保其能够被浏览器主动缓存。遗憾的是,这样的解决方案意味着,当站点的可视化布局中出现了任何一点小的改变,如标题字体的改变,都需要重新下载整个级联文件。

当对小型资产文件进行指纹校验时,相当一部分的 JavaScript 与 CSS 组件都不会频繁产生变动,因此可以被浏览器缓存 --也就是说,任何一个单一功能的小型重构,不会再导致大量的 JavaScript 应用程序代码或者 CSS 失效。

最后,级联机制的消失能够降低前端构建基础的复杂性。与以往通过一系列预置步骤来级联资产不同,现在它们作为小型文件,可以直接被放入 HTML 文档中。

#####三.实际使用 HTTP/2 的潜在弊端

仅仅针对支持 HTTP/2 客户端而做出的各类优化,意味着那些不支持 HTTP/2 的浏览器可能因此陷入不利境地。那些“有年头”的浏览器们仍然倾向于绑定资产,以此降低连接数量。截至 2016 年 2 月,caniuse.com 网站报道称,全球浏览器中能够支持 HTTP/2 的占比 71%。与之前浏览器们决定放弃支持 IE 8.0 时一样,支持 HTTP/2 或采取某种混合作业的方式——这样的决定只能根据各个网站自身的相关数据来做出。

但是我们相信大规模支持肯定是不可避免的,就像一开始只有 Chrome 浏览器支持 window.performance 接口,方便一些 Web 工具进行数据的采集,像上面说过的 Browser Insight ,我曾经和他们的技术支持聊过,就是靠这种方式来实时的采集用户对网站的访问信息等。之后,大势所趋,各个浏览器厂商都纷纷开放了相关接口

正如可汗学院的博文所述,他们曾分析其网站上的 HTTP/2 流量,事实上,拆分大量资产会增加所传输字节的总量。而使用zlib压缩单一大型文件,比压缩多个小型文件要更有效率。对于拥有成百上千解绑资产的 HTTP/2 站点来说,这种效应更为显著。

在浏览器中使用 HTTP/2 还要求我们通过 TLS 进行资产传递。对于菜鸟们来说,设置 TLS 证书就是个烦人的活儿。幸运的是,诸如 Let’s Encrypt 的开源项目正努力让证书注册工作变得更加便捷。

#####四.仍在进行中的工作

大部分用户并不在意你的站点用了啥协议——他们只想要它速度快,运行如人预期。虽然 HTTP/2 已经获得正式批准快一年了,开发人员还在学习如何利用它来建立更快速网站的最优实践。换用 HTTP/2 的好处更多取决于具体站点的架构情况以及使用现代浏览器的用户比率。再有就是,调试新协议很有挑战性,更易用的开发工具还在研制中。

虽然有这些挑战,HTTP/2 的采纳度仍在增加。根据研究人员扫描流行网站属性的结果,排名前列的站点中使用 HTTP/2 的一直在增加,特别是 CloudFlareWordPress 在 2015 年宣布提供支持之后。在考虑转换到新协议时,很重要的一点是利用 Browser insightNewRelic 之类的 APM 工具,仔细测量资源和页面在不同环境下的加载时间。

如下图所示,可以看到每一次慢加载的详细情况,非常方便。

供应商和专业网站人员都熟悉这一转换背后的含义,从真实用户数据中做出判断才是关键的。在网站臃肿危机的当下,无论何种协议,都应该以削减资源数量为目标。

在此 HTTP/2 系列的第二部分中,我们会聚焦于如何在服务器上实现 HTTP/2 和调试真实网络通信的具体实现细节。

本文作者为 Clay Smith,由 OneAPM 产品运营进行翻译编辑

原文地址:https://dzone.com/articles/how-http2-is-changing-web-performance-best-practic

Browser Insight 是一个基于真实用户的 Web 前端性能监控平台,能够帮大家定位网站性能瓶颈,网站加速效果可视化;支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章,请访问 OneAPM 官方技术博客 本文转自 OneAPM 官方博客

© 著作权归作者所有

OneAPM蓝海讯通
粉丝 94
博文 631
码字总数 1266889
作品 0
海淀
私信 提问
通用服务器 hi-nginx 1.4.2 发布,多项重要更新

支持多种编程语言混合开发 Web 应用的通用服务器 hi-nginx-1.4.2 已经发布了。 此次发布包含多项重要更新: 支持 Python 2 和 3,通过编译选项--with-http-hi-python-version 删除 boost.py...

所以呢
2018/04/03
1K
3
[转]性能比较:.NET Remoting 与 ASP.NET Web 服务

http://www.cnblogs.com/cheatlove/articles/385119.html 摘要:本文对 Microsoft ASP.NET Web 服务与 Microsoft .NET Remoting 的相对性能进行比较。Microsoft ASP.NET Web 服务的互操作性最......

夏春涛
2008/06/30
0
0
PHP 开发中的外围资源性能分析(二)

上一篇中我们分析了后端外围资源中 IO 操作和中间件服务对整个 PHP Web 应用体验的影响。今天我们分析数据库给整个应用性能带来的影响。 数据库 首先直观地看两张图,一张是来自 OneAPM 后台...

OneAPM蓝海讯通
2015/10/10
31
0
[spdy]初识——比http好在哪里

spdy是google自创的web传输协议,为的是改善http的性能,google说比较spdy和http,前者的性能要比后者快64%。是否属实我不知道,反正快64%这个数字让我对spdy产生了兴趣。 既然spdy好,那它好...

亭子happy
2012/09/18
196
0
HTTP/2 对 Web 性能的影响(上)

一.前言 HTTP/2 于 2015 年 5 月正式推出。自诞生以来,它就一直在影响着网络性能最佳实践。在本篇文章中,我们将讨论 HTTP/2 的二进制帧、延迟削减、潜在利弊以及相应的应对措施。 超文本传...

OneAPM蓝海讯通
2016/03/28
12
0

没有更多内容

加载失败,请刷新页面

加载更多

左边竖条的实现方法

下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签是一个 div : 1 < div > div> 定义如下通用CSS: 1 2 3 4 5 6 div{ position : relative ; width : 200px ; height ...

前端老手
26分钟前
2
0
java利用ECHARTS.JS在前台显示图表

步骤1: (1)在java后台,使用MSQL分组函数,列出所有线在对应的点的值, (2)组成的Map如图所示: 注意: key为0的value表示X轴需要的数据;key为其他的值表示图表线条的名字,value为x轴的点对应的y...

文文1
28分钟前
6
0
解题博客

https://blog.csdn.net/hk2291976/article/category/9265848

素雷
53分钟前
4
0
linux-ubuntu下使用linuxdeployqt+appimagetool将qt程序打包成xxx.AppImage文件

下文中提及的inuxdeployqt patchelf appimagetool工具及示例下载地址: 链接: https://pan.baidu.com/s/1BGm_btMIe75uW9hOC09Xlg 提取码: 7ayh 需要创建目录及文件 xxx.AppDir xxx.AppDir/Ap...

shzwork
58分钟前
5
0
javascript-ASCII码混合四位随机验证码

// 产生一个随机字符库:数字大写小写的数量是对应的 function randomStr(){ // 产生库 var strData = ""; for(var i=0;i<4;i++){ var num = random(0,9); var az = String.fromCharCode(ra......

ACKo
58分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部