*本文由 APICloud 开发者沐瑶派投稿
一、为什么说这个问题？首先我是一名前端开发者，使用过的开发方式有，APICloud、原生开发、自己混合打包开发。这些都是根据不同的业务需求，用不同的开发方式，有的只需要安卓开发的需求，有需要安卓和 iOS 开发的需求，还有一些要 h5 和安卓等等。根据这些就做了相应的研究。
二、性能分析
两个平台上代码,安卓原生代码。本次测试所用机型是 XiaoMi Redmi K30
(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 使得人眼感知的是连续线性的运动，这其实是归功于运动模糊的效果。犹豫近两年的手机性能的提升，渲染效率现在人眼已经分辨不出来了。
以上代码码云地址：https://gitee.com/czsc/cdshi
三、app 的过程中发现的一些提升 app 性能的开发技巧
减少页面外链脚本文件的数量将会提高页面性能
使用无阻塞加载类库
HTML 集合优化（集合转数组，缓存集合 length，访问集合元素时使用局部变量（即将重复的集合访问缓存到局部变量中，用局部变量来操作））
算法和流程控制（循环中减少属性查找并反转，使用 Duff 装置来优化循环，基于函数的迭代，通常情况下 switch 总比 if-else 快，但是不是最佳方案）
快速响应的用户界面（优化算法减少代码）
四、平台选择
从性能上看 APICloud 的 AVM 的开发和原生开发比较体验和编译速度，性能表现都非常好，这样我们面对不同的需求上面就可能多了一个选择，毕竟 APICloud 简单一些，原生复杂一些。有一些地图原生必须用原生开发的我们不可避免的就只能用原生的开发方式了，例如我们做的项目中用到的超图的地图，有一些三维的不好表达的可以用原生去避免用别的框架碰到的 bug。或者有一些项目需求比较简单，但是设计到多平台了，可以选择 APICloud，毕竟是一次编译可以多端运行。
评论