flowchart TD
A[📱 手机端访问CDN静态资源失败] --> B{🔍 初步检查}
B --> C[检查网络连接]
B --> D[检查资源URL]
B --> E[检查HTTP状态码]
C --> C1{网络是否正常?}
C1 -->|是| F[网络正常]
C1 -->|否| C2[🚨 网络问题]
C2 --> C3[切换网络
WiFi ↔ 4G/5G] C3 --> C4[使用网络诊断工具
ping, traceroute] D --> D1{URL是否正确?} D1 -->|是| F D1 -->|否| D2[🚨 URL错误] D2 --> D3[检查域名拼写
检查路径正确性] E --> E1{状态码分析} E1 --> E2[200: 成功但资源异常] E1 --> E3[404: 资源不存在] E1 --> E4[403: 访问被拒绝] E1 --> E5[500: 服务器错误] E1 --> E6[超时: 网络问题] F --> G{🌐 CDN层面检查} G --> H[检查CDN节点] G --> I[检查缓存状态] G --> J[检查地理位置] H --> H1{节点是否可达?} H1 -->|否| H2[🚨 CDN节点故障] H2 --> H3[切换CDN节点
联系CDN服务商] I --> I1{缓存是否有效?} I1 -->|否| I2[🚨 缓存问题] I2 --> I3[强制刷新缓存
清除本地缓存] J --> J1{地理位置限制?} J1 -->|是| J2[🚨 地域限制] J2 --> J3[配置地域白名单
使用全球CDN] H1 -->|是| K I1 -->|是| K J1 -->|否| K K --> L{📱 移动端特定检查} L --> M[检查User-Agent] L --> N[检查移动网络] L --> O[检查HTTP/HTTPS] M --> M1{UA是否被限制?} M1 -->|是| M2[🚨 UA限制] M2 --> M3[修改User-Agent
配置UA白名单] N --> N1{移动网络特殊性?} N1 -->|是| N2[🚨 移动网络问题] N2 --> N3[检查运营商限制
测试不同运营商] O --> O1{协议是否支持?} O1 -->|否| O2[🚨 协议问题] O2 --> O3[升级到HTTPS
检查SSL证书] M1 -->|否| P N1 -->|否| P O1 -->|是| P P --> Q{🔧 深度排查} Q --> R[DNS解析检查] Q --> S[防火墙检查] Q --> T[资源完整性检查] R --> R1[使用dig/nslookup
检查DNS记录] S --> S1[检查WAF规则
检查IP白名单] T --> T1[检查文件MD5
检查文件大小] R1 --> U[📋 解决方案汇总] S1 --> U T1 --> U U --> V[✅ 问题解决] style A fill:#ff6b6b,stroke:#d63031,color:#fff style C2 fill:#fdcb6e,stroke:#e17055 style D2 fill:#fdcb6e,stroke:#e17055 style H2 fill:#fd79a8,stroke:#e84393 style I2 fill:#fd79a8,stroke:#e84393 style J2 fill:#fd79a8,stroke:#e84393 style M2 fill:#a29bfe,stroke:#6c5ce7 style N2 fill:#a29bfe,stroke:#6c5ce7 style O2 fill:#a29bfe,stroke:#6c5ce7 style V fill:#00b894,stroke:#00a085,color:#fff
WiFi ↔ 4G/5G] C3 --> C4[使用网络诊断工具
ping, traceroute] D --> D1{URL是否正确?} D1 -->|是| F D1 -->|否| D2[🚨 URL错误] D2 --> D3[检查域名拼写
检查路径正确性] E --> E1{状态码分析} E1 --> E2[200: 成功但资源异常] E1 --> E3[404: 资源不存在] E1 --> E4[403: 访问被拒绝] E1 --> E5[500: 服务器错误] E1 --> E6[超时: 网络问题] F --> G{🌐 CDN层面检查} G --> H[检查CDN节点] G --> I[检查缓存状态] G --> J[检查地理位置] H --> H1{节点是否可达?} H1 -->|否| H2[🚨 CDN节点故障] H2 --> H3[切换CDN节点
联系CDN服务商] I --> I1{缓存是否有效?} I1 -->|否| I2[🚨 缓存问题] I2 --> I3[强制刷新缓存
清除本地缓存] J --> J1{地理位置限制?} J1 -->|是| J2[🚨 地域限制] J2 --> J3[配置地域白名单
使用全球CDN] H1 -->|是| K I1 -->|是| K J1 -->|否| K K --> L{📱 移动端特定检查} L --> M[检查User-Agent] L --> N[检查移动网络] L --> O[检查HTTP/HTTPS] M --> M1{UA是否被限制?} M1 -->|是| M2[🚨 UA限制] M2 --> M3[修改User-Agent
配置UA白名单] N --> N1{移动网络特殊性?} N1 -->|是| N2[🚨 移动网络问题] N2 --> N3[检查运营商限制
测试不同运营商] O --> O1{协议是否支持?} O1 -->|否| O2[🚨 协议问题] O2 --> O3[升级到HTTPS
检查SSL证书] M1 -->|否| P N1 -->|否| P O1 -->|是| P P --> Q{🔧 深度排查} Q --> R[DNS解析检查] Q --> S[防火墙检查] Q --> T[资源完整性检查] R --> R1[使用dig/nslookup
检查DNS记录] S --> S1[检查WAF规则
检查IP白名单] T --> T1[检查文件MD5
检查文件大小] R1 --> U[📋 解决方案汇总] S1 --> U T1 --> U U --> V[✅ 问题解决] style A fill:#ff6b6b,stroke:#d63031,color:#fff style C2 fill:#fdcb6e,stroke:#e17055 style D2 fill:#fdcb6e,stroke:#e17055 style H2 fill:#fd79a8,stroke:#e84393 style I2 fill:#fd79a8,stroke:#e84393 style J2 fill:#fd79a8,stroke:#e84393 style M2 fill:#a29bfe,stroke:#6c5ce7 style N2 fill:#a29bfe,stroke:#6c5ce7 style O2 fill:#a29bfe,stroke:#6c5ce7 style V fill:#00b894,stroke:#00a085,color:#fff
1
🔍 基础排查方案
快速检查清单:
• 网络连接状态
• URL正确性
• HTTP状态码
• 资源可访问性
推荐工具:
• 网络连接状态
• URL正确性
• HTTP状态码
• 资源可访问性
-
Chrome DevTools
Network面板查看请求详情,Console查看错误信息
-
Postman/Insomnia
API测试工具,模拟不同请求参数
-
curl命令
命令行HTTP客户端,详细请求响应信息
2
🌐 CDN层面排查
CDN关键检查点:
• 节点健康状态
• 缓存命中率
• 地理位置限制
• 回源配置
推荐工具:
• 节点健康状态
• 缓存命中率
• 地理位置限制
• 回源配置
-
CDN Finder
识别网站使用的CDN服务商和节点信息
-
GTmetrix
全球多地点性能测试,CDN效果分析
-
Pingdom
网站速度测试,CDN节点响应时间分析
-
腾讯云CDN控制台
实时监控CDN状态、缓存命中率、流量统计
3
📱 移动端特有问题
移动端常见问题:
• 运营商网络限制
• User-Agent限制
• HTTPS兼容性
• 移动网络质量
推荐工具:
• 运营商网络限制
• User-Agent限制
• HTTPS兼容性
• 移动网络质量
-
BrowserStack
真实移动设备测试,多运营商网络环境
-
Charles Proxy
移动端HTTP抓包工具,分析请求详情
-
Fiddler
HTTP调试代理工具,支持移动端调试
-
mitmproxy
开源HTTP代理工具,支持SSL解密
4
🔧 网络层面诊断
网络诊断要点:
• DNS解析检查
• 路由追踪分析
• 防火墙规则
• SSL证书验证
推荐工具:
• DNS解析检查
• 路由追踪分析
• 防火墙规则
• SSL证书验证
-
dig/nslookup
DNS查询工具,检查域名解析记录
-
traceroute/mtr
网络路径追踪,定位网络瓶颈
-
SSL Labs
SSL证书和TLS配置检测工具
-
网络测速工具
Speedtest、Fast.com等带宽测试工具
5
📊 监控与预防
长期监控策略:
• 实时性能监控
• 错误日志分析
• 用户体验监控
• 自动告警机制
推荐工具:
• 实时性能监控
• 错误日志分析
• 用户体验监控
• 自动告警机制
-
腾讯云监控
CDN性能监控、告警配置、日志分析
-
Sentry
前端错误监控,实时错误追踪
-
New Relic
应用性能监控,用户体验分析
-
Grafana + Prometheus
开源监控方案,自定义指标和告警
6
✅ 常见解决方案
快速解决方案:
1. 缓存问题:• 强制刷新CDN缓存
• 修改资源版本号
• 配置合理的缓存策略
2. 网络问题:
• 多CDN厂商备份
• 智能调度策略
• 降级预案机制
3. 移动端优化:
• 资源压缩和合并
• HTTP/2推送
• 预加载关键资源
• WebP格式图片
4. 监控告警:
• 设置可用性监控
• 配置多维度告警
• 建立应急响应流程
