加载优化加载速度

优化对象就是当前这个博客项目了。

实施方案

在nginx中打开http2的功能 在http或者server层级中，添加这行代码：

http2 on;

性能对比方法

1. 开启开发者工具，network栏
2. 点上disable cache
3. 硬性加载页面。
4. 记录加载时间

在http/1.1的条件下：

加载时间分别是 3.67s 3.35s 2.09s 2.23s 2.57s 平均加载时间 2.782s

在http/2的条件下：

加载时间分别是 1.99s 1.99s 1.86s 2.09s 2.45s 平均加载时间 2.076s

提升效果：

(2.782-2.076)/2.782 = 25.37%

原理

多路复用 (Multiplexing)主要加速能力

• HTTP/1.1: 同一连接只能处理一个请求，后续请求需要排队等待（称为“队头阻塞”），即使是从同一个服务器加载多个资源，每个资源也需要单独的请求-响应周期。
• HTTP/2: 引入了多路复用技术，同一个TCP连接可以同时发送多个请求，且响应顺序可以交错进行，不需要按照请求的顺序返回，大大减少了等待时间。

资源可以并行加载，不会因为等待一个请求的返回而阻塞其他资源的加载，减少了延迟。

头部压缩 (Header Compression) 有效果 当时不是主要关键

• HTTP/1.1: 每次请求都会带上完整的请求头和Cookie等信息，特别是在需要加载大量资源时，这些冗长的头部信息会增加传输负担。
• HTTP/2: 采用了 HPACK 算法对头部进行压缩，并且头部信息在相同连接中是共享的，不必重复传输相同的头部。

效果: 减少了带宽占用，尤其是在加载多个资源时，提升了传输效率。

服务器推送 (Server Push)

• HTTP/1.1: 浏览器必须显式请求某个资源，服务器才能返回该资源。

• HTTP/2: 支持服务器推送功能，服务器可以在客户端还没有请求的情况下主动推送资源给客户端。比如，服务器可以在发送HTML时主动推送CSS和JS文件。

• 效果:

  减少了等待资源的时间，因为服务器预先将资源推送到客户端，缩短了资源获取时间。

连接管理

• HTTP/1.1: 每个请求都需要建立新的TCP连接，或者通过“Keep-Alive”保持连接活跃，但在并发请求多时，通常需要打开多个连接，增加了TCP握手和连接管理的开销。

• HTTP/2: 所有请求都在同一条TCP连接上复用，无需重复建立连接，且只需一次握手，降低了网络开销。

• 效果: 通过减少TCP连接的数量和频繁的建立/关闭连接行为，降低了连接延迟，减少了网络资源的消耗。

二进制协议

• HTTP/1.1: 基于纯文本格式，解析和处理相对较慢，并且可能出现协议头和数据流的混淆。

• HTTP/2: 使用二进制格式进行数据传输，解析更高效，且错误率更低。

• 效果: 提高了传输效率，尤其是在高并发的场景下，减少了对数据包的误解析和传输时间。

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处
最后编辑时间为: 2024/09/29 09:45