移动端常见白屏问题优化之网络优化篇

移动端常见白屏问题优化之网络优化篇

在移动应用开发中，白屏问题一直是影响用户体验的重要因素之一，尤其是在图片加载场景下。得物技术团队针对这一问题，从网络优化的角度进行了深入的技术实践。本文将详细介绍他们的优化策略和具体实现方案，为移动应用开发者提供有价值的参考。

引言

图片加载作为App体验的重要指标，端侧的白屏问题是最为严重且常见的问题之一。据统计，网络问题导致白屏的比例高达81.97%。除了常见的弱网/无网问题，还有许多其他网络环境问题可以进行优化，例如设备不支持IPv6、CDN节点异常、证书超时等。

网络优化和监控概览

网络监控能力

3.1 概述

网络异常导致的图片白屏问题，往往和当时的环境有关。为了准确分析问题根因，需要一套完善的监控体系来记录问题现场的信息。

3.2 OkHttp基础监控

图片网络请求的阶段信息，可以通过实现OkHttp自带的EventListener来获取，在各个阶段开始和结束点记录下时间戳即可。其中需要重点关注connectFailed、requestFailed和responseFailed这三个失败的回调。

3.3 APM流量监控

考虑到网络异常的滞后性，故障往往是数十秒之前引入的。因此，需要通过系统API获取当前App流量消耗，以计算白屏问题发生时的网速状态。

3.4 CDN异常记录

CDN厂商侧的异常，例如服务器IP跨省、节点挂了等问题，需要收集多个Host的请求记录进行横向对比来确认是单个CDN厂商的问题。

3.5 网络库请求缓存

常规的网络监控方案为了节省内存，会在请求结束时将其从内存缓存队列中移除。而白屏问题因为其滞后性，需要单独使用一个LRU队列来缓存最近N条网络日志。

3.6 网络诊断工具

在逐步解决用户问题的过程中，我们研发了网络诊断工具，实现了基础网络信息采集、Ping、TraceRoute等功能。当检测到用户发生白屏时自动触发网络诊断。

CDN质量监控

4.1 概述

CDN作为整体白屏问题中的重要环节，在白屏排查过程中，经常遇到接口正常但CDN访问异常的情况。因此，需要自定义端侧的CDN质量指标体系，并配合云厂商推进云端策略的优化。

4.2 CDN质量大盘

基于端侧的本地IP&CDN远端IP，建设了CDN质量大盘。核心指标包括：

• 响应成功率
• 响应超时率
• 响应异常率
• 响应平均耗时
• 响应慢请求率
• 响应慢请求耗时

4.3 CDN云端监控

云端监控则是CDN质量的精确告警的短时效指标。主要包括：

• 节点拨测：CDN节点拨测整体指定的图片拨测阈值当前限制在200ms。
• 节点监控：关于到节点后的请求监控，主要依赖于云厂商的监控能力。
• 异常错误码监控：监控各类HTTP状态码的出现频率。

网络问题优化治理

DNS策略优化

5.1 概述

从网络监控、白屏监控中可以看到，DNS错误是网络阶段导致白屏的最大因素。通过对LocalDNS的行为分析，发现Android平台下的LocalDNS查询极其不可靠。

5.2 LocalDNS行为

• 按照TTL缓存：Android平台严格遵守TTL进行缓存。
• 双栈客户端同时查询：双栈客户端上，同时发起A类（IPv4）、AAAA类（IPv4）查询。
• DNS数据包错误与重试：Android平台在DNS未返回时的重试逻辑。
• iOS平台的DNS行为：iOS平台下的DNS异常率远远低于Android。

5.3 DNS优化

在LocalDNS的基础上，增加了HttpDNS和磁盘缓存来优化DNS问题。

• HttpDNS：在LocalDNS 60ms未成功返回时，异步启动HttpDNS进行查询。
• 磁盘缓存：DNS查询成功时，将查询结果缓存到磁盘上。

IPv6故障修复

6.1 概述

Android平台在TCP建连阶段遇到的最大问题是IPv6优先级高于IPv4。当IPv6路径不可用时，会导致显著的连接延迟。

6.2 IPv6探测 & 重排序

此实现的思路是既然IPv6可能故障，那么提前探测潜在故障。通过调整即将建连的IP列表的顺序来解决客户端建连到IPv4的延迟问题。

1）IPv6探测：如果IP列表中同时包含IPv6&IPv4，则对第一个IPv6地址同步进行Ping探测。
2）重排序：根据IPv6的畅通情况，调整IP列表的顺序。

6.3 快乐眼球（HappyEyeball）

当前DNS返回的IP地址数量超过一个时，每250ms异步启动一个新的TCP建连，任意一个TCP建连成功，则断开其他TCP并开始同步TLS建连。

CDN质量问题治理

8.1 返回IP策略优化

从网络优化来看，DNS优化以及IPv6探测&重排序为我们解决了双栈IPv6问题、单IP不可用等问题，但CDN问题本身由于不同省份、不同区域等节点数量、网络硬件质量均存在差异，这部分是端侧无法弥补的，故我们想到了优化CDN返回IP策略的思路来规避以上问题。

返回IP优化策略：

过程中考虑到得物IPv6浓度问题，最早期是返回了3个v4 IP、3个v6 IP的策略，但发现v6 IP数量变多后，由于LocalDNS天然会把v6 IP排放在v4 IP前面。此举在没有建连竞速优化的老版本下，会导致v6不通的建连时间被逐步拉长30s。故我们在尽可能保证v6浓度的情况下，将返回的v6 IP数量降低到了2个。

由于v6 IP优先请求的情况，我们考虑优先保证v6 IP的本省同大区覆盖，故对v6 IP的本省的大区返回粒度会比v4 IP更细些。

跨省调度问题：

1）针对v4 IP本省2个大区至少返回2个IP；
2）针对v6 IP本省1个大区至少返回1个IP。

单ip返回、v4不返回问题：

1）针对v4 IP至少返回3个；
2）针对v6 IP至少返回2个。

8.2 云厂商优化策略

为了保证图片CDN的节点质量，我们积极同CDN厂商进行沟通协作，进行了部分优化尝试。

• 图片专属节点：将原有云厂商的图片、视频、文件等通用节点，迁移至图片专属的L1节点。
• H2协议栈优化：调整了H2协议栈的算法优化逻辑，对比优化前后的慢请求监控情况。
• 节点动态剔除细化：针对云厂商的到端链路监控以及白屏用户反馈的潜在非到端问题，通过平台归因1min内的CDN请求 & 网络诊断的情况，并经过人工确认为CDN单通问题后，进行节点剔除切换，优先处理节点抖动带来的影响面问题。

CA证书问题

10.1 概述

除了建连阶段的问题外，TLS等证书认证问题上也有较多的用户反馈，同时白屏平台也有较多类似的错误。

10.2 ocsp问题

主要是：

1）TLS耗时开启前后并无实际收益，对于网络耗时的优化可忽略不计；
2）证书的安全性问题，由于图片域名访问为CDN资源非接口核心信息，关闭风险可控；
3）对比主流站点的ocsp开启情况，主流App的图片域名大多未开启。

ocsp的当前时间和下次更新时间：

故我们最终关闭了图片域名的ocsp功能，整体请求异常数、请求耗时并无劣化且图片ocsp的问题反馈数逐步清零。

10.3 域名CA证书替换失效问题

得物目前有100+的域名，CA证书的申请对于CA机构来说，一般在证书有效期小于30天时会进行新证书的签发流程，且证书有效期以申请期时间为准。但过往的证书有效期更新替换后，往往会面临时间前置的用户无法通过CA证书校验，最终引起用户白屏。

我们协同运维侧制定了较为严格的图片域名证书更新时效期，并在多个主域名按此标准落地。

具体是：

1）证书30天到期自动告警能力，及时跟进证书审批事项；
2）证书替换选择在有效期提前3天，避免无规律的申请即更新的情况。

本文小结

网络问题作为用户白屏的主要原因之一，如果不能及时针对性的优化将对大量用户产生困扰。我们在以解决用户白屏为目标的行动中，逐步完善了客户端网络监控、云端CDN监控。并在此过程中完成DNS、建连、证书、运营商调度等方面的优化，杜绝了某些特定错误的发生，保障了更多用户的网络体验。

近期我们会继续推出一篇介绍如何在客户端监控白屏问题，以及平台如何对白屏问题自动化归因的文章，敬请期待。

参考资料

[1] 网络编程懒人入门(十一)：一文读懂什么是IPv6
[2] IPv6技术详解：基本概念、应用现状、技术实践（上篇）
[3] 网络编程入门从未如此简单(三)：什么是IPv6？漫画式图文，一篇即懂！
[4] 不为人知的网络编程(九)：理论联系实际，全方位深入理解DNS
[5] 移动端IM开发者必读(一)：通俗易懂，理解移动网络的“弱”和“慢”
[6] 淘宝移动端统一网络库的架构演进和弱网优化技术实践
[7] 得物自研移动端弱网诊断工具的技术实践分享
[8] 全面了解移动端DNS域名劫持等杂症：原理、根源、HttpDNS解决方案等
[9] 美图App的移动端DNS优化实践：HTTPS请求耗时减小近半
[10] 移动端网络优化之HTTP请求的DNS优化
[11] 百度APP移动端网络深度优化实践分享(一)：DNS优化篇
[12] 百度APP移动端网络深度优化实践分享(二)：网络连接优化篇
[13] 爱奇艺移动端网络优化实践分享：网络请求成功率优化篇
[14] 美团点评的移动端网络优化实践：大幅提升连接成功率、速度等
[15] 腾讯原创分享(一)：如何大幅提升移动网络下手机QQ的图片传输速度和成功率
[16] 腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（上篇）
[17] iOS端移动网络调优的8条建议
[18] 脑残式网络编程入门(五)：每天都在用的Ping命令，它到底是什么？