Server Push实战经验与性能优化的关键点解析
西西的笔记我的写法，亲测靠谱
先说结论，Server Push 确实能提升性能，但用得不对反而会拖慢页面加载。我一般会在 Nginx 配置里这样处理：
server {
listen 443 ssl http2;
server_name example.com;
location / {
proxy_pass http://backend;
http2_push_preload on;
add_header Link "</js/app.js>; rel=preload; as=script";
add_header Link "</css/style.css>; rel=preload; as=style";
}
}这种写法有几个好处：首先是简单直接，不需要额外的代码改动；其次是通过 http2_push_preload 指令自动处理资源推送，减少了手动配置的工作量。
我踩过坑的地方在于最初把所有资源都推下去，结果发现反而拖慢了首屏渲染。后来改成只推送关键的 CSS 和 JS，效果就好很多。
这几种错误写法，别再踩坑了
最容易犯的错误就是盲目推送所有资源，比如这样：
location / {
proxy_pass http://backend;
http2_push_preload on;
add_header Link "</js/vendor.js>; rel=preload; as=script";
add_header Link "</js/app.js>; rel=preload; as=script";
add_header Link "</css/reset.css>; rel=preload; as=style";
add_header Link "</css/layout.css>; rel=preload; as=style";
add_header Link "</images/logo.png>; rel=preload; as=image";
add_header Link "</fonts/icon.ttf>; rel=preload; as=font";
}这种写法表面上看很全面，但实际上会让服务器一次性推送太多数据，导致带宽占用过高，反而影响页面加载速度。折腾了半天才发现，浏览器其实已经很智能了，我们只需要推送最关键的资源就够了。
还有个常见误区是滥用 Server Push 来替代 HTTP 缓存策略，比如：
// 错误示范：完全依赖 Server Push 推送静态资源
app.get('/', (req, res) => {
res.setHeader('Link', '</bundle.js>; rel=preload; as=script');
res.send('<html><body>Hello World</body></html>');
});这样做会导致每次请求都会重复推送相同的资源，完全浪费了 HTTP 缓存的优势。建议配合 Cache-Control 使用，确保资源只在必要时推送。
实际项目中的坑
在最近一个电商项目中，我就遇到了几个让人头疼的问题。首先是在 Chrome 浏览器下，发现 Server Push 的资源有时候会被忽略，查了资料才知道原来是浏览器有自己的限制策略。
解决办法是在应用层做判断：
const isPushSupported = req.headers['accept'] && req.headers['accept'].includes('http2-push');
if (isPushSupported) {
res.setHeader('Link', '</critical.css>; rel=preload; as=style');
}另一个大坑是当用户快速刷新页面时，可能会出现资源推送冲突的情况。这时候需要在服务端做好去重处理：
http {
push_stream_shared_memory_size 64m;
push_stream_max_messages_stored_per_channel 10;
}还遇到过一个诡异的问题：某些老旧的中间代理会把 Server Push 的响应头给吞掉，导致功能完全失效。最后只能通过检测 User-Agent 来针对性关闭 Push 功能：
map $http_user_agent $disable_push {
default 0;
"~MSIE" 1;
"~Edge/15" 1;
}
server {
if ($disable_push) {
more_clear_headers Link;
}
}结尾总结
以上是我总结的最佳实践，总的来说 Server Push 是把双刃剑，用得好确实能提升性能，用不好反而会拖累体验。建议大家在使用时注意以下几点：
- 只推送关键资源，避免过度推送
- 结合缓存策略使用，避免重复推送
- 针对不同浏览器和网络环境做适配
- 监控实际效果，及时调整推送策略
这个技巧的拓展用法还有很多，后续我会继续分享这类博客。有更好的方案欢迎评论区交流。
暂无评论