移动端IM实践：Android版微信如何大幅提升交互性能（一）

本文由微信开发团队人员编写，转自 WeMobileDev，感谢。

前言

本文是Android版微信交互性能优化文章的第一篇（共二篇），着重讲述Android版微信客户端是如何优化UI界面从而提升用户交互性能的过程。下一篇：《移动端IM实践：Android版微信如何大幅提升交互性能（二）》，将从如何优化SQLite读写性能着手，继续讲述提升用户交互性能。

问题背景

随着微信用户使用频度越来越高，微信的Android版客户端逐渐显露出用户交互性能问题：

• 打开会话速度慢；
• 在同一个会话有较多的历史消息下，各种查询，更新,删除等操作，速度明显下降；
• 在会话内有较大量历史消息情况下，进入速度/刷新速度明显降低。
  

初步分析

经过初步分析，我们认为导致用户交互性能下降的原因最大可能有两个：

• UI性能不佳：具体原因将在下一节详述；
• 本地SQLite的数据存取存性能陷阱：将在系列文章的下一篇《移动端IM实践：Android版微信如何大幅提升交互性能（二）》中将述。
  

具体分析

针对UI性能不佳，通过Android自带的trace工具，我们找出具体问题的根源如下：

• 加载会话UI所执行的inflate操作（inflate指的是创建View对象）；
• 退出会话后，列表控件的数据适配器被重置，触发清空列表控件的View（视图）缓存，再次进入需重新创建此前已创建过的view控件；
• 系统切换 Activity（界面） 耗时。
  

解决方案

对于以上问题，我们考虑到会话内UI控件这部分内存在实际使用过程中被重复命中的机会很大，采取合适的cache可以降低这里的每次进入时候的加载时间，故对View采取cache策略在这里看起来是必须的。

首先想到的是把整个会话界面的View static化，不同的会话对应的Activity复用同一个View进行渲染展示，但这么做会出现Activity中的Context（上下文）与View中的Context不一致的问题，View能复用的前提是必须保证View及其子View中的Context与Activity容器的Context一致，否则会出现诸如当前界面弹出的对话框关闭后返回的界面不是此前的界面，或者由于旧Context对象被当前的Activity持有导致旧Activity内存泄露等一系列的问题。

另外，由于Android系统组件ActivityManager进行Activity调度时候本身涉及较多的计算，在低端机器上这个调度时长一度超过150ms，即便在部分高端机上也有超过100ms的情况。我们发现，通过Fragment代替Activity实现界面切换，能够解决因ActivityManager调度耗时较久的问题，并且如果进一步考虑，上述View缓存的问题实际就能够换成用Fragment实现解决，关于Fragment，简单引入介绍下：

Android是在Android 3.0 (API level 11)开始引入Fragment的，并对2.x系列提供了support包支持。可以把Fragment想成Activity中的模块，这个模块有自己的布局，有自己的生命周期，单独处理自己的输入，在Activity运行的时候可以加载或者移除Fragment模块，同时可以把Fragment设计成可以在多个Activity中复用的模块，当开发的应用程序同时适用于平板电脑和手机时，可以利用Fragment实现灵活的布局，改善用户体验。

通过Fragment方式，我们把会话界面的实现进行了一次改造,如下图:


针对上图，蓝色线框内表示会话界面已从原来的Activity模式切换成Fragment，与4个子TAG设计在同一层，只要进程不销毁，会话界面就不会重建，会话进入/退出通过控制Fragment的可见/隐藏来实现。这样一来，在首次创建了会话界面后，后续再次打开，只需要把相关的变量复位，列表控件内所有子View也不需要重建（因数据适配器adapter没有更换），我们要做的是仅仅是刷新要显示的数据，及复位子View的状态。

采用上面方案，也面临一些问题：

动画播放由原来Activity级别降成View级别，Activity的动画是Window（窗口）级别的，系统对Activity动画播放原理上是通过矩阵变换并且是通过WindowManager所在进程执行，而改成View后切换动画则是通过本进程不断的重绘View自身来实现，效率上会降低。  

在播放动画过程中，如果主线程刚好执行到此前通过定时器分发过来的一些较为耗时的任务，会导致动画丢帧，针对该问题，我们有自己的线程池及Handler消息队列管理，在播放过程中暂停Handler的消息派发及降低线程池内其他线程的优先级来解决。  

会有部分低端机器因GPU性能过差导致播放动画卡顿。

实际上，我们经过对的对国外优秀app一些研究成果注意到，国外的一些较高大上的公司的产品如google的环聊，facebook的messenger，均采用类似的方案，权衡利弊后，最后采用的是该方案。

优化结果

从测试同学反馈的测试数据来看，提升幅度是较为明显的，首次打开会话提升约10%-15%，非首次打开提升约50%-70%。虽然弊端是仍然存在在某些场合及机型下进入会话动画不够流畅问题，但对大多数机型上的体验来说，带来的提升是较大的。

至此我们第一阶段的优化到此为止。下一篇，我们将进入本地数据存取优化，请见《移动端IM实践：Android版微信如何大幅提升交互性能（二）》。

全站即时通讯技术资料分类

[1] 网络编程基础资料：
《TCP/IP详解 - 第11章·UDP：用户数据报协议》
《TCP/IP详解 - 第17章·TCP：传输控制协议》
《TCP/IP详解 - 第18章·TCP连接的建立与终止》
《TCP/IP详解 - 第21章·TCP的超时与重传》
《理论经典：TCP协议的3次握手与4次挥手过程详解》
《理论联系实际：Wireshark抓包分析TCP 3次握手、4次挥手过程》
《计算机网络通讯协议关系图（中文珍藏版）》
《NAT详解：基本原理、穿越技术(P2P打洞)、端口老化等》
《UDP中一个包的大小最大能多大？》
《Java新一代网络编程模型AIO原理及Linux系统AIO介绍》
《NIO框架入门(三)：iOS与MINA2、Netty4的跨平台UDP双向通信实战》
《NIO框架入门(四)：Android与MINA2、Netty4的跨平台UDP双向通信实战》
>> 更多同类文章 ……

[2] 有关IM/推送的通信格式、协议的选择：
《为什么QQ用的是UDP协议而不是TCP协议？》
《移动端即时通讯协议选择：UDP还是TCP？》
《如何选择即时通讯应用的数据传输格式》
《强列建议将Protobuf作为你的即时通讯应用数据传输格式》
《移动端IM开发需要面对的技术问题（含通信协议选择）》
《简述移动端IM开发的那些坑：架构设计、通信协议和客户端》
《理论联系实际：一套典型的IM通信协议设计详解》
《58到家实时消息系统的协议设计等技术实践分享》
>> 更多同类文章 ……

[3] 有关IM/推送的心跳保活处理：
《Android进程保活详解：一篇文章解决你的所有疑问》
《Android端消息推送总结：实现原理、心跳保活、遇到的问题等》
《为何基于TCP协议的移动端IM仍然需要心跳保活机制？》
《微信团队原创分享：Android版微信后台保活实战分享(进程保活篇)》
《微信团队原创分享：Android版微信后台保活实战分享(网络保活篇)》
《移动端IM实践：实现Android版微信的智能心跳机制》
《移动端IM实践：WhatsApp、Line、微信的心跳策略分析》
>> 更多同类文章 ……

[4] 有关WEB端即时通讯开发：
《新手入门贴：史上最全Web端即时通讯技术原理详解》
《Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE》
《SSE技术详解：一种全新的HTML5服务器推送事件技术》
《Comet技术详解：基于HTTP长连接的Web端实时通信技术》
《WebSocket详解（一）：初步认识WebSocket技术》
《socket.io实现消息推送的一点实践及思路》
>> 更多同类文章 ……

[5] 有关IM架构设计：
《浅谈IM系统的架构设计》
《简述移动端IM开发的那些坑：架构设计、通信协议和客户端》
《一套原创分布式即时通讯(IM)系统理论架构方案》
《从零到卓越：京东客服即时通讯系统的技术架构演进历程》
《蘑菇街即时通讯/IM服务器开发之架构选择》
《腾讯QQ1.4亿在线用户的技术挑战和架构演进之路PPT》
《微信技术总监谈架构：微信之道——大道至简(演讲全文)》
《如何解读《微信技术总监谈架构：微信之道——大道至简》》
《快速裂变：见证微信强大后台架构从0到1的演进历程（一）》
《17年的实践：腾讯海量产品的技术方法论》
>> 更多同类文章 ……

[6] 有关IM安全的文章：
《即时通讯安全篇（一）：正确地理解和使用Android端加密算法》
《即时通讯安全篇（二）：探讨组合加密算法在IM中的应用》
《即时通讯安全篇（三）：常用加解密算法与通讯安全讲解》
《即时通讯安全篇（四）：实例分析Android中密钥硬编码的风险》
《传输层安全协议SSL/TLS的Java平台实现简介和Demo演示》
《理论联系实际：一套典型的IM通信协议设计详解（含安全层设计）》
《微信新一代通信安全解决方案：基于TLS1.3的MMTLS详解》
《来自阿里OpenIM：打造安全可靠即时通讯服务的技术实践分享》
>> 更多同类文章 ……

[7] 有关实时音视频开发：
《即时通讯音视频开发（一）：视频编解码之理论概述》
《即时通讯音视频开发（二）：视频编解码之数字视频介绍》
《即时通讯音视频开发（三）：视频编解码之编码基础》
《即时通讯音视频开发（四）：视频编解码之预测技术介绍》
《即时通讯音视频开发（五）：认识主流视频编码技术H.264》
《即时通讯音视频开发（六）：如何开始音频编解码技术的学习》
《即时通讯音视频开发（七）：音频基础及编码原理入门》
《即时通讯音视频开发（八）：常见的实时语音通讯编码标准》
《即时通讯音视频开发（九）：实时语音通讯的回音及回音消除概述》
《即时通讯音视频开发（十）：实时语音通讯的回音消除技术详解》
《即时通讯音视频开发（十一）：实时语音通讯丢包补偿技术详解》
《即时通讯音视频开发（十二）：多人实时音视频聊天架构探讨》
《即时通讯音视频开发（十三）：实时视频编码H.264的特点与优势》
《即时通讯音视频开发（十四）：实时音视频数据传输协议介绍》
《即时通讯音视频开发（十五）：聊聊P2P与实时音视频的应用情况》
《即时通讯音视频开发（十六）：移动端实时音视频开发的几个建议》
《即时通讯音视频开发（十七）：视频编码H.264、V8的前世今生》
《简述开源实时音视频技术WebRTC的优缺点》
《良心分享：WebRTC 零基础开发者教程（中文）》
>> 更多同类文章 ……

[8] IM开发综合文章：
《移动端IM开发需要面对的技术问题》
《开发IM是自己设计协议用字节流好还是字符流好？》
《请问有人知道语音留言聊天的主流实现方式吗？》
《IM系统中如何保证消息的可靠投递（即QoS机制）》
《谈谈移动端 IM 开发中登录请求的优化》
《完全自已开发的IM该如何设计“失败重试”机制？》
《微信对网络影响的技术试验及分析（论文全文）》
《即时通讯系统的原理、技术和应用（技术论文）》
《开源IM工程“蘑菇街TeamTalk”的现状：一场有始无终的开源秀》
>> 更多同类文章 ……

[9] 开源移动端IM技术框架资料：
《开源移动端IM技术框架MobileIMSDK：快速入门》
《开源移动端IM技术框架MobileIMSDK：常见问题解答》
《开源移动端IM技术框架MobileIMSDK：压力测试报告》
《开源移动端IM技术框架MobileIMSDK：Android版Demo使用帮助》
《开源移动端IM技术框架MobileIMSDK：Java版Demo使用帮助》
《开源移动端IM技术框架MobileIMSDK：iOS版Demo使用帮助》
《开源移动端IM技术框架MobileIMSDK：Android客户端开发指南》
《开源移动端IM技术框架MobileIMSDK：Java客户端开发指南》
《开源移动端IM技术框架MobileIMSDK：iOS客户端开发指南》
《开源移动端IM技术框架MobileIMSDK：Server端开发指南》
>> 更多同类文章 ……

[10] 有关推送技术的文章：
《iOS的推送服务APNs详解：设计思路、技术原理及缺陷等》
《Android端消息推送总结：实现原理、心跳保活、遇到的问题等》
《扫盲贴：认识MQTT通信协议》
《一个基于MQTT通信协议的完整Android推送Demo》
《求教android消息推送：GCM、XMPP、MQTT三种方案的优劣》
《移动端实时消息推送技术浅析》
《扫盲贴：浅谈iOS和Android后台实时消息推送的原理和区别》
《绝对干货：基于Netty实现海量接入的推送服务技术要点》
《移动端IM实践：谷歌消息推送服务(GCM)研究（来自微信）》
《为何微信、QQ这样的IM工具不使用GCM服务推送消息？》
>> 更多同类文章 ……

[11] 更多即时通讯技术好文分类：
http://www.52im.net/forum.php?mod=collection&op=all

附录：有关QQ、微信的文章汇总

[1] 有关QQ、微信的技术文章：
《微信后台团队：微信后台异步消息队列的优化升级实践分享》
《微信团队原创分享：微信客户端SQLite数据库损坏修复实践》
《腾讯原创分享(一)：如何大幅提升移动网络下手机QQ的图片传输速度和成功率》
《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（下篇）》
《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（上篇）》
《微信Mars：微信内部正在使用的网络层封装库，即将开源》
《如约而至：微信自用的移动端IM网络层跨平台组件库Mars已正式开源》
《开源libco库：单机千万连接、支撑微信8亿用户的后台框架基石 [源码下载]》
《微信新一代通信安全解决方案：基于TLS1.3的MMTLS详解》
《微信团队原创分享：Android版微信后台保活实战分享(进程保活篇)》
《微信团队原创分享：Android版微信后台保活实战分享(网络保活篇)》
《Android版微信从300KB到30MB的技术演进(PPT讲稿) [附件下载]》
《微信团队原创分享：Android版微信从300KB到30MB的技术演进》
《微信技术总监谈架构：微信之道——大道至简(演讲全文)》
《微信技术总监谈架构：微信之道——大道至简(PPT讲稿) [附件下载]》
《如何解读《微信技术总监谈架构：微信之道——大道至简》》
《微信海量用户背后的后台系统存储架构(视频+PPT) [附件下载]》
《微信异步化改造实践：8亿月活、单机千万连接背后的后台解决方案》
《微信朋友圈海量技术之道PPT [附件下载]》
《微信对网络影响的技术试验及分析（论文全文）》
《一份微信后台技术架构的总结性笔记》
《架构之道：3个程序员成就微信朋友圈日均10亿发布量[有视频]》
《快速裂变：见证微信强大后台架构从0到1的演进历程（一）》
《快速裂变：见证微信强大后台架构从0到1的演进历程（二）》
《微信团队原创分享：Android内存泄漏监控和优化技巧总结》
《全面总结iOS版微信升级iOS9遇到的各种“坑”》
《微信团队原创资源混淆工具：让你的APK立减1M》
《微信团队原创Android资源混淆工具：AndResGuard [有源码]》
《Android版微信安装包“减肥”实战记录》
《iOS版微信安装包“减肥”实战记录》
《移动端IM实践：iOS版微信界面卡顿监测方案》
《微信“红包照片”背后的技术难题》
《移动端IM实践：iOS版微信小视频功能技术方案实录》
《移动端IM实践：Android版微信如何大幅提升交互性能（一）》
《移动端IM实践：Android版微信如何大幅提升交互性能（二）》
《移动端IM实践：实现Android版微信的智能心跳机制》
《移动端IM实践：WhatsApp、Line、微信的心跳策略分析》
《移动端IM实践：谷歌消息推送服务(GCM)研究（来自微信）》
《移动端IM实践：iOS版微信的多设备字体适配方案探讨》
>> 更多同类文章 ……

[2] 有关QQ、微信的技术故事：
《技术往事：创业初期的腾讯——16年前的冬天，谁动了马化腾的代码》
《技术往事：史上最全QQ图标变迁过程，追寻IM巨人的演进历史》
《开发往事：深度讲述2010到2015，微信一路风雨的背后》
《开发往事：微信千年不变的那张闪屏图片的由来》
《开发往事：记录微信3.0版背后的故事（距微信1.0发布9个月时）》
《一个微信实习生自述：我眼中的微信开发团队》
>> 更多同类文章 ……

真没想到我不喜欢使用的Fragment居然能起到提升性能的作用

非常有用，十分感谢！

写得非常好，真的涨知识了

主界面是在这种结构，其他界面呢，也是Fragment 替代Activity 吗？单聊和群聊界面UI是怎么设计呢

引用：佐边 发表于 2018-11-01 14:32
主界面是在这种结构，其他界面呢，也是Fragment 替代Activity 吗？单聊和群聊界面UI是怎么设计呢

先做出来再说，基本版本有了之后，再来纠结优化问题