简述大前端技术栈的网络原理

一、大前端包括哪些技术栈

大前端指的是涵盖所有与前端开发相关的技术和平台，应用于各类设备和操作系统上。大前端不仅包括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: 对于鸿蒙系统，我们可以使用系统提供的网络[e-mail]进行网络操作，也可以使用三方库@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

审核编辑 黄宇