Using APICloud to develop App performance optimization exploration - reasonable use of synchronous/asynchronous interfaces

From the perspective of synchronous/asynchronous principle, this article introduces the optimization methods of App. Using these methods flexibly can bring users a better experience when developing App.

The execution of standard JavaScript is divided into two modes: synchronous and asynchronous. All APICloud extension APIs also support synchronous or asynchronous calls, which are suitable for different scenarios.

In the browser engine, the JavaScript engine is executed in a single thread, which means that only one piece of code can be executed by the JavaScript engine at the same time. Therefore, JavaScript functions are executed one by one on the stack. If function A depends on the return result of function B, then function A must wait for the result returned by function B synchronously before it has a chance to execute.

The synchronous mode of JavaScript conforms to the usual coding habits of developers, but performance problems arise because of this. When the execution of a function in the function stack takes too long, it will cause all functions in the function stack to be delayed in execution, resulting in program performance. problem. This is unacceptable in a scenario where the mobile terminal experience scenario is the priority.
Thus was born the asynchronous pattern. Based on the existing JavaScript synchronous mode, all the extended APIs of APICloud have introduced the modular definition specification of JavaScript CMD (Common Module Definition). The API calls follow the asynchronous loading of AMD (Asynchronous Module Definition). By implementing the AMD specification The JavaScript asynchronous loading mode under the following code can solve the performance problem very well.

APICloud's JavaScript asynchronous programming model can be summarized into three keywords: callback function, event monitoring and require. A typical code usage is as follows:

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

When the read function of the fs module is called, it will enter the corresponding native Android and ios system layer operations, and the file reading operation will be performed in the native child thread. When the operation is over, the JavaScript will be called back. The advantage of this is that the App will not be blocked due to the different time-consuming and size of the read file. If the device is rendering UI at this time, it will cause a "stutter" problem. The above code log output sequence is:

console.log('readFile completed....');
//After a certain period of time, the time spent varies depending on the size of the file
console.log('printFile content: '+ text);

The asynchronous mode can decouple the logical function of the App from the UI rendering, execute time-consuming operations in multiple threads, make full use of the hardware performance of the device, make the App more focused on rendering, and provide better visual effects and responsiveness to users.

In the process of APP development, according to different operation scenarios, synchronous operation and asynchronous operation can be reasonably combined to write JavaScript code with more reasonable structure, better performance and easier maintenance.

In the API extended by APICloud, the api object interface that supports synchronous operation declares the synchronous operation by passing in the sync parameter; the module interface that supports synchronous operation ends with Sync.
(1) Use the synchronous interface to obtain the App cache size. The code of the related API calling method is as follows:

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

(2) Use the synchronous interface to determine the preference settings, the code is as follows

//同步调用
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);
}