Pura 70和12306的性能分析

哈喽，我是老刘

这两天经常刷到的一个短视频是在Pura70上用12306卡顿

首先我没钱买Pura70，没有实际测试，所以不敢说这种情况是不是真实存在
但是如果视频里的现象是真实的
我想站在一个程序员的角度分析一下可能的原因
不管最后的原因是什么，我们也能借此了解一下影响app性能的因素有哪些

1、CPU性能问题？

很多博主说是因为CPU不给力
我的第一反应是不信的
因为作为一个客户端开发，我非常清楚一个列表页的渲染，就是再复杂也不应该造成视频里那样的卡顿
所以我第一时间用我手头的红米k60试了一下，第二天的惠州到东莞
是非常流畅的

第二天我想了想，可能k60的cpu也不算差了，于是找来了妈妈的老年机

测试结果会略微比k60卡一点点，但是还算流程
所以因为CPU的性能造成卡顿肯定可以排除了
天玑800u都不卡的
当然，如果cpu在某些场景下有缺陷另说

2、网络问题？

有些人强行解释说是网络不好，还有说12306服务器当时访问量太大的
这个说法我觉得站不住脚
因为看到一个视频是四台手机同时刷新那个页面，其它手机没有卡顿现象

但是这个卡顿现象的一部分确实有可能和网络相关
因为视频中宣称卡顿的其实是两个问题，
第一个是页面加载的时间更长，第二个是内容加载出来后滑动卡顿
这里有必要解释一下整个页面的加载过程
我们在12306里面输入出发地和目的地点击查询后会打开车次的页面，这时其实程序做了以下一些事情
第一步，请求数据
车次页面打开后第一件事就去向服务器请求车次数据
这时页面会向用户展示loading，也就是那个一直转的圈
（抱歉手速慢，试了两次没截到图）

数据啥时候能回来，取决于网络传输速度
这一步Pura70应该是不慢的，因为从其它测评中能看到，Pura70的网络测速还可以
第二步，解码
服务端的数据返回回来后并不是马上就能用的
因为网络上传输的数据通常是经过了编码、加密、压缩等操作的
所以传输到手机端后还需要解码、解密、解压缩等操作
不确定12306用到了其中的哪些，但是这一步肯定是有的
第三步，页面内容展示
解码完成后按照一般的开发逻辑，我们会先关掉loading（就是那个转的圈）
然后开始渲染页面的内容，也就是各个车次的信息
这也就是为什么在一些比较老的手机上
会看到loading图标消失后先看到页面内容显示白色的什么都没有空白，然后才看到车次信息

那么如果网络传输速度并不慢，是什么造成了loading时间过长呢
问题的关键就在解码这一步
对于一个页面的车次信息来说，其实整体的数据量不算大
因此对这个量级的信息进行解码、解密等操作，属于计算密集型任务
主要考验的是cpu的计算能力，甚至是单核性能

当然，其实还有其它的可能性，也会影响解码速度
这和视频中的第二个问题有关，就是数据加载完成后的卡顿现象
所以我们来看第三点

3、客户端页面采用的技术

如果说前面的加载慢可能受网络影响，也可能是cpu解码速度不行
那么页面卡顿就一定和页面的实现方式有相关性
所以我们可以看一下12306在这个车次页面的一些细节

打开android手机的显示布局边界功能
可以看到12306页面只有标题栏这一小块有布局边界
这是一种典型的H5页面嵌入App的使用方式
由原生提供页面外壳，也就是标题栏和内容显示的部分
由H5页面填充具体的内容

当然如果具体内容是用Flutter这样的技术开发的，也会有类似的效果
但是这里面可以排除Flutter
一方面是因为如果用Flutter开发，不需要把标题栏用原生开发一遍，徒增烦恼
另一方面，我下载了一个12306的apk，没有在里面看到Flutter

好的，说回来，12306用了H5页面展示车次信息
也就是说展示具体内容的部分是一个WebView
这也解释了为什么在我老妈的老手机上会略微卡顿
而且，前面第二点说的loading慢，也可能和webview的性能不足或者bug有关
但是即使是Webview性能差一些
也不应该有视频中那样卡顿的情况

所以我有几种可能性的猜测，主要考虑webview上哪些地方可能出问题
第一种，麒麟9010这颗cpu对webview的兼容性不太好，比如某些底层指令有bug
第二种，鸿蒙系统的webview有bug，某些效果或者语句的执行会造成卡顿
我们知道鸿蒙的开发框架有些地方是依赖webview的，所以系统的webview有些特殊的修改可以理解
只是不知道这部分是否会对普通页面展示造成影响
第三种，12306采用定制的特殊的webview，和鸿蒙系统或者9010存在兼容问题
因为其它手机不卡，说明如果是定制的webview，也不存在普遍的bug

其实这几种可能性也是有一些方法去验证的
比如如果是cpu对webview的兼容有问题
那么找一个同样使用webview的app，去展示复杂页面，看会不会有卡顿问题
当然这里面的具体原因只能是遥遥领先和12306两方面的工程师去研究了

下面可以说一下解决方案

解决方案

前面说的都是针对问题的一些可能性的分析
由于条件限制，没办法定位具体的原因
但是解决这个问题不一定要定位到具体的原因
还是有一些规避方案的

如果真的是系统webview的问题，那么可以通过系统升级优化webview来解决
这个可能周期相对要长一点
不过很多手机刚发布的时候，推送升级都是比较频繁的
听说Pura70已经推送几个升级包了

另一方面，从12306的角度看有几种优化方案
1、把webview改为原生，这时最根本的提升性能的方案
2、保留webview，优化H5页面内的逻辑
比如把整个页面一次性加载出来改为分页加载或者懒加载
因为我们可以看到，当页面车次少的时候是不卡顿的，所以懒加载这样的方案应该也会规避问题

所以如果不出意外，两方对这个问题都比较重视的话
应该很快这个问题就看不到了
这就体现了App内嵌H5页面的最大的好处：
不需要客户端升级，就可以修改页面的一些内容逻辑，用户是感知不到的

总结

写这篇文章的目的不是黑或者洗白某款手机
而是站在一个客户端开发工程师的角度
借由这个问题，提供一下客户端性能问题的一些分析思路
大家学习思路就好
如果过两天人家官方出来说问题的原因和我们这篇文章分析的不一致，也很正常
好了，如果看到这里的同学有学习Flutter的兴趣，欢迎联系老刘，我们互相学习。
点击免费领老刘整理的《Flutter开发手册》，覆盖90%应用开发场景。
可以作为Flutter学习的知识地图。
覆盖90%开发场景的《Flutter开发手册》