乐趣区

关于javascript:使用APICloud开发App的性能优化探索合理使用同步异步接口

jiezi

本文从同步 / 异步原理角度登程，介绍了 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);
}
退出移动版