再谈：HTTP/2并不意味着更多请求就是更好

2023-12-05 17:05:58

HTTP/2协议通过多路复用技术，在单个TCP连接上同时处理多个请求和响应。这种设计极大减少了因建立新连接带来的开销，从而提升了页面加载速度。然而，并非所有情况下增加请求数量都能带来预期的性能提升。

减少请求数量与性能

虽然HTTP/2允许在同一连接上传输多个资源，但过多的请求可能会占用服务器资源和带宽。对于每个请求，即使使用了多路复用技术，客户端仍需处理解析和响应这些请求的开销。因此，减少不必要的请求数量依然是提高网站效率的有效策略。

解决方案一：合并文件

通过将多个CSS或JavaScript文件合并成一个文件来降低请求数量。这种方法减少了HTTP/2中多路复用带来的额外开销，同时也提高了加载速度。

代码示例:

# 使用Gulp合并CSS文件
var gulp = require('gulp');
var concat = require('gulp-concat');

gulp.task('concat-css', function() {
    return gulp.src(['src/css/style1.css','src/css/style2.css'])
        .pipe(concat('all-styles.css'))
        .pipe(gulp.dest('dist/css/'));
});

操作步骤:

安装Gulp和gulp-concat插件。
创建如上所示的脚本，定义任务合并指定路径下的文件。
运行gulp concat-css命令以执行合并。

解决方案二：资源内联

对于小量的数据（例如少量CSS或JavaScript代码），可以考虑直接在HTML文档中嵌入这些数据，而不是发起额外的请求来获取它们。这种方法尤其适合于对页面加载速度要求极高的场景。

示例:

<!-- 直接将CSS内容写入style标签 -->
<style>
    body { font-family: Arial, sans-serif; }
</style>

<!-- 将JavaScript内联到script标签中 -->
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        console.log("页面已加载完成");
    });
</script>

增加请求数量与性能

在一些场景下，适当增加请求数量可能带来更好的用户体验。例如，使用预加载或预连接技术可以提前获取资源，缩短用户等待时间。

解决方案三：HTTP/2 Server Push

通过配置服务器，在响应初始请求时主动推送相关资源到客户端缓存中，可以在不需要额外的客户端请求的情况下提供这些资源。这尤其适用于那些确定会被浏览器后续请求加载的资源文件。

代码示例:

# Nginx服务器配置实现Server Push
http {
    server {
        listen 80;
        server_name example.com;

        location /index.html {
            add_header Link '</style.css>; as=style; rel=preload' always;
        }
    }
}

操作步骤: