Comprehensive Overview of Frontend Technology Stacks, Network Frameworks, and Performance Optimization

1. Frontend Technology Stacks

Frontend development covers all technologies and platforms related to front‑end work on various devices and operating systems. It includes native app development (Android, iOS, HarmonyOS), web front‑end frameworks (Vue, React, Angular), mini‑program development (WeChat, JD, Alipay), and cross‑platform solutions (React Native, Flutter, Taro, Weex).

2. Common Network Frameworks

Android: OkHttp and Retrofit are widely used; OkHttp provides a reliable HTTP client, while Retrofit builds on OkHttp to simplify API calls. https://github.com/square/okhttp and https://github.com/square/retrofit .

iOS: NSURLSession is the standard library; third‑party options include AFNetworking ( https://github.com/AFNetworking/AFNetworking ) and Alamofire ( https://github.com/Alamofire/Alamofire ).

HarmonyOS: Uses the system network API @ohos.net.http or third‑party libraries such as @ohos/axios and can also reuse Android libraries like OkHttp.

Web Frameworks: Vue typically uses Axios ( https://github.com/axios/axios ), React can use the Fetch API, and Angular provides its own HttpClient module.

Mini‑programs: Use platform‑specific request APIs such as wx.request() for WeChat.

Cross‑platform: React Native can use Axios or Fetch; Flutter commonly uses Dio ( https://github.com/Xigua-gua/dio ) and Retrofit for Dart, as well as the built‑in http package.

3. Network Request Principles

1) User initiates a request via URL, link click, or programmatic HTTP(S) call. 2) DNS resolution obtains the server IP, checking caches before querying DNS servers. 3) CDN cache check may serve the response directly. 4) TCP three‑way handshake establishes a connection. 5) For HTTPS, an SSL/TLS handshake secures the channel. 6) Load balancers distribute requests to backend servers. 7) The client sends an HTTP request message. 8) The server processes the request, accesses databases or business logic, and returns an HTTP response. 9) Redirect handling may trigger additional requests. 10) The client receives and parses the response. 11) The connection is closed or kept alive based on headers.

4. Network Performance Optimization Directions

Focus on speed, weak‑network resilience, and security. Speed aims to fully utilize bandwidth; weak‑network optimization ensures connectivity under unstable conditions; security prevents hijacking, eavesdropping, and tampering.

4.1 Native App Optimization

DNS Optimization: Use HTTPDNS to bypass ISP DNS, reducing latency and avoiding DNS hijacking. The flow includes SDK request, HTTP transport, authoritative query, result return, local caching, and direct IP connection.

Connection Reuse: Keep connections alive in a pool; reuse identical host/port connections via HTTP keep‑alive or HTTP/2 multiplexing.

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

Security: Use HTTPS with TLS, optionally add second‑layer encryption (RSA, DES, AES) for DRM or payment scenarios.

Weak‑Network Handling: Implement robust reconnection logic, prioritize critical resources, provide offline access, show loading placeholders, and monitor performance metrics.

Other Optimizations: CDN static‑resource acceleration, HTTP/2 & HTTP/3 features, TLS 1.3 for faster handshakes.

4.2 Web Page Optimization

Use Performance metrics (LCP, FID, CLS, FCP, INP, TTI, TBT, TTFB) via the Web Vitals library. Optimize via CDN, DNS pre‑resolution, reduce HTTP requests (merge CSS/JS, sprites), lazy‑load non‑critical assets, and compress resources.

White‑Screen Reduction: Apply PWA with Service Workers for caching, pre‑download resources, and hot‑update mechanisms to lower TTFB.

Weak‑Network for Web: Leverage browser storage (LocalStorage, IndexedDB) for caching, and CDN edge delivery.

4.3 Mini‑Program Optimization

Use DNS pre‑resolution, pre‑connect (iOS only), and data pre‑fetching to load content during cold start ( WeChat docs ).

5. Summary

Network performance optimization spans the entire network chain—from physical links to cloud services. Achieving fast, stable, and secure user experiences requires coordinated front‑end, native, and server‑side strategies, including high reliability, scalability, and robust 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 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