记一次flutter应用卡顿解决过程
前一段时间准备接手维护公司一个flutter的k线组件，目前该组件在Android上稳定运行。iOS还没接入，于是自己尝试做了demo体验一下flutter在iOS上的表现如何。刚开始一切顺利，然后就出现了卡顿的问题。
问题表现：
1.当出现网络请求的时候，整个flutter的界面会卡死，得等到网络请求有响应界面才恢复。正常情况下是有一个flutter的加载进度框，一直在转圈显示加载中，如果出现问题，整个页面卡死。
2.出现概率：频率很低，不是每次出现，某些网络条件下出现，并且在有问题的网络条件下出现之后，可能过一会就消失。也可能一直存在，导致每次网络加载数据都卡住。
3.仅在iOS出现，Android工作正常。
解决过程：
1.怀疑弱网环境下出现，或者我的网络请求响应数据过多(大量的k线数据)，导致json解析太慢，引起主线程阻塞了。这里看了一下flutter的线程模型
-
我首先把服务器返回数据减少,问题依然存在。（服务器是我自己部署的，https用的let encrypt证书，图方便用acme.sh脚本自动更新证书，用来给demo响应数据的）
-
使用charles模拟弱网环境降低网速，问题依然存在
-
采用isolate来封装网络请求，问题解决，但是偶尔出现第一次请求很慢情况，整体页面不卡住了，加载框能正常显示动画。
这里说下isolate，虽然用isolate解决了问题，但是如果我们真的去使用isolate会发现很多问题，首先flutter中的isolate虽然概念上是线程，但是他和每个isolate之间的内存空间是独立的。假设我创建个isolate叫做requestIsolate，那么我要用requestIsolate去发送一个http请求，必须在新创建的requestIsolate里面初始化一个httpclient，还有把一系列参数从主线程传到requestIsolate中，而isolate的通信只能通过message，message只能是基础类型[string，int，float]这些个数据类型。这导致了isolate的使用场景大大减少。
比如你觉得json对象反序列化很耗时，你想放到单独的isolate中解析。对不起，不行。因为你要放到isolate里面你需要把json string传给isolate， isolate反序列化好之后变成一个dart对象。但是这个dart对象又不能传回主isolate，因为message只能传基础数据类型。所以GG
2.虽然上面使用isolate让flutter不会卡死了，但是还没有结束。
用dart devtool分析卡顿情况：
image.png
可以看到基本上每一帧都在卡顿，而且中间有一段时间啥也没做。看看具体方法
image.png
Performance显示在发起网络请求ssl_handshake的时候，卡在了CertifaicateVerificationCallback里面。大概率是网络问题。用Wireshark简单抓包看了下，然后跑去温习一下tls握手相关的知识：
image.png
在tls在建立链接的时候是上面这个过程，简单来说由客户端发起 clienthello,然后服务端响应，然后下发证书。下发证书之后客户端要验证证书是否有效，比如是否过期之类，在客户端验证证书的过程中出现了阻塞主线程的情况，导致整个应用卡住。
找到问题大概放心后，去github issue搜索也在dart issue里找到了相似的问题，原来也有人遇到了相同的问题。
https://github.com/dart-lang/sdk/issues/41519
整个原因就是let encrypt的ocsp服务被墙掉了，导致证书校验过程非常长，或者失败，按道理这个校验不应该卡住应用程序，不过从上面的issue可以看到，应该是没用使用异步处理，导致整个主线程被卡住，属于http库里的一个bug。
关于客户端证书认证的文章可以看看：
https://www.anquanke.com/post/id/183339
解决方案：
对于采用了https的服务来说，tls是会对客户端造成额外的开销的，如果通过ocsp协议进行校验是handshake阶段在线校验的，比如let encrypt的校验地址是：https://ocsp.int-x3.letsencrypt.org ，这个地址被墙掉，就会导致校验失败，或者很慢的情况。 如果服务器开启ocsp stampling服务的话，这个校验过程可以由服务端进行校验，然后直接把结果和证书一起下发给客户端。客户端就省去了这个校验工作，服务端校验有很多好处，比如nginx可以把证书校验结果在一定有效期内缓存下来，这样能大大减少证书校验时间。
参考下列两个issue的解决办法：
https://github.com/flutterchina/dio/issues/786
https://github.com/dart-lang/sdk/issues/41519
1.换证书 2.开启ocsp proxy
收获：
这个问题困扰了我好多天，有空的时候我就去尝试解决，不过一开始思路错了，都以为是是flutter异步任务太重或者代码有问题，在往优化的方向努力，原来还是网络请求有问题。作为客户端开发一般发现客户端主线程卡死，很少会考虑到是后端问题，如果服务响应过慢应该是只会让加载时间变长而不应该造成整个应用卡死主线称阻塞才对。造成了整个解决过程都没想到是网络服务的问题。整个过程还是学习到了很多知识。
1.掌握flutter性能监控工具的使用
2.掌握flutter线程模型和isolate的原理和工作方式
3.学习到了tls握手的整个过程，和ocsp的工作方式，nginx配置ocsp的方式
4.为网络优化学到了1个新技能，服务器端开启ocsp代理,可以大大减少tls证书认证时间。
参考：
浏览器如何验证证书是否正确？
https://www.zhihu.com/question/37370216
https://zhuanlan.zhihu.com/p/25587986
OCSP stapling:
https://zh.wikipedia.org/wiki/OCSP%E8%A3%85%E8%AE%A2
TLS 握手优化详解
网友评论