JS UI框架下，List組件運行時的內存優化

作者：tongshijia 2021-10-14 09:53:38

開發

List組件是JS UI框架下最基本的容器組件之一，提供了一系列相同寬度的列表項。在應用開發過程中，經常會使用List容器組件來呈現大量的數據。

[[428756]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.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>

方法二：通過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>

對應的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'}); 
        } 
    } 
}