高性能架构：客户端及网络接入优化

高性能架构：客户端及网络接入优化

引用

CSDN

1.

https://blog.csdn.net/yangshangwei/article/details/146138425

客户端及网络接入

浏览器访问优化

加载优化

• 减少HTTP请求：合并文件（CSS/JS/图片雪碧图）
• 资源缓存
• 强缓存：
• Expires（绝对时间）
• Cache-Control（相对时间）
• 协商缓存：
• Last-Modified / If-Modified-Since
• ETag
• 代码压缩：JS/CSS压缩工具、Gzip传输
• 按需加载：懒加载、滚动加载、Media Query
• 图片压缩：工具（TinyPNG）、srcset适配
• 减少Cookie：避免静态资源携带Cookie（动静分离）
• 异步加载：
• defer（DOM渲染后执行）
• async（加载后立即执行）
• 预解析处理：DNS预解析（dns-prefetch）

渲染优化

• 设置viewport：优化移动端渲染
• 减少DOM节点：简化页面结构
• 动画优化：requestAnimationFrame替代setTimeout
• 高频事件优化：防抖（debounce）与节流（throttle）
• GPU加速：CSS3属性（transform、opacity）

执行优化

• 无阻塞处理：CSS头部加载、JS尾部加载
• 避免空src：防止重复加载当前页面
• 避免图片大小重置：减少重绘
• 避免dataURL：未压缩数据增加解码开销

CDN缓存

核心机制

• 回源：未命中缓存时逐级向上请求
• 缓存静态资源：JS/CSS/图片/静态化HTML

应用场景

• 动静分离：静态资源独立域名（避免Cookie传输）
• 页面静态化：定时生成静态页面（如城市首页）

优化效果

• 降低源服务器负载
• 就近访问，提升用户响应速度

反向代理（Nginx）

负载均衡算法

• 轮询：默认策略，按时间顺序分发
• 权重：按服务器性能分配请求比例
• IP哈希：会话粘连（同一客户端固定后端）
• 最少连接：优先分发到连接数少的服务器
• Fair策略：按响应时间分配（需插件支持）
• URL哈希：资源下载场景（同一URL固定后端）

缓存配置

• 定义缓存空间

  proxy_cache_path /data/cache levels=1 keys_zone=static-resources:50m max_size=1G inactive=30m;
  

• levels：目录层级（1级=16目录）

• keys_zone：内存中缓存索引大小

• max_size：磁盘最大缓存空间

• inactive：缓存失效时间

• 启用缓存

  proxy_cache static-resources;
  proxy_cache_valid 200 301 302 5m;
  

• 动态标记缓存状态

  add_header static-Cache "$upstream_cache_status from $server_addr";
  

用户访问流程对比

• 无CDN：所有请求直达源服务器，高延迟。
• 有CDN：就近访问CDN节点，缓存未命中时回源。
• 反向代理架构：客户端 → Nginx（负载均衡/缓存） → 后端服务器集群。