【Web微知識系列】HTTP的演進帶來了什麼改變? 未來的起手式HTTP/3的QUIC又是什麼?

更新於 發佈於 閱讀時間約 4 分鐘

超文本傳輸協定(HyperText Transfer Protocol,縮寫: HTTP),主要做為數據通訊的基礎協定,舉凡我們上網的網頁、圖片…,都是由HTTP協定為基底標準,讓服務端與用戶端可以相互通訊,達到互動、傳遞資訊的作用,而從最初版的單向傳輸也隨著時代的演進,應用漸趨複雜的趨勢下慢慢優化到雙向互動,而大數據的時代下,龐大的數據量也凸顯了傳輸效率的問題,因而也對這部分進行改善,讓傳輸更加順暢,就讓我們一起來看看HTTP的演進史吧!

HTTP 1.0的遠古時代

每一次都需要建立連線,並且只能有一次的請求。

HTTP 1.1 做了些改進

HTTP1.1版本之下,在一個請求中可以夾帶多個請求,並回傳,以此來減少多次連線的開銷,以此來改善HTTP1.0多次連線的問題。

到了HTTP/2的現代又有什麼大躍進?

在HTTP1的時代雖然做了很多連線上的改進,但是隨著用來越多應用都搬移到網路上,雙向溝通的需求也越趨明顯,而1.x版的架構下並沒有支援Server端主動通知Client端的機制,在HTTP 2也都加入了這些特性。

在傳輸上也將原本整包資料的傳送方式切碎成小包小包, 並給予每一包一個編號, 送到目的地之後再重組, 如此一來就可以傳送多批資料也不會有等待一批資料過於久的現象。

幾個優點如下:

● Header壓縮,減少傳輸成本。
● 支援Server Push,由伺服器推送資料到瀏覽器。
● 連線重複使用,減少開銷。

下一個未來發展的重點「HTTP/3」

我們在簡介說明的部分有稍微提到,未來隨著數據量以及更多的需求轉移到互聯網時,為了避免堵塞造成使用體驗不佳,因而在傳書上持續的演化,而HTTP/2之前仍然是追求可靠性傳輸的TCP協定,在HTTP/3大膽的引進了UDP不可靠傳輸的概念,但也並非完全不可靠,而是基於UDP做了一些改良,這個協定稱為QUIC:

由上圖,很明顯的看到我們原本三次的傳輸來確認雙方可以進行通訊的過程,改良到只要一次就完成,更何況TCP + TLS更多次確認的過程,這邊其實QUIC的過程已經包含TLS了,只是未將詳細過程羅列,有興趣者請參考Wiki。

但我們的心中一定充滿著幾個疑問:

● 為什麼QUIC能保證可靠性呢? ⇒ 因為加入了RAID5的演算機制,一次的傳送多個封包中,會加入一包檢驗的加總,並且可以反推哪一包失敗,進行某包重傳即可。
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —



資料包: A+B+C
檢驗包: N
關係為: A+B+C=N
當第「A」包丟失時, A = Z — B — C
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

● QUIC後續不用重新連接嗎? ⇒ 不用,因為連接可以重複使用,其中加入了Connection ID做為識別。

================================================

喜歡撰寫文章的你,不妨來了解一下:
Web3.0時代下為創作者、閱讀者打造的專屬共贏平台 — 為什麼要加入?



歡迎加入一起練習寫作,賺取知識,累積財富!

留言
avatar-img
留言分享你的想法!
avatar-img
阿Han的沙龍
129會員
286內容數
哈囉,我是阿Han,是一位 👩‍💻 軟體研發工程師,喜歡閱讀、學習、撰寫文章及教學,擅長以圖代文,化繁為簡,除了幫助自己釐清思路之外,也希望藉由圖解的方式幫助大家共同學習,甚至手把手帶您設計出高品質的軟體產品。
阿Han的沙龍的其他內容
2023/04/23
Web Workers主要提供簡單的API讓網頁在背景執行緒中執行程式而不干擾使用者的操作。 javascript主要功能是與user操作頁面互動及操作dom,試想若使用多執行緒的概念,那麼一個動作是新增至某個dom節點,另一個動作則是修改該dom節點,此時瀏覽器應該使用哪個動作為準? 所以為了避免
Thumbnail
2023/04/23
Web Workers主要提供簡單的API讓網頁在背景執行緒中執行程式而不干擾使用者的操作。 javascript主要功能是與user操作頁面互動及操作dom,試想若使用多執行緒的概念,那麼一個動作是新增至某個dom節點,另一個動作則是修改該dom節點,此時瀏覽器應該使用哪個動作為準? 所以為了避免
Thumbnail
2023/04/23
Service worker與Web workers相同,也都是一段運行在瀏覽器後台的腳本,提供一些不需要與頁面直接交互的功能(操作dom),主要處理網路相關的問題,可以攔截網路請求進行相對應的優化動作,我們把它想像成與伺服器之間的代理服務器可能會比較容易理解,當網路環境不佳時便回應快取資源,待網路
Thumbnail
2023/04/23
Service worker與Web workers相同,也都是一段運行在瀏覽器後台的腳本,提供一些不需要與頁面直接交互的功能(操作dom),主要處理網路相關的問題,可以攔截網路請求進行相對應的優化動作,我們把它想像成與伺服器之間的代理服務器可能會比較容易理解,當網路環境不佳時便回應快取資源,待網路
Thumbnail
2023/04/23
Cookie簡介與個人隱私議題 在談Cookieless之前我們先來了解什麼是Cookie,這裡的Cookie並不是餅乾的意思,而是為了讓人們在網路上通訊時,能夠創造更無縫的體驗,想像一下,假設我們在使用網站時,每切換一頁就要進行登入一次,我想大部分的人都已經抓狂並放棄使用的吧! 而Cookie的出
Thumbnail
2023/04/23
Cookie簡介與個人隱私議題 在談Cookieless之前我們先來了解什麼是Cookie,這裡的Cookie並不是餅乾的意思,而是為了讓人們在網路上通訊時,能夠創造更無縫的體驗,想像一下,假設我們在使用網站時,每切換一頁就要進行登入一次,我想大部分的人都已經抓狂並放棄使用的吧! 而Cookie的出
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
htmx前陣子還只是網路迷因,近期拿來搭配go的系列影片越來越多了,兩者都可以用很少量的程式實作出功能,很適合拿來做些簡單的project。
Thumbnail
htmx前陣子還只是網路迷因,近期拿來搭配go的系列影片越來越多了,兩者都可以用很少量的程式實作出功能,很適合拿來做些簡單的project。
Thumbnail
今天來聊聊我們常常使用的網頁,背後怎麼讓我們用的更順暢的一門傳輸方式,HTTP Keep-Alive,透過一點點的小改變,讓傳輸效率提升,減少非必要的浪費。 當我們溝通的過程中沒有KeepAlive的狀況下,會有多次往來的狀況,這樣對雙方來說開銷成本是非常大的,因此為了改善這個現象,加入了一個機制,
Thumbnail
今天來聊聊我們常常使用的網頁,背後怎麼讓我們用的更順暢的一門傳輸方式,HTTP Keep-Alive,透過一點點的小改變,讓傳輸效率提升,減少非必要的浪費。 當我們溝通的過程中沒有KeepAlive的狀況下,會有多次往來的狀況,這樣對雙方來說開銷成本是非常大的,因此為了改善這個現象,加入了一個機制,
Thumbnail
超文本傳輸協定(HyperText Transfer Protocol,縮寫: HTTP),主要做為數據通訊的基礎協定,舉凡我們上網的網頁、圖片…,都是由HTTP協定為基底標準,讓服務端與用戶端可以相互通訊,達到互動、傳遞資訊的作用,而從最初版的單向傳輸也隨著時代的演進,應用漸趨複雜的趨勢下慢慢優化
Thumbnail
超文本傳輸協定(HyperText Transfer Protocol,縮寫: HTTP),主要做為數據通訊的基礎協定,舉凡我們上網的網頁、圖片…,都是由HTTP協定為基底標準,讓服務端與用戶端可以相互通訊,達到互動、傳遞資訊的作用,而從最初版的單向傳輸也隨著時代的演進,應用漸趨複雜的趨勢下慢慢優化
Thumbnail
當我們在討論 Web Applications 中的數據交換時,JSON 常是第一時間想到的格式,它有著易於閱讀且跨語言、開發成本低等優點。但當傳輸的數據量開始變大時,我們是不是有別種的選擇呢?
Thumbnail
當我們在討論 Web Applications 中的數據交換時,JSON 常是第一時間想到的格式,它有著易於閱讀且跨語言、開發成本低等優點。但當傳輸的數據量開始變大時,我們是不是有別種的選擇呢?
Thumbnail
這篇文章主要介紹 TCP 可靠性傳輸服務、連接管理、流量控制及擁塞控制等...
Thumbnail
這篇文章主要介紹 TCP 可靠性傳輸服務、連接管理、流量控制及擁塞控制等...
Thumbnail
What is WebSocket? WebSocket 是 HTML5 提供的一種網路傳輸協定,是瀏覽器(Client)與伺服器(Server)交換資料的方式之一。 與我們較為熟知的 HTTP 或 HTTPS 協定,同樣位於 OSI 模型的應用層,且基於傳輸層的 TCP 協定。
Thumbnail
What is WebSocket? WebSocket 是 HTML5 提供的一種網路傳輸協定,是瀏覽器(Client)與伺服器(Server)交換資料的方式之一。 與我們較為熟知的 HTTP 或 HTTPS 協定,同樣位於 OSI 模型的應用層,且基於傳輸層的 TCP 協定。
Thumbnail
你想像有一個黑盒子,它會跟你說輸入一個input,而會得出什麼Output,而你要把這個Input傳遞給黑盒子是透過http的方式
Thumbnail
你想像有一個黑盒子,它會跟你說輸入一個input,而會得出什麼Output,而你要把這個Input傳遞給黑盒子是透過http的方式
Thumbnail
從瀏覽器到伺服器之間究竟發生了哪些事情?才讓我們可以正常的瀏覽網頁呢?
Thumbnail
從瀏覽器到伺服器之間究竟發生了哪些事情?才讓我們可以正常的瀏覽網頁呢?
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。
Thumbnail
如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News