HTTP/2 和响应式图片
HTTP/2 and responsive images
我目前正在试验 http/2 和服务器推送规则。实现 js 和 css 文件的推送规则很容易，但是，似乎没有办法有效地使用响应式图像的推送功能，比如图片标签 and/or 的 srcset 属性。
当然，我可以将每个版本的图像推送到客户端，但这将是一场流量灾难，尤其是在流量有限的移动设备上。
据我所知，浏览器每次推送文件都会得到一个承诺。当文件已经缓存时，promise 用于中断该推送。我希望这个说法是正确的。
有没有办法告诉浏览器，图片仅适用于特殊的屏幕尺寸或像素比？
Of course, I can push every version of an image to the client, but
that would be a traffic disaster, especially on mobile devices with
limited traffic.
是的，这会破坏使用不同版本的意义（这主要是为了节省带宽）。
As far as I know, the browser gets a promise for each file push. The
promise is used to interrupt that push, when the fileis already
cached. I hope that this statement is correct.
是的，但是，如果您认为可以让浏览器取消请求，那么您需要意识到 1) 浏览器通常只会对缓存中已有的请求执行此操作，并且 2)取消需要时间，此时可能已经不必要地下载了一些（甚至可能是全部）推送的资源。
Is there a way to tell the browser, that an image is just for a
special screen size or pixel ratio?
您不会将图片推送到屏幕，而是推送到浏览器缓存，因此推送的资源只会根据页面在适当的情况下使用（例如正确的 srcset 值）。但是，如上所述，您不希望它们被不必要地推送或者浪费带宽。
成功使用服务器推送的关键是合理确定需要资源 - 否则您实际上会导致性能瓶颈。老实说，我建议不要推送所有内容，而只推送几乎肯定需要的关键、渲染阻塞和资源 (CSS、JavaScript)。图像通常不会渲染阻塞，因此通常不需要大量推送它们。
这可以用 cookie 来处理。如果未设置 cookie，则可能是新会话，因此推送关键 CSS 文件并设置“cssLoaded”cookie。如果请求页面，并且设置了 cookie，则不要推送 CSS 文件。我在此处的 Apache 中发布了关于此的简单实现的博客：https://www.tunetheweb.com/performance/http2/http2-push/。这仍然可能导致过度推送 - 例如，如果客户端不允许 cookie - 但对于大多数用户来说，这没问题。
您可以进一步扩展它，让 JavaScript 设置一个带有屏幕尺寸的 cookie，然后对于后续的页面加载，服务器可以读取该 cookie，知道屏幕尺寸，并推送适当尺寸的图像.这不会帮助初始页面加载，但如果您的访问者在同一会话中访问您网站上的多个页面，则会帮助其他页面加载。但老实说，这听起来有点矫枉过正，我不会推送图片。
我目前正在试验 http/2 和服务器推送规则。实现 js 和 css 文件的推送规则很容易，但是，似乎没有办法有效地使用响应式图像的推送功能，比如图片标签 and/or 的 srcset 属性。 当然，我可以将每个版本的图像推送到客户端，但这将是一场流量灾难，尤其是在流量有限的移动设备上。
据我所知，浏览器每次推送文件都会得到一个承诺。当文件已经缓存时，promise 用于中断该推送。我希望这个说法是正确的。
有没有办法告诉浏览器，图片仅适用于特殊的屏幕尺寸或像素比？
Of course, I can push every version of an image to the client, but that would be a traffic disaster, especially on mobile devices with limited traffic.
是的，这会破坏使用不同版本的意义（这主要是为了节省带宽）。
As far as I know, the browser gets a promise for each file push. The promise is used to interrupt that push, when the fileis already cached. I hope that this statement is correct.
是的，但是，如果您认为可以让浏览器取消请求，那么您需要意识到 1) 浏览器通常只会对缓存中已有的请求执行此操作，并且 2)取消需要时间，此时可能已经不必要地下载了一些（甚至可能是全部）推送的资源。
Is there a way to tell the browser, that an image is just for a special screen size or pixel ratio?
您不会将图片推送到屏幕，而是推送到浏览器缓存，因此推送的资源只会根据页面在适当的情况下使用（例如正确的 srcset 值）。但是，如上所述，您不希望它们被不必要地推送或者浪费带宽。
成功使用服务器推送的关键是合理确定需要资源 - 否则您实际上会导致性能瓶颈。老实说，我建议不要推送所有内容，而只推送几乎肯定需要的关键、渲染阻塞和资源 (CSS、JavaScript)。图像通常不会渲染阻塞，因此通常不需要大量推送它们。
这可以用 cookie 来处理。如果未设置 cookie，则可能是新会话，因此推送关键 CSS 文件并设置“cssLoaded”cookie。如果请求页面，并且设置了 cookie，则不要推送 CSS 文件。我在此处的 Apache 中发布了关于此的简单实现的博客：https://www.tunetheweb.com/performance/http2/http2-push/。这仍然可能导致过度推送 - 例如，如果客户端不允许 cookie - 但对于大多数用户来说，这没问题。
您可以进一步扩展它，让 JavaScript 设置一个带有屏幕尺寸的 cookie，然后对于后续的页面加载，服务器可以读取该 cookie，知道屏幕尺寸，并推送适当尺寸的图像.这不会帮助初始页面加载，但如果您的访问者在同一会话中访问您网站上的多个页面，则会帮助其他页面加载。但老实说，这听起来有点矫枉过正，我不会推送图片。