使用APICloud开发app的性能提升实践

简介: 为什么说这个问题?首先我是一名前端开发者,使用过的开发方式有,APICloud、原生开发、自己混合打包开发。这些都是根据不同的业务需求,用不同的开发方式,有的只需要安卓开发的需求,有需要安卓和iOS开发的需求,还有一些要h5和安卓等等。根据这些就做了相应的研究。

一、为什么说这个问题?
首先我是一名前端开发者,使用过的开发方式有,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>

安卓原生截图
image.png

(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>

image.png

性能分析

(1)安卓应用运行
image.png

image.png

(2)APICloud应用
image.png

image.png

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

debug编译速度

(1)原生安卓
image.png

https://www.bilibili.com/video/BV1vR4y1u7jv/?aid=337906041&cid=477044736&page=1

(2)APICloud
image.png

https://www.bilibili.com/video/BV1QL4y1t7SV/?aid=850479526&cid=477045241&page=1

渲染效率

上面案例是用的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性能的开发技巧

  1. 减少页面外链脚本文件的数量将会提高页面性能
  2. 使用无阻塞加载类库
  3. HTML集合优化(集合转数组,缓存集合length,访问集合元素时使用局部变量(即将重复的集合访问缓存到局部变量中,用局部变量来操作))
  4. 算法和流程控制(循环中减少属性查找并反转,使用Duff装置来优化循环,基于函数的迭代,通常情况下switch总比if-else快,但是不是最佳方案)
  5. 快速响应的用户界面(优化算法减少代码)

四、平台选择

从性能上看APICloud的AVM 的开发和原生开发比较体验和编译速度,性能表现都非常好,这样我们面对不同的需求上面就可能多了一个选择,毕竟APICloud简单一些,原生复杂一些。有一些地图原生必须用原生开发的我们不可避免的就只能用原生的开发方式了,例如我们做的项目中用到的超图的地图,有一些三维的不好表达的可以用原生去避免用别的框架碰到的bug。或者有一些项目需求比较简单,但是设计到多平台了,可以选择APICloud,毕竟是一次编译可以多端运行。

目录
相关文章
|
28天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
423 7
|
28天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
482 1
|
5天前
|
数据采集 网络协议 算法
移动端弱网优化专题(十四):携程APP移动网络优化实践(弱网识别篇)
本文从方案设计、代码开发到技术落地,详尽的分享了携程在移动端弱网识别方面的实践经验,如果你也有类似需求,这篇文章会是一个不错的实操指南。
16 1
|
14天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
28天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
63 9
|
11天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
|
21天前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。
|
28天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
290 0
app开发的一些思路
<p><br></p> <p><br></p> <p></p> <h3 style="margin:0px; padding:0px; border:0px; vertical-align:baseline; clear:both; font-weight:normal; list-style:none; color:rgb(102,102,102); font-family:宋体;
2922 0
x3d
小型app开发的思路
前提: 1. 性能不是最重要; 2. 人手少; 3. 速度要快;   结论: 1. 混合式 2. 减少app的复杂程度 3. 追求性能   (博客,尽量让自己每天写一点,短一点都可以)
x3d
559 0

热门文章

最新文章