Big Front-End Essentials: Tech Stacks, Network Frameworks & Optimization

1. Big Front-End Technology Stack

Big front-end refers to all technologies and platforms related to front‑end development across devices and operating systems. It includes web development, mobile development and cross‑platform application development, specifically:

Native application development : Android, iOS, HarmonyOS, etc.

Web front‑end frameworks : Vue, React, Angular, etc.

Mini‑program development : WeChat Mini‑Program, JD Mini‑Program, Alipay Mini‑Program, etc.

Cross‑platform solutions : React Native, Flutter, Taro, Weex, etc.

2. Common Network Frameworks

2.1 Native Application Development

Android : OkHttp and Retrofit are widely used. OkHttp provides a reliable HTTP client supporting synchronous and asynchronous requests. Retrofit builds on OkHttp, offering a higher‑level abstraction for simpler API calls.

OkHttp: https://github.com/square/okhttp

Retrofit: https://github.com/square/retrofit

iOS : NSURLSession is the standard library. Popular third‑party libraries include AFNetworking and Alamofire.

AFNetworking: https://github.com/AFNetworking/AFNetworking (no longer maintained); alternative fork: https://github.com/northwind/AFNetworking

Alamofire: https://github.com/Alamofire/Alamofire

HarmonyOS : Use the system network API @ohos.net.http or third‑party libraries such as @ohos/axios, which are compatible with Android libraries like OkHttp.

2.2 Web Front‑End Frameworks

Vue : Axios is a Promise‑based HTTP client for browsers and Node.js.

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

React : Uses the Fetch API, which replaces XMLHttpRequest but lacks advanced features such as request cancellation.

Angular : Provides HttpClient module with built‑in JSON support and interceptor capabilities.

2.3 Mini‑Program Development

WeChat Mini‑Program: use wx.request() for network requests, supporting HTTPS and common HTTP methods.

JD Mini‑Program and Alipay Mini‑Program offer similar network request APIs.

2.4 Cross‑Platform Solutions

React Native : Can use Axios or Fetch for network requests.

Flutter : Commonly uses Dio, a powerful HTTP library, and may also use the built‑in http package. Retrofit is a Dio‑based wrapper that simplifies RESTful API calls.

Dio: https://github.com/Xigua-gua/dio

Retrofit generator: https://pub.dev/packages/retrofit_generator

Taro/uni‑app: Cross‑platform frameworks that wrap their own network libraries but also support Axios or native Fetch.

3. Network Request Process Overview

User initiates request : entering a URL, clicking a link, or programmatically sending an HTTP(S) request.

DNS resolution : query DNS servers to obtain the target IP address.

CDN cache check : if a CDN node has a fresh copy, it returns the response directly.

TCP connection establishment : three‑way handshake (SYN, SYN‑ACK, ACK).

SSL/TLS handshake (HTTPS only): negotiate encryption parameters and certificates.

Load balancing : distribute the request to backend servers.

Send HTTP request : client constructs and sends the request message.

Server processes request : executes business logic, accesses databases, etc., and generates a response.

Handle redirects : client follows any redirect responses.

Receive HTTP response : client parses status code, headers and body.

Close connection : based on Connection header or keep‑alive settings.

4. Network Performance Optimization

4.1 Optimization Directions

Focus on speed, weak‑network handling, and security, while also considering power consumption and traffic.

4.2 Native Application Optimization

DNS optimization : Use HTTPDNS to bypass ISP DNS, reducing hijacking and latency.

Connection reuse : Keep connections alive or use HTTP/2 multiplexing to share a single TCP connection across multiple requests.

Data reduction : Prefer Protocol Buffers over JSON, apply compression algorithms (gzip, Brotli, Zstandard), and use modern image formats (WebP, HEVC, SharpP).

Security : Use HTTPS, TLS 1.3, and optionally encrypt payloads with RSA, DES, AES for additional protection.

Weak‑network handling : Implement robust reconnection logic, prioritize critical resources, provide offline caching, and monitor performance metrics.

Other optimizations : CDN for static assets, HTTP/2 or HTTP/3, TLS 1.3, and efficient caching.

4.3 Web Page Optimization

Measure performance with the Performance API and Web Vitals (LCP, FID, CLS, etc.). Optimize loading speed via CDN, DNS pre‑fetch, reduce HTTP requests, combine assets, lazy‑load images, and use modern image formats.

Mitigate white‑screen time by adopting PWA techniques, service workers, and pre‑download of resources.

Handle weak networks by leveraging browser storage (LocalStorage, IndexedDB) and caching strategies.

Additional tweaks include HTTP/2, proper cache headers, gzip compression, and resource minification.

4.4 Mini‑Program Optimization

Use DNS pre‑fetch, data pre‑fetch, and other platform‑specific features to reduce cold‑start latency.

5. Summary

Network performance optimization spans the entire network chain—from physical links to cloud services. Ensuring speed, stability and user experience requires coordinated front‑end, server‑side and cloud‑side strategies, including high reliability, high performance and strong security measures.

6. References

Tencent 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 GitHub: https://github.com/GoogleChrome/web-vitals/tree/main

Browser Principles: https://developer.chrome.com/blog/inside-browser-part3?hl=zh-cn

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

TCP/IP Model: https://tonydeng.github.io/sdn-handbook/basic/tcpip.html

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