HTTP/2 下不要使用过时的前端优化规则

在传统前端开发中，我们被灌输了很多前端奇技淫巧优化法则，例如 Yahoo 前端优化军规。 然而随着 http/2 的流行，我们很多性能优化方法作用变弱或者起副作用。

截至 2018 年 h2 的市场状况

除了 IE11 以下的版本，主流浏览器均已支持 http/2。随着 BAT 纷纷加密流量，https 乃至 h2 的支持渐渐成为了主流。

h2 的关键优势一：更强的并发加载文件的能力

h2 支持多路复用(MultiPlexing)，意味着不会为每个文件建立一个连接并出现阻塞，而是多个请求共用一个连接，同时处理。并且具备流控、优先级、服务器推送等功能，传输更具优势。

h2 的关键优势二: 更小的 http 请求代价

HPACK 压缩算法将维护一张索引表，将极大减少重复的 header 内容（比如同样的 cookies）。这样 http 请求所占的带宽将更小，具有更好的性能。

以下过时的法则不再必须

• 拆分域名：这种情况下拆分域名反而将降低页面加载速度。
• 不需要 css sprites：多路复用技术能够同时加载多个小文件，同时 Header 压缩使小文件加载更快。而 css sprites 图的维护代价比较大，如无必须，不建议使用。
• 可选的 CSS 和 JavaScript 内联：理由同上，但对于尺寸过小的文件，它还能起到一点作用。
• 静态文件合并：可选，而且会降低缓存利用效率。
• 使用无 cookie 的域名：将产生一次 DNS 解析并重新建立一个连接。由于 TCP 慢启动机制，这反而会带来不良影响。

可以说，http/2 将使开发者更加专注于代码的可维护性，而不是优化本身。但需要注意的是：服务器延迟对 http/2 的性能影响较大，在高延迟的情况下可能反而不如 http/1，参考资料中的图书具有更详尽的技术细节和性能统计。

参考

图书 《HTTP/2基础教程》 浏览器支持 http/2 的情况 Can I use… Support tables for HTML5, CSS3, etc