在網絡的早期時期,人們發送的文件大小僅為幾KB。到了2023年,我們享受著高分辨率的MB級別圖像,并在幾GB的4K(即將是8K)視頻中觀看。
即使有良好的互聯網連接,下載一個5GB的文件仍然需要一些時間。如果你擁有Xbox或PlayStation,你就知道這種感覺。
我們有三種方法可以通過HTTP縮短發送大量數據的時間:
- 壓縮數據
- 發送分塊數據
- 請求選擇范圍內的數據
它們并不是互斥的。你可以根據用例一起使用所有方法。
壓縮數據
1*_un0bHBemgCSDocQmucK5Q.png
要壓縮數據,我們需要壓縮算法。
在發送請求時,瀏覽器會包含一個名為Accept-Encoding的頭,其中包含支持的壓縮算法列表,包括gzip(GZIP)、compress、deflate和br(Brotli)。
接下來,服務器從列表中選擇其支持的算法,并在Content-Encoding頭中設置算法名稱。
當瀏覽器接收到響應時,它知道如何解析正文中的數據。
在這些算法中,最流行的是GZIP。它是壓縮文本數據(如html、css和JAVAScript)的絕佳選擇。
Brotli是另一個值得一提的算法。它在壓縮HTML方面的性能甚至比GZIP更好。
這些高效的算法有一些限制。
它們對文本的壓縮效果很好,但對于壓縮圖像或視頻來說則不足夠。畢竟,媒體已經過了優化。
試著在你的計算機上壓縮一個視頻文件。在壓縮之前和之后,你幾乎看不到太大的區別。
此外,幾乎不可能將一個5GB的視頻壓縮到幾KB而不損失質量。
壓縮是好的,但我們需要一個更好的解決方案——將文件分塊發送并在客戶端組裝部分數據。
發送分塊數據
1*0WLNkzfgw9faLpTUXkk3tg.png
在版本1.1中,HTTP引入了分塊數據以處理大數據情況。
在發送響應時,服務器添加一個頭Transfer-Encoding: chunked,讓瀏覽器知道數據是分塊傳輸的。
1*Nwlp0QqhEsvWl4fw-x0X7Q.png
每個分塊數據都有以下組件:
- 一個長度塊標記,標記當前分塊數據的長度
- 分塊數據塊
- 在每個塊的末尾的CRLF分隔符
想知道CRLF是什么嗎?
1*s_-5lmT9176ymCAaaGCE2w.png
CR緊接著LF(CRLF,rn,或0x0D0A)將光標移動到下一行,然后移到行的開頭。 在本文末尾的進一步閱讀部分,你可以找到更多詳細信息。在這里,你可以簡單地將其視為一個分隔符。
服務器繼續向瀏覽器流式傳輸分塊數據。當達到數據流的末尾時,它附加一個包含以下部分的結束標記:
- 一個長度塊,數字為0,末尾為CRLF
- 一個額外的CRLF
在瀏覽器端,它等待所有數據塊,直到達到結束標記。然后,它移除分塊編碼,包括CRLF和長度信息。
接下來,它將分塊數據組合成一個整體。因此,在Chrome DevTools上,你只能看到組裝后的數據,而不是分塊數據。
最終,你會收到整個數據的一塊。
1*oChWIlysG3PQD3vy8ctVxw.png
分塊數據是有用的。然而,對于一個5GB的視頻,完整的數據仍然需要一些時間才能到達。
我們能不能獲取數據的選定塊,并在需要時請求其他塊呢?
HTTP說可以。
在選定范圍內請求數據
1*LOGONes_KpmSN6zXaz9DhA.png
在YouTube上打開一個視頻,你會看到一個灰色的進度條正在向前移動。
你剛剛看到的是YouTube在請求選定范圍內的數據。
此功能使你可以在時間軸的任何地方跳躍。當點擊進度條上的某個位置時,瀏覽器會請求視頻數據的特定范圍。
在服務器上實現范圍請求是可選的。如果實現了,你可以在響應頭中看到Accept-Ranges: bytes。
1*MWd4AGP8lLRIQw5mketXew.png
這是一個YouTube請求的示例。在任何“playback”請求中,你都可以找到這個頭。
范圍請求頭看起來像`Range:bytes=0-80`,它是從0開始的索引。
這個頭是一個設計非常巧妙且具有出色靈活性的頭。
假設一個數據總共有100個字節。
- Range: bytes=20請求從20開始到末尾的范圍,等于Range: bytes=20-99。
- Range: bytes=-20請求數據的最后20個字節,等于Range: bytes=80-99。
如果請求的范圍有效,服務器將發送帶有Content-Range頭的響應,驗證數據范圍和總長度,例如Content-Range: bytes 70-80/100。
范圍請求廣泛用于視頻流媒體和文件下載服務。
你有沒有在互聯網中斷后繼續文件下載?那就是范圍請求。
此外,范圍請求支持多個范圍。
例如,你可以從文件中請求兩個范圍,如Range: bytes=20-45, 70-80。
多范圍體看起來類似于分塊數據。每個數據塊都有以下部分:
- 一個邊界塊,標識不同數據塊的邊界,以--開始,以CRLF結束
- 兩個頭,Content-Type和Content-Range,顯示相應數據塊的屬性,以CRLF結束
- 一個額外的CRLF,告訴客戶端真正的數據即將到來
- 最后,以CRLF結束的數據塊
邊界僅僅是一個看起來像3d6b6a416f9b5的隨機字符串,標記不同數據塊的邊界。
最終,體結束于邊界塊,以--開始,以--和CRLF結束。這個部分告訴瀏覽器多部分已經結束。
讓我們把它全部整合起來。響應體的結構如下所示。
總結
HTTP幫助我們通過壓縮、分塊數據和范圍數據傳送大量數據。
這里的思想是在需要的時候傳送我們需要的數據,然后在需要時發送其他數據。當在設計類似系統時遇到問題時,你可以嘗試相同的思路。
通過結合這三種方法,我們可以發送壓縮的分塊數據范圍數據。