使用APICloud开发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。典型的代码使用如下：

<script>
    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);
    }