APICloud多端开发框架AVM性能对比分析

APICloud于2020年推出AVM多端开发框架，历经一年多敏态迭代，以及大量开发者使用，已逐渐成为业内较为成熟的多端开发框架之一，在帮助众多开发者实现高性能开发的同时，不少用户也在分享他们的使用心得与体验分析。

本文梳理了两位AVM开发者的测评分享，望帮助更多开发者加深对多端开发技术的了解，基于工作所需有效选择。

01

原生代码和APICloud代码性能对比分析

通过对原生代码和AVM代码的对比分析，来验证多端开发与原生开发的性能差别。

(1)安卓代码

MainActivity.java

package com.example.demo2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    List<String> list;
    List<String> list1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ListView listView = (ListView) this.findViewById(R.id.listView);
        //名字列表，之后可以动态加入数据即可，这里只是数据例子
        list = new ArrayList<>();
        for(int i = 0; i < 1000; i++){
            list.add("小明");
        }

        list1 = new ArrayList<>();
        for(int i = 0; i < 1000; i++){
            list1.add("18");
        }

        List<HashMap<String, Object>> data = new ArrayList<HashMap<String,Object>>();
        for(int i = 0; i < list .size(); i++){
            HashMap<String, Object> item = new HashMap<String, Object>();
            item.put("name", list.get(i));
            item.put("sex", list1.get(i));
            data.add(item);
        }

        //创建SimpleAdapter适配器将数据绑定到item显示控件上
        SimpleAdapter adapter = new SimpleAdapter(MainActivity.this, data, R.layout.item,
                new String[]{"name", "sex"}, new int[]{R.id.name, R.id.sex});
        //实现列表的显示
        listView.setAdapter(adapter);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <!-- 标题 -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="130dp"
            android:layout_height="wrap_content"
            android:text="姓名"
            />

        <TextView
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:text="年龄"
            />

    </LinearLayout>
    <!-- ListView控件 -->
    <ListView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/listView"
        />
</LinearLayout>

item.xml

<?xml version="1.0" encoding="utf-8"?>
<!--item -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!--姓名 -->
    <TextView
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:id="@+id/name"
        />
    <!-- 年龄-->
    <TextView
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:id="@+id/sex"
        />
</LinearLayout>

安卓原生截图

（2）APICloud 代码

<template name='tpl'>
    <view class="page">
        <safe-area class="header" @click="handleClick()">
            <text class="header__title">APICloud</text>
        </safe-area>
        <scroll-view class="main">
            <view class="item" v-for="item in list">
                <text class="item__text">{{item.name}}: {{item.value}}</text>
            </view>
        </scroll-view>
    </view>
</template>
<script>
export default {
    name: "tpl",
    apiready() {
        api.setStatusBarStyle({
            style: "light",
            color:"-"
        });
        this.list2()
    },
    data() {
        return {
            list:[],
            text: "Hello APICloud",
            year: new Date().getFullYear()
        };
    },
    computed: {
        
    },
    methods: {
        list2() {
            var list=[]
            for(var i = 0; i < 1000; i++){
                var data ={
                    name:"小明",
                    value:"18"
                }
                list.push(data)
            }
            this.list = list
        },
        handleClick(e) {
            console.log(this.list)
            api.toast({
                msg: this.data.text,
                location:"middle"
            });
        }
    }
};
</script>
<style>
.page {
    height: 100%;
    background-color: white;
}
.header {
    background: #81a9c3;
    justify-content: center;
    align-items: center;
}
.header__title {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
}

.main {
    flex: 1;
    padding: 15px;
}

.h1 {
    font-size: 24px;
}

.item {
    flex-direction: row;
    padding: 10px 0;
}
.item__text {
    color: #333;
    white-space: nowrap;
}

.item__value {
    margin-left: 5px;
}

.footer {
    background: #81a9c3;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.footer__text {
    color: #fff;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
}
</style>

性能分析

（1）安卓应用运行

（2）APICloud 应用

我们直接 adb shell 进入设备后，使用 top 命令来观察 app 进程情况，可以看到，虚拟内存方面，APICloud 占用的内存更小一些，CPU 使用率是一致的 10%，实际内存 APICloud 使用的的更多一些。

debug 编译速度

（1）原生安卓

（2）APICloud

渲染效率

上面案例是用的 APICloud 推出的 JavaScript 跨平台开发框架 avm.js，其升级后的 App 引擎不依赖 WebView，提供百分百的原生渲染，可以帮助开发者提升渲染的效率和效果，同时还支持组件化开发，提供可靠的后端支持。此外 AVM .js 与 Vue 语法类似，并兼容 React JSX，APICloud 官网还提供了大量的案例和教程，更适合开发者快速使用。由于不是用的 webview 所以效率也提升的和原生的差别不大。Android 的渲染机制，我们要知道 Android 系统每隔 16ms 就重新绘制一次 Activity，16ms 意味着 1000/60hz，相当于 60fps。这是因为人眼与大脑之间的协作无法感知超过 60fps 的画面更新。12fps 大概类似手动快速翻动书籍的帧率， 这明显是可以感知到不够顺滑的。24fps 使得人眼感知的是连续线性的运动，这其实是归功于运动模糊的效果。近两年的手机性能的提升，渲染效率现在人眼已经分辨不出来了。

以上代码可点击此处查看。

总结

APICloud 的 AVM 开发和原生开发比较，性能表现都非常好，面对不同的需求就可能多了一个选择，APICloud 相对简单一些，原生复杂一些。对于必须用原生开发的，例如做的项目中用到超图的地图，有一些三维的不好表达的可以用原生，避免用别的框架碰到其他bug。

注明：本章节转载自APICloud 用户沐瑶派，文字略有修改

02

APICloud 和其他框架的性能分析

本章节对行业内较为主流的RN、Flutter、Ionic、NativeScript以及AVM进行性能对比，测评形式为编写了一个简单的超长的 viewlist，实现一个1000行的图文列表。

代码可点击此处查看。

（1）RN 效果：

（2）Flutter 效果：

（3) Ionic 效果：

(4) NativeScript 效果

这里NativeScript 开发体验最烂，后边会在 API 分析部分细说.

(5) AVM 下的效果：

代码实现很简单，也没有做特殊优化，没有滚动加载，没有交互事件，直接1000条数据搞满，使用的都是官方 list 组件。

性能分析

性能我们直接 adb shell 进入设备后，使用 top命令来观察 app 进程情况：

其中帧数我们用android的开发者功能，GPU截图来标识，编译速度直接用 time 命令统计, 均采用第一次debug启动耗时的时间。

比如：

time ns debug android

总结

简单分析一下，首先是内存占用，基本都是100MB 以上，RN 和 Flutter 最多，AVM最少。然后是 CPU 占比，一直下拉 list，看 CPU占用率，其中RN 是最高的，但是它的 fps 却很低，这说明 cpu 占用率越高说明计算越多，但是 fps 底说明没有卡顿，性能更好。

看 Ionic 的 cpu 占用只有 RN 的一半，但是 fps 却特别高，有很明显卡顿。所以可以说 RN 的性能比 webview 渲染的 Ionic 要好很多，包括 NativeScript 和 AVM 也是这个道理，cpu 占比越高，而 fps 越底，那么性能就越好，可是cpu占用高也有个问题就是会比较费电…

最后再看编译时间，这关系到调试体验，这里面AVM 最快，基本是毫秒级同步到真机，其他基本都是秒级的，需要跑build。当然 Expo 和 AVM 都是有前置 Loader的，所以肯定比没有 loader 程序的快一些。

注明：本章节转载自知乎用户小爝，文字略有修改

AVM框架的高性能体验逐渐显现实力，为APICloud平台的160万＋开发者提供成熟可靠的技术支撑，已成为国内主流的多端开发框架之一。