使用APICloud开发App的性能优化探索——合理使用同步/异步接口

简介: 本文从同步/异步原理角度出发,介绍了App的优化方法,灵活使用这些方法,可以在开发App时给用户带来更好的使用体验。

本文从同步/异步原理角度出发,介绍了App的优化方法,灵活使用这些方法,可以在开发App时给用户带来更好的使用体验。
标准的JavaScript的执行分为同步和异步两种模式,APICloud的所有扩展API也同样支持同步或异步的调用,它们适用于不同的场景。
在浏览器引擎中,JavaScript引擎是单线程执行的,单线程意味着在同一时间内只能有一段代码被JavaScript引擎执行。所以JavaScript函数以一个接一个的栈方式执行,A函数如果依赖B函数的返回结果,那么A函数必须同步等待B函数返回的结果后才有执行机会。
JavaScript的同步模式符合开发人员通常的编码习惯,但性能问题也因此而起,当函数栈中某个函数的执行耗费时间过长时,将引起函数栈中后边的所有函数延迟执行,引发程序性能问题。这在移动端体验场景优先的场景下是无法接受的。
异步模式因此诞生。APICloud所有的扩展API在现有的JavaScript同步模式的基础上,引入了JavaScript CMD (Common Module Definition) 的模块化定义规范,API的调用遵循AMD(Asynchronous Module Definition)的异步方式加载,通过实现AMD规范下的JavaScript 异步加载模式,能够很好地解决性能问题。
APICloud的JavaScript异步编程模式可以总结为三个关键词:回调函数、事件监听和require。典型的代码使用如下:

    function readFile(){
        var fs = api.require('fs');
        fs.read({
            fd:'fileId'
        },printFile);
        console.log('readFile执行完毕....');
    }
    //回调函数
    function printFile(ret,err){
        if(ret.status){
            var text = ret.data;
            console.log('printFile内容:'+ text);
        }else{
            console.log(JSON.stringify(err));
        }
    }
</script>

当调用fs模块的read函数时,将进入对应原生Android和ios系统层操作,将在原生子线程中执行文件读取的操作。操作结束后,将回调JavaScript。这样做的好处在于,App不会因为读取文件大小,耗时不同而引起阻塞,如果此时设备正在进行UI渲染,将产生“卡顿”的问题,以上代码日志输出顺序为:

console.log('readFile执行完毕....');
//若干时长后,因文件大小而花费时长不一
console.log('printFile内容:'+ text);

异步的模式能够让App的逻辑功能与UI渲染很好地解耦,将耗时的操作放在多线程里执行,充分利用设备的硬件性能,使App更专注于渲染,提供更好的视觉效果及响应速度给用户。

在APP开发过程中,可以根据不同的操作场景,合理地将同步操作与异步操作相结合,编写出结构更合理、性能更出色、维护更方便的JavaScript代码。

APICloud扩展的API中,支持同步操作的api对象接口通过传入sync参数进行同步操作声明;支持同步操作的模块接口以Sync结尾。
(1)使用同步的接口获取App缓存大小,相关API调用方法的代码如下:

    function sycacheSize() {
        var size = api.getCacheSize({
            sync: true
        });
        alert('缓存大小为:' + size + '字节');
    }
    //异步调用
    function aycacheSize() {
        api.getCacheSize(function (ret) {
            var size = ret.size;
            alert('缓存大小为:' + size + '字节');
        });
    }
   

(2)使用同步接口判断偏好设置,代码如下:

    function isLoginSyc() {
        var Login = api.getPrefs({
            sync: true,
            key: 'is_login'
        });
        alert('登录状态:' + login);
    }
    //异步调用
    function isLoginAyc() {
        api.getPrefs({
            key: 'is_login'
        }, isLoginCallback);
    }
    function isLoginCallback(ret) {
        var login = ret.value;
        alert('登录状态:' + login);
    }
相关文章
|
30天前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
337 139
|
30天前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
272 137
|
23天前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
154 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
30天前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
220 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
28天前
|
人工智能 前端开发 JavaScript
最佳实践3:用通义灵码开发一款 App
本示例演示使用通义灵码,基于React Native与Node.js开发跨平台类通义App,重点展示iOS端实现。涵盖前端页面生成、后端代码库自动生成、RTK Query通信集成及Qwen API调用全过程,体现灵码在全栈开发中的高效能力。(238字)
199 11
|
28天前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
97 0
|
2月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
112 0
|
4月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
|
5月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。

热门文章

最新文章