簡述大前端技術棧的網絡原理

大前端指的是涵蓋所有與前端開發相關的技術和平臺,應用於各類設備和操作系統上。大前端不僅包括 Web 開發,還包括移動端開發和跨平臺應用開發,具體包括: 1.原生應用開發:Android、iOS、鴻蒙(HarmonyOS)等; 2.Web 前端框架:Vue、React、Angular 等; 3.小程序開發:微信小程序、京東小程序、支付寶小程序等; 4.跨平臺解決方案:React Native、Flutter、Taro、Weex 等。

lu yi
Frontend developer
Share article

一、網絡請求原理簡述

1、用戶發起請求:用戶在瀏覽器輸下 URL 發起、點擊某連接或頁面發起、程序內自動發起 HTTP (S) 請求。

2、DNS 解析:當發起壹個 HTTP (S) 請求時,首先需要通過域名系統(DNS)查詢目標服務器的 IP 地址。瀏覽器會檢查本地緩存、操作系統緩存,然後是路由器緩存等,如果都沒有找到,則向 DNS 服務器發送查詢請求。

3、CDN 緩存檢查:如果請求被指向到 CDN 節點,該節點會首先檢查是否擁有請求資源的副本。如果有且未過期,則直接從 CDN 返回響應給客戶端,減少對源服務器的請求。若 CDN 沒有所需資源或資源已過期,則需要與源服務器建立 TCP 連接(對於 HTTPS 還需進行 SSL/TLS 握手)。

4、建立 TCP 連接:壹旦獲取到服務器的 IP 地址,客戶端和服務器之間將嘗試建立壹個 TCP 連接。這通常涉及三次握手的過程:

• 客戶端發送 SYN(同步序列編號)包到服務器。
• 服務器回應壹個 SYN-ACK(同步確認)包給客戶端。
• 客戶端再發送 ACK(確認)包給服務器,完成連接建立。

5、SSL/TLS 握手(對於 HTTPS):如果是 HTTPS 請求,在 TCP 連接建立之後,還需要進行 SSL/TLS 握手來確保通信安全。此過程包括交換加密算法、驗證證書以及生成會話密鑰等步驟。

6、負載均衡:當請求到達源服務器時,可能經過負載均衡器來分配請求到不同的後端服務器上。負載均衡策略可以是基於輪詢、最少連接數、哈希算法等。

7、發送 HTTP 請求:連接建立後,客戶端會構造壹個 HTTP 請求報文並發送給服務器。請求報文包含請求行(方法、URI、版本)、請求頭部(如 Host、User-Agent 等)以及可選的請求體(例如 POST 請求的數據)。

8、服務器處理請求:服務器接收到請求後,根據請求中的信息決定如何響應。它可能會讀取數據庫、執行業務邏輯等操作,最終構造壹個 HTTP 響應報文返回給客戶端。

9、處理重定向:客戶端接收到重定向響應後,會根據響應中的新位置信息發起新的請求。這個過程可能涉及多次重定向,直到獲取最終的資源位置。

10、接收 HTTP 響應:客戶端接收到響應後,開始解析響應報文,提取狀態碼、響應頭和響應體。根據這些信息,瀏覽器可以決定如何處理響應內容(比如渲染 HTML 頁面)。

11、關閉連接:最後,根據 HTTP 協議版本和請求頭中指定的信息(如 Connection: close),客戶端和服務器可以選擇關閉 TCP 連接或者保持連接以供後續請求使用。

二、網絡性能應該如何優化

1、尋找優化的方向1.1、網絡優化主要從圍繞速度、弱網絡、安全這三方面進行優化,打造快速穩定安全的高質量網絡,可能還需要關註網絡請求造成的耗電、流量等問題;◦ 速度:在網絡正常或者良好的時候,怎樣更好地利用帶寬,進壹步提升網絡請求速度;◦ 弱網絡:移動端網絡復雜多變,在出現網絡連接不穩定的時候,怎樣最大程度保證網絡的連通性;◦ 安全:網絡安全不容忽視,怎樣有效防止被第三方劫持、竊聽甚至篡改;1.2、我們可以網絡請求的原理,分析壹次網絡請求的過程,梳理發現問題或優化的方向,如下圖所示,關鍵節點包括 DNS 解析、建立鏈接等去尋找優化點...

2、原生應用優化

2.1、DNS 解析優化:使用 HTTPDNS 代替傳統 DNS,基本原理如下:

1、發起請求:移動應用通過內置的 HTTPDNS SDK 發起域名解析請求

2、HTTP 通道傳輸:解析請求通過 HTTP/HTTPS 協議發送到 HTTPDNS 服務器,繞過運營商 DNS 系統

3、權威查詢:HTTPDNS 服務器向權威 DNS 服務器查詢域名解析結果

4、獲取結果:權威 DNS 服務器返回準確的 IP 地址給 HTTPDNS 服務器

5、返回客戶端:HTTPDNS 服務器將 IP 地址通過 HTTP 響應返回給客戶端

6、本地緩存:客戶端緩存解析結果,減少重復請求

7、直接連接:應用使用獲取到的 IP 地址直接連接目標服務器,避免 DNS 劫持和汙染

與傳統 DNS 解析相比,HTTPDNS 通過 HTTP 協議傳輸解析請求,有效避免了運營商 DNS 劫持、解析錯誤和跨網訪問慢等問題。基本流程和原理如下圖所示:

2.2、優化連接復用

在網絡建立鏈接的過程中,網絡庫並不會立刻把連接釋放,而是放到連接池中。這時如果有另壹個請求的域名和端口是壹樣的,就直接拿出連接池中的連接進行發送和接收數據,少了建立連接的耗時。

這裏我們利用 HTTP 協議裏的 keep-alive,而 HTTP/2.0 的多路復用則可以進壹步的提升連接復用率。它復用的這條連接支持同時處理多條請求,所有請求都可以並發在這條連接上進行。



2.3、減少數據傳輸量

流行的兩種數據序列化方式是 JSON 和 Protocol Buffers。Protocol Buffers 使用起來更加復雜壹些,但在數據壓縮率、序列化與反序列化速度上面都有很大的優勢。另外壹方面是壓縮算法的選擇,通用的壓縮算法主要是如 gzip,Google 的 Brotli 或者 Facebook 的 Z-standard 都是壓縮率更高的算法。針對圖片我們可以使用 webp、hevc、SharpP 等壓縮率更高的格式。

通過以上方式減少數據傳輸量,提升傳輸速度。

三、Web 頁面優化

3.1、主要分析指標

使用 Performance 指標分析用戶體驗,window.performance 接口記錄了壹次網頁加載全過程中每個生命周期的指標,如下圖所示。但 Performance 指標有壹定局限性。

3.2、加載速度優化

CDN 加速:CDN 內容分發網絡(Content Delivery Network),解決跨地域跨運營商網絡性能問題,提供穩定快速的加速服務,基於 IP 網絡和緩存服務器構建,通過全局負載均衡技術將用戶請求導向距離最近的服務節點,減少網絡擁塞和延遲‌。當用戶請求這些資源(如圖片、CSS、JavaScript 文件等)緩存到離用戶最近的節點上時,可以直接從最近的 CDN 節點獲取,而無需每次都回源到原始服務器,從而顯著減少網絡延遲和帶寬消耗,提高加載速度。可以通過監控和分析 CDN 性能指標,可以及時發現並解決潛在的網絡性能問題,如緩存未命中、節點負載過高等。簡單原理示意圖如下:

四、小結


網絡性能優化是壹個涉及整個網絡鏈路的過程,包括物理鏈路和雲端優化。要保證應用業務整體網絡的速度、穩定性和用戶體驗,不僅需要關註大前端網絡架構和優化,更重要的是服務端和雲端的整體架構支持。服務端需考慮高可靠(備用、集群、限流)、高性能(擴展、DNS、CDN)、高安全(SSL、風控機制)等方面。

Related articles