原來前端資源讀取阻塞是Http協議的問題

前言

圖片有點小，簡而言之他們說api載入速度慢是因為前面一堆東西要載阻塞了，請前端協助確認

原來loading組塞也規前端管，三更半夜收到這種消息想必正常人都要睡不好了！

好在我11點就調勿擾，且我已經睡了。珍惜生命，遠離手機，特別是三更半夜還有同事在加班的公司。

總之言歸正傳，我之前一直以為瀏覽器的升級讓資源載入不會阻塞，所以我壓根不用考慮這件事，所以我問一下ai獲得以下答案

A：1. (強烈建議) 啟用 HTTP/2 或 HTTP/3

這是解決此問題最現代、最有效的方法。

* 原理：HTTP/2 和 HTTP/3 支援「多路復用 (Multiplexing)」，允許在單一的 TCP 連線上同時處理多個請求，完全繞過了 HTTP/1.1 的隊頭阻塞 (Head-of-line blocking) 問題。

* 如何做：這需要在伺服器端進行設定。您需要與後端或維運團隊合作，在您的 Web 伺服器（如 Nginx, Apache）或 CDN 服務商上為 api.ktkdf.xyz (或 bb.025674.com) 域名啟用 HTTP/2 或 HTTP/3

支援。

* 優點：一勞永逸，不僅解決 Stalled 問題，還能提升整體網站的載入效能和反應速度。

Q：接著我問我該如何得知目走的是HTTP多少

A：方法一：使用瀏覽器開發者工具 (最推薦)

這是在您自己的開發或生產環境中，最快也最準確的確認方式。

1. 打開您的網站：在 Chrome、Edge 或 Firefox 中打開您要檢測的頁面。

2. 打開開發者工具：

* 在 Windows/Linux 上按 F12 或 Ctrl+Shift+I。

* 在 macOS 上按 Cmd+Opt+I。

3. 切換到 Network (網路) 標籤：在開發者工具面板中，點擊 "Network" 或 "網路"。

4. 重新整理頁面：保持開發者工具開啟，然後按 Ctrl+R 或 Cmd+R 重新載入頁面。你會看到所有的網路請求都列了出來。

5. 查看 Protocol (通訊協定) 欄位：

在請求列表的表頭中，找到名為 "Protocol" 的欄位。

* 如果沒有看到 "Protocol" 欄位：在表頭（例如 "Name", "Status", "Type" 的那一行）上按一下右鍵，然後在彈出的選單中勾選 "Protocol"。

6. 判讀結果：

* 如果顯示為 `h2` 或 `http/2`，恭喜，您的網站正在使用 HTTP/2。

* 如果顯示為 `h3`，代表正在使用 HTTP/3 (更新、更快)。

* 如果顯示為 `http/1.1`，則代表您還在使用舊的 HTTP/1.1，這就是造成 Stalled 問題的元兇。

方法三：使用 curl 指令 (進階)

如果您熟悉使用終端機，可以用 curl 指令來檢查。

打開您的終端機並執行以下指令 (將 your-website.com 換成您的域名)：

1 curl -Is https://your-website.com | head -n 1

* 如果回應是 HTTP/1.1 200 OK，代表是 HTTP/1.1。

* 如果回應是 HTTP/2 200，代表是 HTTP/2。

檢查結果

方法二要用工具太麻煩就忽略吧

至於http protocol之間差異在哪，gemini解釋太長了我直接放上連結

用人話來說就是http1.1一次只能載6個檔案，所以會組塞，http2跟3速度更快

小結

所以最終結論就是，真的不關我的事，後端跟維運要處理，AI萬歲，半小時搞定，準時下班～