JS UI框架下，List组件运行时的内存优化-51CTO.COM

每种编程语言都有它的内存管理机制，不同设备上可用内存不同，分配给JS引擎可用的内存范围也不同。例如运行内存在128MB以下的轻量设备，对应JS引擎的可用内存范围为48 64KB。本文也将以此类设备为例进行分析。

当整个页面渲染比较复杂时，JS运行内存峰值就可能会超过JS引擎分配到的最大可用内存，导致页面无法渲染。

List组件是JS UI框架下最基本的容器组件之一，提供了一系列相同宽度的列表项。在应用开发过程中，经常会使用List容器组件来呈现大量的数据。所以，在List组件应用的开发过程中，开发者应充分考虑内存优化问题。

本期，我们将通过List组件开发一个通讯录页面，并采用list+for的方案对整个页面进行优化，达到减小JS运行内存的目的。

一、代码实现

如下所示，是一张简单的通讯录页面，包含了姓名、电话及对应图片。下面将通过两种实现方式来对比代码性能。

图1 简单的通讯录页面

方法一：直接书写对应的组件页面

使用HML直接撰写整个组件页面的内容，代码如下：

<div class="container"> 
    <list class="list"> 
        <list-item class="list-item"> 
            <image class="image" src="/common/1.png"></image> 
            <div class="info"> 
                <text class="text">张三</text> 
                <marquee class="detail">电话:+86 130XXXXXXXX</marquee> 
            </div> 
        </list-item> 
        <list-item class="list-item"> 
            <image class="image" src="/common/1.png"></image> 
            <div class="info"> 
                <text class="text">李四</text> 
                <marquee class="detail">电话:027-6128XXXX</marquee> 
            </div> 
        </list-item> 
        <list-item class="list-item"> 
            <image class="image" src="/common/1.png"></image> 
            <div class="info"> 
                <text class="text">王五</text> 
                <marquee class="detail">电话:+86 150xxxxxx</marquee> 
            </div> 
        </list-item> 
        <list-item class="list-item"> 
            <image class="image" src="/common/1.png"></image> 
            <div class="info"> 
                <text class="text">小明</text> 
                <marquee class="detail">电话:+86 130XXXXXXXX</marquee> 
            </div> 
        </list-item> 
        <list-item class="list-item"> 
            <image class="image" src="/common/2.png"></image> 
            <div class="info"> 
                <text class="text">小红</text> 
                <marquee class="detail">电话:+86 180XXXX </marquee> 
            </div> 
        </list-item> 
        ... 
    </list> 
    <input value="非for" on:click="changeNextPage" class="button"></input> 
</div> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

方法二：通过for指令来书写对应的组件页面

针对方法一中的实现，采用for指令来改进，使对应页面更简洁，对应修改后代码如下：

<div class="container"> 
    <list class="list" on:scrollend="changeNextPage"> 
        <list-item class="list-item" for = "{{listData}}"> 
            <image class = "image" src = "/common/{{$item.src}}"></image> 
            <div class = "info"> 
                <text class="text">{{$item.name}}</text> 
                <marquee class = "detail">电话: {{$item.phone}}</marquee> 
            </div> 
        </list-item> 
    </list> 
</div> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

对应的for指令的渲染数组代码如下：

export default { 
    data: { 
        listData:[] 
    }, 
    onInit() { 
        for (var i = 0; i < 10; i++) { 
            this.listData.push({'name':'张三', src :'1.png', phone:"+86 130XXXXXX"}); 
            this.listData.push({'name':'李四', src :'2.png', phone:"027-6128XXXX"}); 
            this.listData.push({'name':'王五', src :'1.png', phone:"+ 86 150XXXXXX"}); 
            this.listData.push({'name':'小明', src :'1.png', phone:'+86 130XXXXXX'}); 
            this.listData.push({'name':'小红', src :'2.png', phone:'+86 180XXXX'}); 
        } 
    } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.