logo标签列表

如何通过JavaScript在浏览器环境中检测浏览器是否支持HTTP2？

javascriptbrowserhttp2
3

我希望能够根据环境是否支持HTTP2来确定是否使用combo。但是，在浏览器中，我找不到检查浏览器是否支持HTTP2的方法。

提前感谢您。

1
请原谅一个无知的评论，但是你为什么需要知道它呢？在我看来，这个检查应该在服务器和浏览器协商时进行。在前端，你根本不需要关心。我能想到的唯一一种在前端知道它的方法是设置你的服务器，在成功的情况下返回这个信息，或者只有在 Chrome 中使用 chrome.loadTimes().connectionInfo。此外，如果没有重复，也与此相关，但不能标记为重复，因为没有答案：https://stackoverflow.com/questions/44842659/detect-browser-if-capable-enabled-for-http2-via-javascript-or-php - Kaiido
@Kaiido 如果浏览器不支持http2，我希望以这种格式加载js资源：<script src="??/a.js,/b.js"></script>，否则应该以这种格式完成：<script src="/a.js" async defer></script><script src="/b.js" async defer></script>。 - acrazing
2
这应该在服务器上完成。当请求服务页面时，如果请求中没有ALPN，并且服务器知道它将不得不使用HTTP/1.1进行通信，则可以提供另一版本的页面/资源，而不是为启用HTTP/2的客户端保留的版本。 - Kaiido
我需要动态地使用JS加载JS/CSS，就像<script>const script = document.createElement('script'); script.src = '/a.js'; document.head.appendChild(script);</script>。 - acrazing
是的，我们会配置您的服务器，以便在通过HTTP/1.1访问'/a.js'时，实际上提供'/b.js'的内容。 - Kaiido
4个回答
8

导航定时2 API 提供以下信息：

performance.getEntriesByType('navigation')[0].nextHopProtocol

上面的内容应该是在使用HTTP 2获取页面时返回“h2”。
关于nextHopProtocol的兼容性有限的说明：
导航定时级别2 API目前处于工作草案状态，因此对nextHopProtocol（随着Level 2 API引入）的支持将受到限制（不确定确切支持它的浏览器，因为caniuse目前不包括导航定时级别2 API）。
0

根据HTTP/2常见问题，HTTP/2和caniuse在IE11、Edge14+、Firefox 52+、Chrome 49+、Safari 10.1+、Opera 45+、iOS Safari 9.3+、Android Browser 56和Chrome for Android 59上受支持。

我现在能使用HTTP/2吗？

在浏览器中，最新版本的Edge、Safari、Firefox和Chrome支持HTTP/2。其他基于Blink的浏览器也将支持HTTP/2（例如Opera和Yandex Browser）。有关更多详细信息，请参见caniuse。

1
我想在浏览器中自己检测它，因为一些浏览器使用不同的内核。 - acrazing
@kcats 请查看 HTTP/2: the Future of the Internet，以及 Under the covers of the HTTP/2 Performance Demo on http2.akamai.com/demo。 - guest271314
0

最简单的解决方案可能是查找用户浏览器版本和用户代理。 查找用户代理的示例JavaScript代码：

function myFunction() {
var x = "User-agent header sent: " + navigator.userAgent;
document.getElementById("demo").innerHTML = x;

}

我们可以使用浏览器名称和版本创建一个地图，在分割用户代理后，我们可以知道浏览器版本是否支持。
使用像Java这样的服务器端语言，很容易获取请求代理，它可以告诉HTTP版本，但是在没有Ajax的Javascript中，需要编写更多的代码。
要查找一些浏览器以及哪个版本的浏览器遵循HTTP2，请参考以下链接：

https://www.smashingmagazine.com/wp-content/uploads/2016/01/01-caniuse-spdy-opt.png

-2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接