hello mui中的无等待窗体切换是如何实现的

从mui v0.7.0版本开始，hello mui示例App的窗体切换性能大幅提升，点击一个链接，不显示雪花等待框，立即打开一个“正在加载...”的页面，之后真实内容快速填充“正在加载...”区域；本文详细讲解如何实现这种窗体切换效果。
整体思路：
1、预加载一个模板父页面（template.html）和共用子页面；
2、点击列表链接时，直接显示模板父页面，并动态修改模板父页面的标题；
3、共用子页面通过loadURL方法加载对应目标页面；

步骤分解：
list.html页面中预加载模板父页面和共用子页面，为了提高效率，共用子页面默认加载了主列表中的第一项（accordion.html），代码如下：

//预加载模板父页面
var template = mui.preload({
url:'examples/template.html',
id:'demoTemplate',
styles:{
popGesture:"hide"
}
});
//预加载共用子页面
var subWebview = mui.preload({
url:'examples/accordion.html',
id:'template_sub',
styles:{
top: '48px',
bottom: '0px'
}
});

点击列表项时，立即显示模板父页面，改变模板父页面标题，共用子页面加载对应的目标页面，代码如下：

var title = this.innerText;
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
if(subWebview.getURL()==this.href){
subWebview.show();
}else{
subWebview.loadURL(this.href);
}
template.show('slide-in-right', 150);

共用子页面默认隐藏，等加载新内容完毕后，再显示出来，代码如下：

subWebview.addEventListener('loaded', function() {
setTimeout(function(){
subWebview.show();
},50);
});

新页面按下返回按钮后，隐藏模板父页面，并在窗体动画结束后，隐藏共用子页面，代码（App.js）如下：

getTemplateWebview().hide('auto');
setTimeout(function() {
document.getElementById("title").className = 'mui-title mui-fadeout';
getSubWebview().hide("none");
}, 200);

如上方案的优点：
1、模板父页面预加载，点击后立即显示，不用展示雪花等待框，也不会出现白屏现象；
2、共用子页面，有效控制webview数量，避免切页时频繁创建、销毁webview；

回答