关于apicloud:使用APICloud开发app的性能提升实践

一、为什么说这个问题？
首先我是一名前端开发者，应用过的开发方式有，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）原生安卓

https://www.bilibili.com/vide...

（2）APICloud

https://www.bilibili.com/vide...

渲染效率

下面案例是用的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，毕竟是一次编译能够多端运行。