<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Http2.0 服务端推送 on Last Stand</title><link>https://amatsuzero.github.io/LastStand/tags/http2.0-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%8E%A8%E9%80%81/</link><description>Recent content in Http2.0 服务端推送 on Last Stand</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Wed, 06 Aug 2025 00:00:00 +0800</lastBuildDate><atom:link href="https://amatsuzero.github.io/LastStand/tags/http2.0-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%8E%A8%E9%80%81/index.xml" rel="self" type="application/rss+xml"/><item><title>http2.0 服务端推送</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/network/network-017/</link><pubDate>Mon, 28 Jul 2025 00:00:00 +0800</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/network/network-017/</guid><description>&lt;p&gt;HTTP/2.0 的 &lt;strong&gt;服务端推送（Server Push）&lt;/strong&gt; 是它相较于 HTTP/1.x 引入的一项重要功能，旨在优化网页加载性能，尤其是首次加载时资源依赖的获取效率。&lt;/p&gt;
&lt;h2 id="一什么是服务端推送"&gt;一、什么是服务端推送？&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;HTTP/2 Server Push&lt;/strong&gt; 允许服务器&lt;strong&gt;主动将资源“推送”给客户端&lt;/strong&gt;，而不是等待客户端明确请求。这在某些场景下可以&lt;strong&gt;预加载依赖资源、减少请求延迟&lt;/strong&gt;，提升页面的首屏加载速度。&lt;/p&gt;
&lt;p&gt;例如： 客户端请求了 HTML 页面，服务器可以在返回 HTML 的同时，&lt;strong&gt;主动推送&lt;/strong&gt;页面所需的 CSS/JS 资源。&lt;/p&gt;
&lt;h2 id="二服务端推送的工作原理"&gt;二、服务端推送的工作原理&lt;/h2&gt;
&lt;h3 id="流程概览"&gt;流程概览：&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;浏览器发送主资源请求（如 HTML）；&lt;/li&gt;
&lt;li&gt;服务器识别该请求需要哪些依赖资源（如 CSS、JS）；&lt;/li&gt;
&lt;li&gt;服务器将这些资源 &lt;strong&gt;打包为 PUSH_PROMISE 帧&lt;/strong&gt; 发送给客户端，声明它即将发送的资源；&lt;/li&gt;
&lt;li&gt;客户端接收到 &lt;code&gt;PUSH_PROMISE&lt;/code&gt; 后，&lt;strong&gt;会缓存该资源的响应&lt;/strong&gt;；&lt;/li&gt;
&lt;li&gt;当浏览器稍后真正需要这个资源时，&lt;strong&gt;不会再发起真实请求&lt;/strong&gt;，而是从缓存中获取推送的内容；&lt;/li&gt;
&lt;li&gt;避免了请求的 RTT 往返延迟。&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id="技术细节"&gt;技术细节：&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;PUSH_PROMISE&lt;/strong&gt; 是 HTTP/2 中新增的帧类型，用于声明服务器准备推送的资源；&lt;/li&gt;
&lt;li&gt;所有推送的资源都绑定到一个主请求流（主页面），不能独立存在；&lt;/li&gt;
&lt;li&gt;客户端可选择 &lt;strong&gt;拒绝（RST_STREAM）&lt;/strong&gt; 不想要的推送资源；&lt;/li&gt;
&lt;li&gt;推送资源会根据缓存策略存储在浏览器的缓存中，不一定立即使用。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="三实际示例nginx--link-header"&gt;三、实际示例（Nginx + Link Header）&lt;/h2&gt;
&lt;p&gt;在使用 Nginx 部署 HTTP/2 服务时，可以通过 &lt;code&gt;Link&lt;/code&gt; 响应头启用 Server Push：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-nginx" data-lang="nginx"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;location&lt;/span&gt; = &lt;span style="color:#e6db74"&gt;/index.html&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;http2_push&lt;/span&gt; &lt;span style="color:#e6db74"&gt;/style.css&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;http2_push&lt;/span&gt; &lt;span style="color:#e6db74"&gt;/main.js&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;或者使用 &lt;code&gt;Link&lt;/code&gt; 响应头方式：&lt;/p&gt;</description></item></channel></rss>