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: 'http://www.46uv.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: 'http://www.46uv.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.46uv.com

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


高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
人人干人人摸人人,人人干人人摸人人操,人人干人人摸人人插,人人干人人摸人人看,人人干人人摸人人入