一、大前端包括哪些技術棧

大前端指的是涵蓋所有與前端開發相關的技術和平臺，應用于各類設備和操作系統上。大前端不僅包括Web開發，還包括移動端開發和跨平臺應用開發，具體包括：

?原生應用開發：Android、iOS、鴻蒙（HarmonyOS）等；

?Web前端框架：Vue、React、Angular等；

?小程序開發：微信小程序、京東小程序、支付寶小程序等；

?跨平臺解決方案：React Native、Flutter、Taro、Weex等。

二、常用網絡框架介紹

1、原生應用開發

?Android: OkHttp 和 Retrofit 是常用的網絡庫。OkHttp 提供了一個可靠的HTTP客戶端，支持同步和異步請求。Retrofit 則建立在OkHttp之上，提供了更高級別的抽象，使API調用更加簡單。

?okhttp：https://github.com/square/okhttp

?retrofit：https://github.com/square/retrofit

?iOS: NSURLSession 是蘋果提供的用于發送網絡請求的標準庫。在iOS開發中，AFNetworking是一個非常流行的第三方網絡庫，它簡化了網絡請求的過程，提供了豐富的API來處理HTTP請求和響應。Alamofire 是一個基于NSURLSession構建的Swift語言的HTTP網絡庫，它簡化了網絡通信的過程。

?AFNetworking：https://github.com/AFNetworking/AFNetworking，主倉庫不再接受更新或維護?；

?另一個fork活躍庫：https://github.com/northwind/AFNetworking

?Alamofire：?https://github.com/Alamofire/Alamofire?

?HarmonyOS: 對于鴻蒙系統，我們可以使用系統提供的網絡API@ohos.net.http進行網絡操作，也可以使用三方庫@ohos/axios，同時也兼容部分Android網絡庫，如OkHttp等。

2、Web前端框架

?Vue: Axios是一個基于Promise的HTTP客戶端，適用于瀏覽器和Node.js。它使得發起GET、POST等HTTP請求變得非常容易，并且支持攔截請求和響應、自動轉換JSON數據等功能。

?Axios：https://github.com/axios/axios

?React: Fetch API提供了一個獲取資源的接口（包括跨域請求），它是基于Promise設計的，用來取代老式的XMLHttpRequest。雖然Fetch比Axios輕量，但它不支持一些高級功能，比如取消請求或者自動轉換JSON數據。

?Angular: Angular自帶的HttpClient模塊是專門為與后端服務進行交互而設計的，它內置了對JSON的支持，并且可以很容易地添加攔截器來監控或修改請求和響應。

3、小程序開發

?微信小程序: 使用wx.request()進行網絡請求，這是微信小程序官方推薦的方式，支持HTTPS請求，能夠處理常見的HTTP方法。

?京東小程序、支付寶小程序: 類似微信小程序，它們也提供了各自的網絡請求API，方便端側與服務器進行數據交互。

4、跨平臺解決方案

?React Native/axios 或 fetch: React Native 可以選擇使用axios或fetch進行網絡請求，取決于項目需求和個人偏好。

?Flutter/http: ?Dio? 是一個在 Flutter 中廣泛使用的網絡請求庫，它支持多種HTTP請求方法，包括GET、POST、PUT、PATCH、DELETE等，并且提供了豐富的配置選項和攔截器機制。Retrofit? 基于 Dio 的二次封裝，支持接口化聲明式請求，通過代碼生成簡化 RESTful API 調用。另外Flutter中http包也是常用的網絡請求庫之一，它允許我們輕松地發起HTTP請求并處理響應。

?Dio：https://github.com/Xigua-gua/dio；

?Retrofit：https://pub.dev/packages/retrofit_generator

?Taro/uni-app: 跨平臺開發框架會封裝自己的網絡請求庫，但也支持直接使用axios或原生的fetch API。

三、網絡請求原理簡述

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解析、建立鏈接等去尋找優化點...

而面向不同平臺環境有不同的優化方式，下面將簡述原生應用、前端H5、微信小程序如何進行網絡優化。

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等壓縮率更高的格式。

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

2.4、安全優化

使用HTTPS有了基本的數據傳輸安全，HTTPS 的 HTTP/2 通道，已經有了 TLS 加密，但沒有絕對的安全，道高一尺，魔高一丈；如果客戶端設置了代理，TLS 加密的數據可以被解開并可能被利用。我們可以結合RSA、DES、AES等常用算法對傳輸內容做二次加密（在目前的數字版權領域-DRM系統和支付相關領域應用廣泛），我們可以在接入層統一實現，具體業務邏輯不用關心細節。

2.5、弱網優化

一般我們把用戶網絡波動、信號強度弱、網絡延遲大稱為弱網環境；對于用戶來說，最大的感受就是打開各種 頁面慢、加載久、圖片顯示異常等，可能因為處在弱網環境導致請求時間長異常導致；首先是識別出當前是弱網環境，然后進行優化。可以從以下幾方面進行優化：

網絡連接優化：設計健壯的重連邏輯，當網絡中斷時能夠自動嘗試重新連接；

數據傳輸優化：使用高效的壓縮算法減少傳輸的數據量，根據業務需求對不同的請求設置優先級，確保重要資源優先加載。

用戶體驗優化：為用戶提供離線訪問功能，即使在網絡斷開的情況下也能查看之前已下載的內容；提供明確的加載進度指示或者占位符，告知用戶當前狀態，減輕等待焦慮感。

監控與分析：部署網絡性能監測工具，實時跟蹤網絡狀況，及時發現問題。收集并分析網絡請求的成功率、響應時間等指標，識別瓶頸所在，指導后續優化工作。

2.6、其它優化

針對圖片等靜態資源進行CDN優化；HTTP/2與HTTP/3：利用這些協議的新特性，比如多路復用、頭部壓縮等，提高傳輸效率。TLS 1.3：采用最新的TLS版本可以加快安全連接的建立速度，因為它簡化了握手過程。

通過應用上述優化策略，可以有效地提升應用程序在網絡請求方面的性能，提供更流暢的用戶體驗。

3、Web頁面優化

3.1、主要分析指標

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

Google推出的衡量頁面狀況的指標分為兩部分，一部分是核心網頁指標，一部分是其它網頁指標。

核心網頁指標，包括加載響應速度（LCP）、互動交互（FID）以及視覺穩定性（CLS）。

其它網頁指標，包括首次內容繪制（FCP）、互動延遲（INP）、可交互時間（TTI）、總阻塞時間（TBT）、首字節時間（TTFB）等等。其中，加載響應速度是最核心的指標，我們通過集成Web Vitals 庫可獲取這些網頁指標。

3.2、加載速度優化

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

預解析和預連接：DNS 解析是性能優化的關鍵步驟，每個前端資源請求前都需要先通過 DNS 解析獲取對應的 IP 地址，這是一個開銷較大的過程。如果一個前端頁面包含許多不同域名的資源鏈接，我們可以使用 DNS 預解析的方式提前獲取 IP 地址，從而縮短其他資源請求的響應時間。我們可以選擇性使用。

減少HTTP請求：合并CSS/JS文件，使用CSS Sprites合并小圖標；延遲加載非關鍵資源：圖片/視頻懶加載，異步加載第三方腳本；圖片優化：減少資源大小，采用WebP格式等；

3.3、白屏優化

首先白屏時間由TTFB和瀏覽器繪制時間組成，TTFB越大，白屏效果越明顯，用戶等待時間越長。我們可以通過如下方式進行優化：PWA方案：漸進式 Web 應用程序（Progressive Web App，簡稱 PWA）是一種結合了 Web 和原生應用程序的技術，提供了類似于原生應用程序的體驗。PWA 的核心是 Service Worker，它是一種可以控制頁面加載和行為的獨立腳本。它能處理資源緩存，實現離線訪問和處理推送通知等功能。PWA方案更適合海外市場，需要考慮用戶習慣和瀏覽器支持情況；App預下載是可以提前將前端資源下載到用戶本地并加載本地HTML文件，減少TTFB指標值，消除白屏效果。前端資源熱更新是一種無需重新安裝App就可以更新前端資源的方式，可以在用戶無感知的情況下進行，提供更流暢、更友好的體驗。App熱更新需要確定何時下載以及如何判斷和更新資源包，可以通過判斷資源包的哈希值是否有變化來確定是否需要更新資源包。

3.4、弱網優化

和原生應用優化不一樣的是，除了數據傳輸優化還可以合理利用瀏覽器或客戶端的本地存儲能力（如LocalStorage, IndexedDB等），緩存靜態資源和部分動態數據，減少重復請求；通過CDN加速，將內容分布到地理位置分散的服務器上，讓用戶從最近的節點獲取資源，降低延遲。

3.5、其它優化

采用 HTTP2 協議，設置HTTP緩存頭（Cache-Control/Expires），gzip壓縮對HTML/CSS/JS文件進行壓縮，減少數據傳輸量優化圖片字符等資源文件大小，利用瀏覽器緩存復用靜態資源等。

4、小程序優化

4.1、常規優化：如上圖所示；

4.2、微信小程序支持一些獨有的優化點：

DNS預解析：DNS預解析域名，是框架提供的一種在小程序啟動時，提前解析業務域名的技術；還有預連接域名，目前僅支持iOS：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html#_2-DNS%E9%A2%84%E8%A7%A3%E6%9E%90%E5%9F%9F%E5%90%8D

數據預拉取：預拉取能夠在小程序冷啟動的時候通過微信后臺提前向第三方服務器拉取業務數據，當代碼包加載完時可以更快地渲染頁面，減少用戶等待時間，從而提升小程序的打開速度。https://developers.weixin.qq.com/miniprogram/dev/framework/ability/pre-fetch.html

五、小結

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

六、其它參考資料

騰訊Mars：https://github.com/Tencent/mars

Chromium Cronet：https://chromium.googlesource.com/chromium/src/+/lkgr/components/cronet/

Web Vitals：https://web.dev/articles/vitals?hl=zh-cn

Web Vitals：https://github.com/GoogleChrome/web-vitals/tree/main

瀏覽器原理：https://developer.chrome.com/blog/inside-browser-part3?hl=zh-cn

HTTP：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Guides/Overview

TCP/IP網絡模型：https://tonydeng.github.io/sdn-handbook/basic/tcpip.html

TCP：https://tools.ietf.org/html/rfc7413

審核編輯 黃宇