2015年发布的HTTP/2是现代网络的一大升级，虽然HTTP/1.1工作得足够好，但它是在完全双向加密、1.9MB网页和3秒交付时间之前的时代建立的。我们需要一个适用于现代网络的现代协议，而HTTP/2承诺可以实现。当然，将整个网络转移到一个新的协议并不容易。我们已经有18年的HTTP/1.1，这意味着18年的传统应用、框架和开发实践。就软件而言，这是一个很长的时间，而现在HTTP/2已经解决了很多旧协议的限制，很多这些应用和实践都需要更新。在这篇文章中，搬主题将介绍一下HTTP/2对前端开发的影响。请记住，HTTP/2仍然只被83%的浏览器所支持。如果你选择实施这些变化，一定要检查你的访问者是否能从中受益。一、域名分片HTTP/1.1的最大限制之一是缺乏多路复用。在HTTP/1.1中，网站上的每个资源都是一个接一个地下载。这意味着，一个有100个文件的网站按照浏览器请求的顺序逐一传输每个单独的文件。每个文件都要等到它之前的文件完成后才开始传输。为了加快下载速度，浏览器开始支持从不同域名同时下载。例如，如果一个网站使用jQuery库，这意味着浏览器可以从原服务器下载页面的HTML，同时从另一个服务器下载jQuery，从而加快页面加载时间。域名分片通过故意将资产转移到不同的网域来利用这一点。HTML可以托管在一个域名上，而图像、CSS和JavaScript文件则托管在其他域名或子域上。浏览器将打开与每个域的单独连接，并并行下载文件，绕过HTTP/1.1的限制。HTTP/2是如何解决这个问题的？HTTP/2原生支持单个连接的多路复用。浏览器为所有请求打开一个与网络服务器的TCP连接。域分片实际上会损害性能，因为每个新连接都需要进行DNS查询和TCP握手。有了HTTP/2，将所有资产转移到同一个域就更容易、更快。二、合并由于HTTP/1.1中缺乏复用功能，导致了另一个聪明的技巧的产生，即资源串联。资源串联是指将多个小文件–如CSS和JavaScript文件–合并成一个大文件。其想法是，传输多个小文件的开销要比传输一个大文件的开销大得多。连接法也被用来将图像合并成一个表。串联背后的想法是，传输一个稍大的文件的开销比传输多个小文件的开销要小。问题是，这降低了模块化程度，影响了缓存管理和页面加载时间。如果一个单一的CSS规则或JavaScript行发生变化，那么整个文件就需要重新缓存。浏览器也可能最终下载那些从未被使用的代码。HTTP/2是如何解决这个问题的？通过重复使用同一连接，多路复用消除了下载单个文件的大部分开销。然而，当串联与压缩搭配使用时，串联仍然是有用的。压缩非常小的资产的成本不值得额外的处理时间，虽然一些网络服务器让你设置一个阈值（在Nginx中，默认为20字节或更小），但串联其中一些文件可以帮助减少它们的大小。三、内联与串联一样，资源内联是另一个旨在减少下载次数的技巧。内联将外部资源直接嵌入到一个网页的HTML中。例如，JavaScript和CSS文件分别成为和虽然内联减少了传输的文件数量，但它大大增加了基础HTML文档的大小。它还使浏览器无法缓存资源，因为这些资源现在是网页的一部分。HTTP/2是如何解决这个问题的？内联抵消是HTTP/2最强大的功能之一，它同时增加了HTML文档的大小并减少了需要复用的文件数量。通常情况下，浏览器会并行下载HTML、图像和样式表，但如果采用内联方式，浏览器必须将这三个文件作为一个文件下载。内联不仅可以让浏览器复用，而且还可以让浏览器和代理服务器缓存外部资源，以加快传输速度。四、性能比较我们运行了一个基准测试，以比较带有前端优化的HTTP/1.1和没有优化的HTTP/2之间的差异。我们使用三种不同的配置设置了这个测试。没有优化的HTTP/1.1HTTP/1.1，对图像进行域分片，对JS和CSS进行内联。没有优化的HTTP/2每个网站都被托管在运行Nginx 1.10.3的f1-micro Google Compute Engine实例上。我们使用Nginx的默认设置，但TLS除外。火狐和Chrome需要HTTP/2的TLS，所以为了消除对性能的影响，我们为所有三个服务器都启用了TLS。对于网站的内容，我们使用了免费网站模板。我们使用Browsertime 3.0.13来收集性能统计数据。对于以下每个指标，我们显示了Sitespeed.io计算的平均值（以毫秒计）。FirstPaint：直到浏览器第一次开始渲染页面的时间。BackEndTime：服务器生成并开始发送HTML所需的时间。ServerResponseTime：服务器发送响应所需的时间。PageLoadTime: 页面加载所需的时间，从最初请求到在浏览器中加载完成。1、HTTP/1.1没有优化的情况下结果表指标Test 1Test 2Test 3平均首次渲染469491463474后端时间205184188192服务器响应时间90849590页面加载时间810712833785时间轴不出所料，没有优化导致了最长的页面加载时间。当其他资源完成下载时，资源花了大部分时间被封锁，使时间线更像一个瀑布形状。2、HTTP/1.1 优化的情况下 结果表 指标 Test 1Test 2Test 3平均 首次渲染 359336341345 后端时间 181189200190 服务器响应时间 91769587 页面加载时间 647586613615时间轴使用级联、内联和域名分片的结果是，下载时间大大加快，在首次绘制时节省了近100ms，在页面加载时间上节省了170ms。3、HTTP/2 没有优化的情况下 结果表 指标 Test 1Test 2Test 3平均 首次渲染 488477444470 后端时间 184183181183 服务器响应时间 92868889 页面加载时间 624641601622时间轴虽然HTTP/2在整体上比优化后的HTTP/1.1稍慢，但节省的是初始连接时间。浏览器没有为每个资源创建一个连接，而是重复使用其初始连接来下载和排队其他资源。这导致大多数资源的下载时间比HTTP/1.1少，尽管总时间略长。五、最后总结虽然HTTP/2修复了HTTP/1.1的很多问题，但这并不意味着所有的前端开发实践都已经过时了。诸如最小化和从内容交付网络（CDN）托管资源等做法仍被推荐用于减少文件大小和提高下载速度。HTTP/2还引入了后端功能–如头压缩和服务器推送–承诺使网站更快。我们怀疑对关键资源使用服务器推送也会让所有重要的FirstPaint时间下降到HTTP/1.1与前端优化的程度。
THE END
