HTTP请求合并 vs HTTP并行请求，谁更快？
面试时，经常会问候选人一个问题：如何提高网页性能？
有些根本的人城市提到这么一条：减少/合并HTTP请求。
继续问：浏览器不是可以并行下载资源吗？将多个资源合并成一个资源，只使用一个HTTP请求下载，难道要比用多个HTTP请求并行下载没有合并过的多个资源速度更快？
候选人：……（至今，还没有遇到让我对劲的回答）
减少HTTP请求，是雅虎前端性能优化35条军规的第1条，2006年雅虎提出了这35条军规，从那以后，就深深地影响到了一批又一批的前端开发者，即使在12年后的今天，影响力依旧不减…..
但是，雅虎军规中还有1条是：拆分资源以最大化操作浏览器并行下载的能力。此刻问题就来了，减少HTTP请求，但网页所需的资源并不能减少（否则网页就不再是之前的网页了），所以减少HTTP请求，主要是通过合并资源来实现的，一边是建议合并资源，一边是建议拆分资源，显然是有斗嘴的处所，那么到底该怎么做呢？网上有些文章也讨论过这个问题，但大多是勾留在想固然的理论分析上，而且忽略了TCP传输机制的影响。今天，老干部就带大家一起用尝试+理论，仔细探讨下这个问题。
HTTP请求过程一个HTTP请求的主要过程是：
DNS解析(T1) -> 成立TCP连接(T2) -> 发送请求(T3) -> 期待处事器返回首字节（TTFB）(T4) -> 接收数据(T5)。
如下图所示，是Chrome Devtools中显示的一个HTTP请求，显示了HTTP请求的主要阶段，注意，Queueing阶段是请求在浏览器行列队伍中的排队时间，并不计入HTTP请求时间。
从这个过程中，可以看出如果合并N个HTTP请求为1个，可以节省（N-1)* (T1+T2+T3+T4) 的时间。
但实际场景并没有这么抱负，上面的分析存在几个缝隙：
浏览器会缓存DNS信息，因此不是每次请求都需要DNS解析。
HTTP 1.1 keep-alive的特性，使HTTP请求可以复用已有TCP连接，所以并不是每个HTTP请求都需要成立新的TCP连接。
浏览器可以并行发送多个HTTP请求，同样可能影响到资源的下载时间，而上面的分析显然只是基于同一时刻只有1个HTTP请求的场景。
尝试论证我们来做4组尝试，比拟一个HTTP请求加载合并后的资源所需时间，和多个HTTP请求并行加载拆分的资源所需时间。每组尝试所用资源的体积巨细有显著差异。
尝试环境：处事器：阿里云ECS 1核 2GB内存 带宽1M
Web处事器：Nginx (未启用Gzip)
Chrome v66 隐身模式，禁用缓存
Client 网络：wifi 带宽20M
尝试代码地点：https://github.com/xuchaobei/…
尝试 1测试文件：large1.css、large2.css … large6.css，每个文件141K；large-6in1.css，由前面6个css文件合并而成，巨细为846K。parallel-large.html引用large1.css、large2.css … large6.css， combined-large.html引用large-6in1.css，代码如下：
// parallel-large.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Parallel Large</title> <link rel="stylesheet" type="text/css" media="screen" href="large1.css" /> <link rel="stylesheet" type="text/css" media="screen" href="large2.css" /> <link rel="stylesheet" type="text/css" media="screen" href="large3.css" /> <link rel="stylesheet" type="text/css" media="screen" href="large4.css" /> <link rel="stylesheet" type="text/css" media="screen" href="large5.css" /> <link rel="stylesheet" type="text/css" media="screen" href="large6.css" /> </head> <body> Hello, world! </body> </html> // combined-large.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Combined Large</title> <link rel="stylesheet" type="text/css" media="screen" href="large-6in1.css" /> </head> <body> Hello, world! </body> </html>分袂刷新2个页面各10次，操作Devtools 的Network计算CSS资源加载的平均时间。
注意事项：
large1.css、large2.css … large6.css的加载时间，计算方法为从第一个资源的HTTP请求发送开始，到6个文件都下载完成的时间，如图2红色框内的时间。
两个html页面不能同时加载，否则带宽为两个页面所共享，会影响测试功效。需要期待一个页面加载完毕后，再手动刷新加载此外一个页面。
页面两次刷新时间间隔在1分钟以上 ，以制止HTTP 1.1 连接复用对尝试的影响。
温馨提示: 本文由杰米博客推荐，转载请保留链接: https://www.jmwww.net/file/biancheng/13508.html
