如何在瀏覽器的 JavaScript 中檢查服務器是否支持 HTTP/2

Question

我想知道在瀏覽器中檢查服務器是否支持 JavaScript 中的 HTTP/2 的方法。 如果可能，我想知道不使用 API 服務器的方法。

檢查的原因如下。

• 在大多數瀏覽器中，HTTP/1 請求限制為 6-8 個並發請求。
• 檢測 HTTP/2，並正確提供請求數

Answer 1

由於幾個原因，這很棘手。

即使服務器支持 HTTP/2，客戶端也可能不會使用它。 例如，如果代理（通常用於企業環境或防病毒產品）可能不支持 HTTP/2 abs，那么盡管客戶端和服務器都支持 HTTP/2，但強制使用 HTTP/1.1。

即將發布的Resource Timing Level 2 規范提出了一個nextHopProtocol屬性，可以提供這一點並且支持相當不錯，但值得注意的是 Safari 不支持這一點，因此考慮到 iOS 的流行，這可能是您的網絡訪問者的很大一部分。 另外它還沒有被批准，所以可能會改變。

您還可以檢測此服務器端，因為許多 Web 服務器在變量中公開連接信息。 這可用於在正文中設置 HTTP 標頭或響應以通知客戶端支持。

但是，即使您可以准確地衡量這一點，它也可能不像您認為的將使用的並發請求數量那樣准確。例如，谷歌瀏覽器正在嘗試在慢速連接上限制並發請求的數量。 這可以從 Chrome 74 在開發者工具中使用“慢 3G”網絡配置文件時看出。

Answer 2

這個問題是重復的，所以這里是來自 Punit S的最高投票答案：

---

Navigation Timing 2 API 提供了以下信息：

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

以上應該在使用 HTTP 2 獲取的頁面上返回“h2”

關於 nextHopProtocol 有限兼容性的說明：

Navigation Timing Level 2 API 目前處於工作草案狀態，因此對 nextHopProtocol（隨着 Level 2 API 引入）的支持將受到限制（不確定支持它的確切瀏覽器，因為 caniuse 目前不包括 Navigation Timing Level 2 API）。

---

（結束報價）

我在由 Apache 2.2 提供服務的 localhost 站點上測試了上述代碼，並收到了"http/1.1" （我不確定如何更改 HTTP 的類型）。 在其他站點上，它們都輸出了"h2" （我只測試了幾個）。

Answer 3

我發現的唯一方法是嘗試連接並在失敗時捕獲錯誤：

const http2 = require('http2')

; (async() => {
  let host = 'https://www.amazon.com'
  const http2Support = await new Promise((resolve, reject) => {
    const client = http2.connect(host)
    client.on('error', (err) => {
      resolve(false)
    })
    client.on('remoteSettings', (settings) => {
      resolve(settings)
    })
  })
  console.log(http2Support)
}

Answer 4

在大多數情況下，這對您來說是不可見的。 如果服務器支持 HTTP/2 並且您使用的是現代瀏覽器，它會自動發生，前提是您的網站是通過 HTTPS 傳送的

這意味着除非您提供自己的證書，否則本地測試將始終為 HTTP/1

如果您可以訪問服務器，那么查找的方法是查看請求標頭。 從https://developers.google.com/web/fundamentals/performance/http2#binary_framing_layer ：

與換行符分隔的明文 HTTP/1.x 協議不同，所有 HTTP/2 通信都被拆分為更小的消息和幀，每個消息和幀都以二進制格式編碼。

所以基本上，如果你的頭是二進制的，你運行的 HTTP/2。

@Rojo 的答案也適用於我，在此頁面上的 Web 控制台中運行它，（但同樣，由於 HTTP 要求，不在本地）