Question

我第一次访问网站时，request.headers[HTTP_ACCEPT]的结果为"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"

，但在内部链接请求之间显示text/html, application/xhtml+xml 直到我硬刷新页面。

是因为turbolinks还是其他问题？

Answer 1

这是一个turbolinks问题。默认情况下，turbolinks的XMLHttpRequest仅发送标头“ text / html，application / xhtml + xml”，但是您可以通过捕获如下所示的request-start事件来发送“ image / webp”标头：

document.addEventListener("turbolinks:request-start", function(event) {
  var xhr = event.data.xhr
  xhr.setRequestHeader("Accept", "image/webp")
})

问题是如何通过javascript知道浏览器是否接受webp图像以将“ image / webp”标头发送到服务器。

您可以使用Modernize库或自定义函数，当尝试对小的webp图像进行解码时，它会猜测webp是否可用，如此处所述：https://developers.google.com/speed/webp/faq。但是，这些解决方案会增加一定的开销，从而无法获得Webp图像最快加载时间的好处。

也许，最有效的解决方案是在服务器端创建一个布尔型cookie，以存储是否接受webp图像。 cookie与对服务器的第一个浏览器GET调用一起存储。在随后的Turbolink调用中，您可以在JavaScript代码中检查此Cookie：

document.addEventListener("turbolinks:request-start", function(event) {
  browserAcceptsWebp = document.cookie.includes('webp_available=true');
  if (browserAcceptsWebp) {
    var xhr = event.data.xhr;
    xhr.setRequestHeader("Accept", "image/webp");
  }
});

Rails request.headers数据没有刷新就不会更新

1 个答案: