HTTP/2 服务器推送：真香还是鸡肋？场景与优化策略全解析
啥是HTTP/2服务器推送？
服务器推送有啥好处？
服务器推送适合哪些场景？
服务器推送有哪些坑？
怎么用服务器推送？
1. HTTP/2 Link Header
2. 服务端配置(以Nginx为例)
3. 编程接口(以Node.js为例)
服务器推送的优化策略
总结
还记得以前为了优化网页加载速度，咱们绞尽脑汁把各种资源打包合并、压缩、雪碧图……累死累活的。现在有了HTTP/2，情况可大不一样了！其中一个亮眼的新特性就是服务器推送（Server Push）。
今天咱们就来聊聊这个服务器推送，看看它到底有多香，又有哪些坑需要注意。别担心，咱们用大白话，保证你听得懂，用得上！
啥是HTTP/2服务器推送？
想象一下，你点开一个网页，浏览器是不是要先下载HTML，然后再根据HTML里面的链接，一个个去下载CSS、JavaScript、图片这些资源？这就像你去餐厅点菜，服务员得一道一道菜给你上，效率可不高。
HTTP/2服务器推送呢，就像餐厅推出了“套餐”服务。你点了一份主菜（HTML），服务员直接把配菜（CSS、JS、图片）也一起给你端上来了，不用你再额外点。这样，浏览器拿到HTML的同时，相关的资源也已经准备好了，页面加载速度自然就快了许多。
用专业点的话说，服务器推送就是允许服务器在客户端请求一个资源时，主动“预判”客户端可能需要的其他资源，并提前将这些资源发送给客户端，减少客户端的请求次数和等待时间。
服务器推送有啥好处？
- 减少延迟，提升页面加载速度： 这是最直接的好处。客户端不用再傻傻地等HTML解析完再去请求其他资源，页面渲染速度嗖嗖嗖地提升。
- 减少请求数，减轻服务器压力： 客户端请求少了，服务器的负担自然也就轻了。尤其对于高并发的网站，这可是个大大的福音。
- 提升用户体验： 页面加载快了，用户体验当然更好了。谁喜欢打开一个网页等半天呢？
服务器推送适合哪些场景？
服务器推送虽好，但也不是万能的。用得好，事半功倍；用不好，反而会弄巧成拙。下面这些场景，你可以考虑用服务器推送：
- 首页关键资源： 比如首页的CSS、JavaScript、Logo图片等，这些是渲染首页必须的资源，提前推送可以显著提升首页加载速度。
- 字体文件： 字体文件通常比较大，而且会阻塞页面渲染。提前推送字体文件可以避免页面出现“闪烁”现象（先显示默认字体，再切换到自定义字体）。
- 关键路径上的资源： 通过分析网站的关键渲染路径（Critical Rendering Path），找出那些影响页面首屏渲染的资源，提前推送这些资源可以加快首屏显示。
- 用户大概率会访问的资源: 你可以通过分析用户行为，预测用户下一步可能会访问哪些页面或资源,提前推送。
服务器推送有哪些坑？
- 推送过多资源： 推送太多资源会占用带宽，反而影响其他资源的加载。别贪心，只推那些真正需要的。
- 推送了客户端已经缓存的资源： 这就浪费了。服务器需要根据客户端的缓存状态来决定是否推送。
- 推送的资源优先级不对： 不同的资源有不同的优先级。比如CSS通常比JavaScript优先级高。服务器推送时需要考虑资源的优先级，避免低优先级的资源阻塞高优先级的资源。
- 客户端不支持： 虽然现在大部分浏览器都支持HTTP/2，但还是有一些老旧的浏览器不支持。你需要做好兼容处理。
怎么用服务器推送？
1. HTTP/2 Link Header
最常用的方法是使用HTTP/2的Link头。服务器在响应头中添加Link头，告诉客户端需要推送哪些资源。
HTTP/1.1 200 OK
Content-Type: text/html
Link: </style.css>; rel=preload; as=style
Link: </script.js>; rel=preload; as=script
<!DOCTYPE html>
...
上面这个例子中，服务器告诉客户端需要预加载style.css和script.js这两个资源。rel=preload表示预加载，as属性指定资源的类型。
2. 服务端配置(以Nginx为例)
你也可以在服务器配置中启用服务器推送。以Nginx为例：
http2_push_preload on;
location / {
http2_push /style.css;
http2_push /script.js;
}
http2_push_preload on; 开启预加载链接头的自动解析并推送。http2_push指令指定要推送的资源。
3. 编程接口(以Node.js为例)
如果你使用Node.js，可以使用相关的模块来实现服务器推送。
const http2 = require('http2'); const server = http2.createServer(); server.on('stream', (stream, headers) => { const path = headers[':path']; if (path === '/') { stream.respondWithFile('./index.html', { 'content-type': 'text/html' }); const pushStream = stream.pushStream({ ':path': '/style.css' }); pushStream.respondWithFile('./style.css', { 'content-type': 'text/css' }); pushStream.end(); } }); server.listen(3000);
服务器推送的优化策略
- 精准推送： 只推送真正需要的资源，避免推送过多或无用的资源。
- 利用缓存： 服务器需要根据客户端的缓存状态来决定是否推送。可以使用
Cache-Digest头来判断客户端是否已经缓存了某个资源。 - 控制优先级： 使用
priority属性来控制推送资源的优先级。 - 监控和调整： 使用工具（比如Chrome DevTools）来监控服务器推送的效果，并根据实际情况进行调整。
- 考虑使用
103 Early Hints响应码。 Early Hints 允许服务器在发送最终响应头之前，先发送一个包含Link头的103响应，告诉浏览器可以预加载哪些资源。
总结
HTTP/2服务器推送是个好东西，但用起来也需要技巧。掌握好它的适用场景和优化策略，才能真正发挥它的威力，让你的网站“飞”起来！ 记住，没有最好的技术，只有最合适的技术。 别犹豫，赶紧试试吧！
(哎呀，不知不觉又扯了这么多。写代码去了，回见！)