uniapp vue 界面更新数据内存泄漏问题 OR 解决方案

uniapp vue 界面更新数据内存泄漏问题 OR 解决方案

检查出来内存泄漏原因

1. 由于各种原因公司物联网终端的项目选用uniapp作为设备终端的框架使用开发过程一切都很正常，走到测试阶段，其中运行时间 app 稳定性测试中，发现app在运行2-3天左右app就会崩溃，终端内存小，比较容易发现这个问题。发现问题后，开始使用android stadio profiler 进行内存监测，并使用adb 进行内存监测，发现内存每天都会增加20-30M定位到others。
2. 定位到others后开始排查uniapp 当前运行代码进行排查，进行小规模的代码修改进行测试，最后 在 dcloud 论坛 发现一个帖子 https://ask.dcloud.net.cn/question/147905 提到更新dom会影响内存上涨，开始怀疑这个问题，然后进行测试 具体测试内容为：

       <template>  
           <view class="content">  
               <image class="logo" src="/static/logo.png"></image>  
               <view class="text-area">  
                   <text class="title">{{title}} {{a}}</text>  
                   <text class="title">{{title}} {{b}}</text>  
                   <text class="title">{{title}} {{c}}</text>  
                   <text class="title">{{title}} {{d}}</text>  
                   <text class="title">{{title}} {{e}}</text>  
                   <text class="title">{{title}} {{f}}</text>  
                   <text class="title">{{title}} {{g}}</text>  
                   <text class="title">{{title}} {{h}}</text>  
                   <text class="title">{{title}} {{i}}</text>  
                   <text class="title">{{title}} {{j}}</text>  
                   <text class="title">{{title}} {{k}}</text>  
                   <text class="title">{{title}} {{l}}</text>  
                   <text class="title">{{title}} {{m}}</text>  
                   <text class="title">{{title}} {{n}}</text>  
                   <text class="title">{{title}} {{o}}</text>  
                   <text class="title">{{title}} {{p}}</text>  
                   <text class="title">{{title}} {{q}}</text>  
                   <text class="title">{{title}} {{r}}</text>  
                   <text class="title">{{title}} {{s}}</text>  
                   <text class="title">{{title}} {{t}}</text>  
                   <text class="title">{{title}} {{u}}</text>  
                   <text class="title">{{title}} {{v}}</text>  
                   <text class="title">{{title}} {{w}}</text>  
                   <text class="title">{{title}} {{x}}</text>  
                   <text class="title">{{title}} {{y}}</text>  
                   <text class="title">{{title}} {{z}}</text>  
               </view>  
           </view>  
       </template>  
   
       <script>  
           export default {  
               data() {  
                   return {  
                       title: 'Hello',  
   
                       a: 0,  
                       b: 0,  
                       c: 0,  
                       d: 0,  
                       e: 0,  
                       f: 0,  
                       g: 0,  
                       h: 0,  
                       i: 0,  
                       j: 0,  
                       k: 0,  
                       l: 0,  
                       m: 0,  
                       n: 0,  
                       o: 0,  
                       p: 0,  
                       q: 0,  
                       r: 0,  
                       s: 0,  
                       t: 0,  
                       u: 0,  
                       v: 0,  
                       w: 0,  
                       x: 0,  
                       y: 0,  
                       z: 0,  
                   }  
               },  
               onLoad() {  
                   setInterval(() => {  
                       this.a++  
                       this.b++  
                       this.c++  
                       this.d++  
                       this.e++  
                       this.f++  
                       this.g++  
                       this.h++  
                       this.i++  
                       this.j++  
                       this.k++  
                       this.l++  
                       this.m++  
                       this.n++  
                       this.o++  
                       this.p++  
                       this.q++  
                       this.r++  
                       this.s++  
                       this.t++  
                       this.u++  
                       this.v++  
                       this.w++  
                       this.x++  
                       this.y++  
                       this.z++  
                   }, 20)  
               },  
               methods: {  
   
               }  
           }  
       </script>
   

再次监听内存问题 发现内存一直跟之前的频率一样会慢慢上涨，无法被回收。

寻找解决问题方案

1. 找官方提bug，社交论坛提出bug，官方qq群寻求帮助，希望官方有人回复（一遍寻找解决方案，一遍等待官方解决）半个月依然没有回复
2. 寻找其他方案替代当前渲染模式，希望能解决渲染内存泄漏问题
   1. 换框架（成本高，而且有些功能开发难度太高）
   2. 使用webview 进行界面渲染
   3. 使用nvue

最终解决方案

1. 测试flutter渲染没有内存泄漏问题（但是时间成本太高）
2. 测试nvue大概测了一周左右（nvue没有明显上涨），nuve 底层采用weex渲染 others部分内存没有继续上涨（但是nvue 有一个很坑的点 由于我有一个使用原生插件的地方需要持续监听native 响应的值 导致的 Error: [JS Framework] Failed to receiveTasks, instance (12) is not available. 这个异常 后续 会更新这个报错的解决方案）
3. webview 没有具体测试

总结

1. uniapp 在cpu能力查的情况下卡顿明显，刚开始界面少的时候可能还不是很明显，下次选型要注意这个点；
2. 官方解决问题难（考虑到官方也不容易，每天提bug的那么多），不过还是希望对于这种非常严重的问题官方能够重视（毕竟几年前都有人提出这个问题了）；
3. 对于其他方案 uniapp 的能力还是很不错的，开发速度也很快，一般的项目都能扛住，但是对于物联网项目来说局限性还是太高了