唯快不破 移动端数据访问光速加载

项目背景

原生App相信大家再熟悉不过了,它的速度快、性能高、整体用户体验也不错,但是也会存在一些让人诟病的问题,比如在弱网情况下数据加载缓慢,首页数据半天也出不来,进入详情界面也需要加载半天,用户体验差。为了改善这种局面,我们也采取了相对应的技术方案来完善它。

数据预加载

"预加载"这个概念对于工程师来讲,并不陌生。大部分主流页面都会在服务器端拉取首页数据后再进行界面渲染,服务器拉取首页数据需要时间,弱网情况下用户等待的时间会比较久。以首页为例,为了优化首页体验,我们可以选择在开屏页进行数据预加载,把从服务器拉取下来的数据进行本地缓存。

String homeData =mPrefs.get("home_data","");

if(TextUtils.isEmpty(homeData)) {

// 如果本地缓存为空

com.addcn.android.hk591new.request.

ApiRequestHelper.getInstance().doGet

(Urls.HK_URL_APP_HOME_INFO,

newOnApiResultListener(){

@Override

public voidonResult(String result) {

if(!TextUtils.isEmpty(result)) {

if(mPrefs!=null) {

// 本地缓存

mPrefs.set("home_data",result);

mPrefs.save();

}

}

}

});

}

数据动态缓存

通过数据预加载,我们可以在首页及时的将数据展示给用户看,但是问题来了,我们需要每次在开屏页都进行预加载吗? 不不不... 如果本地已经有了缓存,并且数据缓存的时间没有过期,开屏页将不再向服务器端拉取数据,而是直接进入首页,从首页动态拉取服务器资源再次进行数据缓存。

数据界面更新

通过动态缓存,我们知道本地保存的数据都是最后一次从服务器端拉取的数据,那么问题又来了,如何保证用户看到的界面是最新的数据?其实也很简单,当用户进入首页后,我们先加载本地缓存数据进行页面展示,第一时间让用户看的到内容,然后同时去请求界面最新的数据,等新的界面数据拉取下来后,我们再重新渲染一遍界面即可。

@Override

protected voidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_home);

// 初始化基本数据

initData();

// 初始化基本组件

initView();

// 加载本地缓存

loadLocal();

// 加载数据(服务器更新资源)

loadData();

}

/**

* 获取本地缓存,界面渲染

*/

private voidloadLocal() {

if(mPrefs!=null) {

// 界面渲染

updateUI(mPrefs.get("home_data",""));

}

}

/**

* 异步加载服务端数据,界面渲染&更新缓存

*/

private voidloadData() {

ApiRequestHelper.getInstance().doGet(Urls.HK_URL_APP_HOME_INFO,

newOnApiResultListener() {

@Override

public voidonResult(String result) {

if(!TextUtils.isEmpty(result)) {

if(mPrefs!=null) {

// 本地缓存

mPrefs.set("home_data",result);

mPrefs.save();

}

JSONObject jsonObject =

JSONAnalyze.getJSONObject(result);

String status = JSONAnalyze

.getJSONValue(jsonObject,"status");

if(status.equals("1")) {

// 界面渲染

updateUI(result);

}

}

}

});

}

/**

* 更新界面

*

*@paramresult

*/

private voidupdateUI(String result) {

try{

if(!TextUtils.isEmpty(result)) {

// JSON解析

JSONObject jsonObject = com.addcn.android.hk591new.

util.JSONAnalyze.getJSONObject(result);

String status = JSONAnalyze

.getJSONValue(jsonObject,"status");

if(status.equals("1")) {

JSONObject data = JSONAnalyze

.getJSONObject(jsonObject,"key");

// 界面渲染,此处界面渲染代码已省略...

}

}

}catch(Exception ex) {}

}

邏輯流程圖

(图一)开屏页数据预加载流程图

(图二)首页数据并行加载流程图

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180125G05ND800?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区