APP开发平台 > Blog > APICloud开发者进阶之路 | 性能优化探索

你知道吗,后面的这半个月只上11天班,

10天的假期!

3天中秋、7天国庆爽翻了!

每天写代码是不是很疲,

是时候组团出去浪一浪了。

所以再努力11天,就可以狂嗨10天啦!

周五,柚子君又要给你们送精神食量了!

本期分享《30天!App开发从0到1》第11节,

【性能优化探索】


主要内容


本章将介绍几种常用的 App 优化方法,这些方法的学习和使用很简单,对 App 效率和性能 的提升却有很大的帮助。


示例 1 讲述的是图片的缓存处理机制,图片缓存处理在整个 APP 开发中都是一个需要重视 的问题。


示例 2 通过一个小案例,阐述了 APICloud APP 开发的一个重要编程理念,对于从前端 Web开发转到 App 开发的同学,尤其需要认真体会。


示例 3 讲述了登录流程的优化处理,其中讲述的这种逻辑方法可适用于多个业务场景。示例 4 从底层讲解了同步 / 异步的运行原理和优劣对比,同时示范了 APICloud 模块的同步 /异步使用方法。


学习目标


  • (1)使用 api.imageCache 进行图片缓存处理。

  • (2)优化频繁地从 DOM 上获取数据引起的性能问题。

  • (3)如何提供流畅的用户登录体验。

  • (4)合理使用同步 / 异步接口。


11.1 用 imageCache 缓存图片


APICloud 提供了一个 api 方法——'api.imageCache',用于图片的本地缓存处理。图片缓存处 理在一款应用中是必不可少的。图片缓存后,当应用再次请求同一地址的网络图片时,就不需 要再从图片的网络地址去请求下载,而是读取本地的缓存图片,这样大大加快了页面的加载速 度,基本用法如下:


api.imageCache({

url: 'https://www.apicloud.com/img/default.png'

}, function(ret, err) {

var url = ret.url;

/*{

* status:true, // 是否成功,布尔类型

* url: ''// 图片本地存储路径,若下载失败,则返回传入的url,字符串类型*}

}); */


以上就是最基本的用法,其最简单的使用场景就是获取个人头像。调用远程接口,获取到 头像地址之后,再调用图片缓存接口,把缓存的图片展示在页面上。因为只需要显示头像,只 涉及一个 DOM 元素。所以可直接在回调函数中找到元素赋值即可完成需求。


下面是完整的功能示例:


var portrait = $api.dom('#portrait'); // 假设此元素是img标签api.imageCache({

url: 'https://www.apicloud.com/img/default.png'

}, function(ret, err) {

if(ret && ret.status) {

$api.attr(portrait, 'src', ret.url);

} // 缓存成功,替换为缓存好的图片地址

if(err) {

$api.attr(portrait, 'src', '../../img/default.png');

// 如果缓存失败,展示默认头像(img标签有默认图片地址的不用修改)}); }


接下来是一个常见的对列表中的图片进行缓存的场景,如图 11-1 所示。


chunqiu3.jpg

图 11-1


这里比较常用的方法是在接到数据之后,循环数据时,将链接跟 DOM 元素的标识拼成JSON 数组,然后交给程序处理。


function fnImageCache (data){

for(var i = 0; i < data.length; i++){

var item = data[i]; var elements = $api.domAll(item.flag); var src = item.src;

(function(_data){

api.imageCache({

url: data.src,

thumbnail: true // 如果觉得缩略图质量不高,可以设置成false,使用原图

}, function(ret, err) {

if(ret && ret.status) {

for(var j = 0; j < _data.elements.length; j++){ var _item = _data.elements[j]; $api.attr(_item, 'src', ret.url);

// 缓存成功,替换为缓存好的图片地址

}

} else {

}({ }); } // 如果缓存失败,展示默认图片elements: elements,

})) src: src

var arr = [];

/*假设arr是这样的数组

*{

* flag: '', // DOM元素的标识,例如,className

} }

* src: '' // 需要缓存的图片地址*}

*/

// 在插入这些DOM元素之后,就可以调用上面的方法fnImageCache(arr);

// 缓存成功之后,就会找到对应的DOM元素,并给src赋值


还有一种方法,可以用在重复图片较多的场合。例如聊天窗口中会频繁出现同一个头像, 这种情况下可以考虑用如下方法。


// 这个方法是给DOM元素,如div添加background-image属性,实现一个CSS样式给所有相同className元素添加// 同一个背景图片

var __head__ = $api.dom('head'); // 获取页面中的head元素

var cacheImgCount = {

};

// 这个是用来记录哪些图片被成功缓存过,缓存过的就不做缓存处理function fnImageCache(tag, src){

if (cacheImgCount[tag]) { // 如果被成功缓存,就不做处理} else{

api.imageCache({

url: src,

thumbnail: true // 如果觉得缩略图质量不高,可以设置成false,使用原图}, function(ret, err){

// 创建一个style标签,里面的内容就是给需要缓存背景图的元素加上背景图片属性var str = '';

if (ret && ret.status) {

str += '';

// 拼接好字符串之后,把它作为标签,插入到head元素末尾,这样,页面里所有带此标识的元素,// 背景图片都会变成缓存的图片

$api.append(__head__, str);

// 最后将这个标识置为true,下次不做缓存处理cacheImgCount[tag] = true;

} else {

cacheImgCount[tag] = false;

}); }

}; }


微信图片_20180907203650.jpg


更多APP资讯,请关注www.apicloud.com

提交App定制需求,了解报价和周期:https://app.apicloud.com/index?uzchannel=500


An efficient app outsourcing platform that guarantees timely delivery!

Submit Requirements
x