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

项目背景

原生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) {}

}

邏輯流程圖

（图一）开屏页数据预加载流程图

（图二）首页数据并行加载流程图