-gMIS更新:增加input2Select功能(3)

由于 -gMIS 中 input2Search / input2Select 的功能非常好用,此前先后进行了两次更新:

1. -gMIS更新:增加input2Select功能, -R/l2Sn
2. -gMIS更新:增加input2Select功能(2),-R/s2Sx3

现在进行第三次更新,要解决的问题是,当待选/候选列表太长时,比如目前 -People-FwNews 中的站点名称列表,有60K记录,这样长的列表加载到HTML的select元素,用作option时,会影响到页面解析速度,在较好网络的情况下,需要10s左右的时间来处理。这需要优化。

改进的第一个尝试,是使用延时加载或异步加载,在 comm/ido.js 中增加 function lazyLoad, 当前主页面加载完毕之后,再加载这个超长的60K记录的select的option list。

实测的结果是,当通过 -GTAjax 异步加载这60K的记录取回到页面前端,通过JavaScript写入DOM中的select的对应元素,仍需花费6-8s的时间。目前看来时间的花费主要在DOM中构建select的超长option元素。

继续改进,第二个尝试,将这个通过 lazyLoad, -GTAjax 异步加载到当前页面的内容,写入到DOM的select的option中去,修改为写入一个隐藏的input元素中,通过给input.value赋值的办法来实现将通过匿名回调函数取回的内容并入到当前DOM运行时环境。

同时继续修改,comm/ido.js 中的原来的 input2Search 函数,将新增的缓存input.value函数读取到进来,优先判断该值是否有用,如果有,则不再调用原来的select列表对象。

如此实现页面中运用 input2Search 的加速处理。

新增函数 lazyLoad:

//– lazy load long list, Wed Oct 14 09:08:51 CST 2015
function lazyLoad(myObj, myType, myUrl){
window.console.log(“lazyload is starting…. myurl:[“+myUrl+”] myobj:[“+myObj+”]”);
if(true){
//document.onreadystatechange = function(){
//window.onload = function(){
window.setTimeout(function(){
if(document.readyState == ‘complete’ || document.readyState == ‘interactive’){
sendNotice(true, ‘Lazy is loading in process….. myobj:[‘+myObj+’]’);
var gta = new GTAjax();
gta.set(‘targetarea’, ‘addareaextradiv’);
gta.set(“callback”, function(){
//window.alert(“getresult:[“+this+”]”);
var s = this;
var resultList = JSON.parse(s);
//var mySele = document.getElementById(resultList.thefield);
console.log(“thefield:[“+resultList.thefield+”] “+(new Date()));
var optionList = {};
for(var i=0;i<resultList.result_list.length;i++){
var aresult = resultList.result_list[i];
//mySele.options[i] = new Option(aresult.sitename+'(‘+aresult.id+’)’,aresult.id, true,issel=false);
optionList[aresult.id] = aresult.sitename;

}
var myOptionList = document.getElementById(resultList.thefield+’_optionlist’);
myOptionList.value = JSON.stringify(optionList);

console.log(“thefield:[“+resultList.thefield+”] completed……”+(new Date()));
//console.log(JSON.stringify(myOptionList.value));

sendNotice(true, ‘Lazy Load is done successfully….. myobj:[‘+myObj+’]’);

});
gta.get(myUrl);
}
else{
sendNotice(false, ‘Lazy Loading is waiting…..’);
}
}, 3*1000);

}

}

涉及到的其他内容:

1. 匿名函数传参数的问题
JavaScript中匿名函数传参数是无法直接进行的,需要借助bind的机制,但测试未成功。实测的结果时,在第一层匿名函数,也即当前运行时环境中,首层设定匿名函数,可以直接调用其外部的变量,无需传递或声明;而二层匿名函数,也即在匿名函数中再设置一层匿名函数,则在其中无法直接使用其外部的变量。

2. JSON
借助 -GTAjax,设定了将当前页面异步读取一个接口文件,extra/readtblfield.php ,两者通过JSON格式的文件进行数据交换。JSON在 -PHP 和 JavaScript 中的内置函数可以参考 -R/Y2Sx1 .

3. 局限
目前的优化,说针对的列表数据量级在60K左右,如果数据集继续增加到100K,或者仍可以使用,但数据集增加到1M时,人需要考虑再次优化,再次优化的方向时,随着用户的输入即时调用后台查询接口,即时返回数据,然后再生成待选列表供用户点选,如同现在的搜索引擎的搜索提示一样。
之所以在这一步优化成将备选数据集一次性读取到前端,是因为这样在后续的处理中会更快,数据流量会更小,也减少了通信次数;这种优化主要针对有限数据集。

 

此条目发表在-gMIS, 编程技术, 计算机技术分类目录,贴了, , 标签。将固定链接加入收藏夹。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Captcha Code