当前位置: 首页 > 科技观察

JS UI框架下,List组件运行时的内存优化

时间:2023-03-21 23:06:37 科技观察

JSUI框架下,List组件在运行时的内存优化不同设备的内存管理机制,不同设备上可用内存不同,分配给JS引擎的可用内存范围也不同。例如,对于运行内存在128MB以下的轻量级设备,对应的JS引擎可用内存范围为48-64KB。本文也将以此类设备为例进行分析。当整个页面渲染复杂时,JS运行内存的峰值可能会超过JS引擎分配的最大可用内存,导致页面渲染失败。List组件是JSUI框架下最基础的容器组件之一,提供一系列等宽的列表项。在应用开发过程中,经常会使用List容器组件来呈现大量的数据。因此,开发者在开发List组件应用时,应充分考虑内存优化问题。本期我们将通过List组件开发一个通讯录页面,使用list+for方案对整个页面进行优化,减少JS运行内存。1、代码实现如下,是一个简单的通讯录页面,包括姓名、电话号码和对应的图片。下面将通过两种实现方式对比代码性能。图1简易通讯录页面方法一:直接写对应的组件页面使用HML直接写整个组件页面的内容,代码如下:张三电话:+86130XXXXXXXX

李四电话:027-6128XXXX
王吴电话:+86150xxxxxx
小明电话:+86130XXXXXXXX
小红电话:+86180XXXX...方法二:通过for命令编写相应的组件页面针对方法一的实现,使用for命令完善相应的页面,使相应的页面更加简洁。相应的修改代码如下:{{$item.name}}电话:{{$item.phone}}对应for命令的渲染数组代码如下:exportdefault{data:{listData:[]},onInit(){for(vari=0;i<10;i++){this.listData.push({'name':'张三',src:'1.png',phone:"+86130XXXXXX"});this.listData.push({'name':'丽丝',src:'2.png',phone:"027-6128XXXX"});this.listData.push({'name':'王舞',src:'1.png',phone:"+86150XXXXXX"});this.listData.push({'name':'小明',src:'1.png',phone:'+86130XXXXXX'});this.listData.push({'name':'小明'红',src:'2.png',phone:'+86180XXXX'});}}}2.性能测试这里我们针对不同的item数量测试了上述两种实现的JS运行性能。JS的运行内存和JS运行内存的峰值如下图所示:图2从上表的测试数据可以看出两种方法的内存占用情况。方法二渲染,JS运行内存会波动很大,但是使用方法一,对应的JS运行内存基本保持不变。这种差异是由两种不同的页面加载和呈现机制造成的。方式一的加载机制:一次性加载整个页面,加载完成后释放List组件页面占用的JS运行内存。后续页面滑动不会触发组件的解析,所以不会影响JS运行时内存数据。方式二的加载机制:每次滑动屏幕,都会加载当前显示页面上的item和缓存的部分,回收屏幕外item占用的JS内存资源。当List组件页面向下滑动到新item时,会重新创建request。这样的话,滑动性能会降低一部分,但是可以实现按需加载,可以降低JS运行内存的峰值。3、优缺点对比方法一的优缺点:优点:第一个页面显示成功后,JS运行内存比较稳定,不会出现后续滑动崩溃,稳定后JS运行内存占用显示器小。缺点:由于页面会一次性全部解析,当解析比较复杂的页面时,会对JS运行内存的峰值造成很大的压力,甚至会导致对应的页面无法启动。方法二的优缺点:优点:页面启动时只加载显示部分,可以减少页面启动时的JS运行内存。由于整个页面始终只不停地渲染显示界面的元素。因此,对于稍微复杂一点的接口,与方法一相比,JS运行内存的峰值更小。缺点:需要通过$item访问List组件的内容。当item显示时,会创建对应的数据监控对象,检测数据的变化。比如在上面的界面中,一个item会创建3个数据监控对象,列表中绘制的item的个数为5,所以会创建15个数据监控,从而增加了15*200B的数据监控开销(单字节)=3000B。随着列表组件的向下滑动,数组监视器占用的内存会增加,从而增加相应的JS运行内存。所以使用第二种方式,JS运行内存会一直增加,直到渲染完最后一个item。4.使用建议鉴于以上性能,我们总结出以下使用场景供开发者参考:图3使用建议总之,使用方法2开发List组件可以降低JS运行时内存的峰值,但它会增加JS运行时内存。当页面比较简单,item个数小于20时,推荐使用方法一。当页面item个数超过20个,或者页面占用JS内存峰值比较大时,推荐使用方法二,更多信息请访问:Harmonyos.51cto.com,与华为官方合作搭建的鸿蒙技术社区