Jquery Mobile + Phonegap改善列表视图性能 [英] Jquery Mobile + Phonegap improve listview performance
问题描述
在我的JQM 1.4 + Phonegap 3.6应用程序中，我使用 listview ，如下面的代码。
HTML：
< div id =boardselection>
< ul id =modelsListviewdata-role =listviewdata-icon =false>
< / ul>
< / div>
JS：
function resetModelsListView（prodata，firsttime，funfeatureOn，specificBrand，specificPro）{
console.log（on passe dans resetModelsListView）;
// funfeatureOn = 0;
//调试定时器
var time = [];
var dummy;
var i;
var listviewdeferred = $ .Deferred（）;
var optionspro ='';
var optionsbrand ='';
var optionsmodel ='';
var countpros = 0;
var countbrands = 0;
var countmodels = 0;
var chosenmodelListViewHandle = $（'＃modelsListview'）;
var chosenbrandSelect = $（'＃chosenbrand'）;
optionsmodel + ='';
var alreadyusedbrands = [];
prodata.sort（SortByName）;
//获取以前选择的模型以重新选择它。
// var previousSelectedModelId = parseInt（chosenmodelSelect.find（'li：selected'）。
if（！funfeatureOn）{
prodata.sort（SortByModel）;
} else {
prodata.sort（SortByFUN）;
}
//填充模型列表
//〜if（firsttime）{
//〜var perfIsChecked = true;
//〜var smallwaveIsChecked = true;
//〜var stepupIsChecked = true;
//〜} else {
var perfIsChecked = $（'＃checkboxperf'）。is（：checked）;
var smallwaveIsChecked = $（'＃checkboxsmallwave'）。is（：checked）;
var stepupIsChecked = $（'＃checkboxstepup'）。is（：checked）;
//〜}
console.log（perfIsChecked，smallwaveIsChecked，stepupIsChecked =）;
console.log（perfIsChecked）;
console.log（smallwaveIsChecked）;
console.log（stepupIsChecked）;
//如果没有选中则没有过滤器
if（！perfIsChecked&&！smallwaveIsChecked&&！stepupIsChecked）{
perfIsChecked = true;
smallwaveIsChecked = true;
stepupIsChecked = true;
}
for（i = 1; i
} else if（specificPro&& prodata [i] ['name']！= specificPro）{
} else {
if（prodata [i] ['fun'] == 0&& perfIsChecked）{
optionsmodel + ='< li>< a class =optionfuninithref =＃data-proid ='+ prodata [i ] ['id'] +'>< div class =listviewtexts>< span class =listviewtextsmodel>'+ prodata [i] ['model'] +'< / span> - < span class =listviewtextspro>上传的是由'+ prodata [i] ['name'] +'< / span>< / div>< / a>< / li>
} else if（prodata [i] ['fun'] == 1&& smallwaveIsChecked）{
optionsmodel + ='< li>< a class =optionfuninithref = ＃data-proid ='+ prodata [i] ['id'] +'>< div class =listviewtexts< span class =listviewtextsmodel>'+ prodata [i] 'model'] +'< / span> - < span class =listviewtextspro>上传的是由'+ prodata [i] ['name'] +'< / span>< / div>< / a>< / li>
} else if（prodata [i] ['fun'] == 2&& amp; stepupIsChecked）{
optionsmodel + ='< li>< a class =optionstepupinithref = ＃data-proid ='+ prodata [i] ['id'] +'>< div class =listviewtexts< span class =listviewtextsmodel>'+ prodata [i] 'model'] +'< / span> - < span class =listviewtextspro>上传的是由'+ prodata [i] ['name'] +'< / span>< / div>< / a>< / li>
} else if（prodata [i] ['fun'] == 3&&&smallwaveIsChecked）{
optionsmodel + ='< li>< a class =optionkidsinithref = ＃data-proid ='+ prodata [i] ['id'] +'>< div class =listviewtexts< span class =listviewtextsmodel>'+ prodata [i] 'model'] +'< / span> - < span class =listviewtextspro>上传的是由'+ prodata [i] ['name'] +'< / span>< / div>< / a>< / li>
}
if（prodata [i] ['model']！== prodata [i-1] ['model']）{//如果prodata按模型排序， countmodels = countmodels + 1;
}
}
}
chosenmodelListViewHandle.html（optionsmodel）;
if（chosenmodelListViewHandle.listview（option，disabled））{
chosenmodelListViewHandle.listview（option，disabled，false）;
}
//〜if（resetModelsOnly）{
//〜if（！isNaN（previousSelectedModelId））{
//〜selectedmodelListViewHandle.find（'li [href = '+ previousSelectedModelId +']'）。attr（selected，selected）siblings（'li'）。removeAttr（'selected'）;
//〜}
//〜}
//〜highlightFunModels（funfeatureOn，1）;
//〜highlightStepupModels（funfeatureOn，0）;
chosenmodelListViewHandle.listview（refresh，true）;
$（＃chosenmodel-button）。addClass（ui-icon-carat-d ui-btn-icon-right）;
if（！funfeatureOn）{
} else {
$（'ul #expectedmodel-menu'）。find（a.ui-btn：contains（SMALL-WAVE ））。addClass（optionfun）;
$（'ul #expectedmodel-menu'）。find（a.ui-btn：contains（STEP-UP））。addClass（optionstepup）;
}
prodata.sort（SortById）; //我们需要这个，否则prodata不能被$（'＃chosenpro'）使用。
$（＃chosenmodel-button span）。attr（{'data-i18n'：' select.3'}）;
$（＃boardselection）。i18n（）;
listviewdeferred.resolve（）;
return listviewdeferred;
}
这会动态显示一长串图片和文字，复选框）被检查与否，这个列表是相当长的生成，特别是难以滚动在iOS ....性能是坏的。
你能帮助我吗？找出一种提高性能的方法。
简而言之，jQuery Mobile很慢。
我在应用程序中有一个动态列表视图，并且在使用jQuery Mobile时也有性能问题。我得出结论，问题是在渲染和是由jQuery Mobile造成的。我实现了自己的样式，渲染时间从170ms降到25ms。
这里有一些备份我的观点（3篇文章）：
我不是说jQuery Mobile是不好的。这对许多事情都很好。但是如果你有复杂的结构和/或大量的数据，性能可能会成为一个问题，特别是在PhoneGap应用程序。这是我用小小的经验得出的结论。
In my JQM 1.4 + Phonegap 3.6 app, I am using a listview as in the following code.
HTML:
<div id="boardselection">
<ul id="modelsListview" data-role="listview" data-icon="false">
</ul>
</div>
JS:
function resetModelsListView(prodata, firsttime, funfeatureOn, specificBrand, specificPro) {
console.log("on passe dans resetModelsListView");
// funfeatureOn = 0;
//debug timer
var time = [];
var dummy;
var i;
var listviewdeferred = $.Deferred();
var optionspro = '';
var optionsbrand = '';
var optionsmodel = '';
var countpros = 0;
var countbrands = 0;
var countmodels = 0;
var chosenmodelListViewHandle = $('#modelsListview');
var chosenbrandSelect = $('#chosenbrand');
optionsmodel += '';
var alreadyusedbrands = [];
prodata.sort(SortByName);
// get previously selected model to reselect it later
//var previouslySelectedModelId =parseInt(chosenmodelSelect.find('li:selected').val());
if (!funfeatureOn) {
prodata.sort(SortByModel);
} else {
prodata.sort(SortByFUN);
}
//populate model list
//~ if (firsttime){
//~ var perfIsChecked = true;
//~ var smallwaveIsChecked = true;
//~ var stepupIsChecked = true;
//~ }else {
var perfIsChecked = $('#checkboxperf').is(":checked");
var smallwaveIsChecked = $('#checkboxsmallwave').is(":checked");
var stepupIsChecked = $('#checkboxstepup').is(":checked");
//~ }
console.log("perfIsChecked, smallwaveIsChecked, stepupIsChecked =");
console.log(perfIsChecked);
console.log(smallwaveIsChecked);
console.log(stepupIsChecked);
//if none checked then no filter
if (!perfIsChecked && !smallwaveIsChecked && !stepupIsChecked) {
perfIsChecked = true;
smallwaveIsChecked = true;
stepupIsChecked = true;
}
for (i = 1; i < prodata.length; ++i) {
if (specificBrand && prodata[i]['brand'] != specificBrand) {
} else if (specificPro && prodata[i]['name'] != specificPro) {
} else {
if (prodata[i]['fun'] == 0 && perfIsChecked) {
optionsmodel += '<li><a class="optionfuninit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
} else if (prodata[i]['fun'] == 1 && smallwaveIsChecked) {
optionsmodel += '<li><a class="optionfuninit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
} else if (prodata[i]['fun'] == 2 && stepupIsChecked) {
optionsmodel += '<li><a class="optionstepupinit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
} else if (prodata[i]['fun'] == 3 && smallwaveIsChecked) {
optionsmodel += '<li><a class="optionkidsinit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
}
if (prodata[i]['model'] !== prodata[i - 1]['model']) { //eliminate name duplicates if prodata sorted by model
countmodels = countmodels + 1;
}
}
}
chosenmodelListViewHandle.html(optionsmodel);
if (chosenmodelListViewHandle.listview("option", "disabled")) {
chosenmodelListViewHandle.listview("option", "disabled", false);
}
//~ if (resetModelsOnly) {
//~ if ( !isNaN(previouslySelectedModelId) ) {
//~ chosenmodelListViewHandle.find('li[href="' + previouslySelectedModelId + '"]').attr("selected", "selected").siblings('li').removeAttr('selected');
//~ }
//~ }
//~ highlightFunModels(funfeatureOn, 1);
//~ highlightStepupModels(funfeatureOn, 0);
chosenmodelListViewHandle.listview("refresh", true);
$("#chosenmodel-button").addClass("ui-icon-carat-d ui-btn-icon-right");
if (!funfeatureOn) {
} else {
$('ul#chosenmodel-menu').find("a.ui-btn:contains(SMALL-WAVE)").addClass("optionfun");
$('ul#chosenmodel-menu').find("a.ui-btn:contains(STEP-UP)").addClass("optionstepup");
}
prodata.sort(SortById); //we need this otherwise prodata is not usable by the $('#chosenpro').trigger
$("#chosenmodel-button span").attr({ 'data-i18n': 'select.3' });
$("#boardselection").i18n();
listviewdeferred.resolve();
return listviewdeferred;
}
This dynamically displays a long list of images and text, depending on wether filters (checkboxes) are checked or not, and this list is quite long to generate and particularly difficult to scroll in iOS.... The performance is bad.
Can you help me figure out a way to improve the performance.
To put it short, jQuery Mobile is simply slow.
I have a dynamic listview in my app and also had performance issues when using jQuery Mobile. I came to a conclusion that the issue was in rendering and was caused by jQuery Mobile. I implemented my own styling and the rendering time came down from 170ms to 25ms.
Here's some backup to my point (3 articles): http://apachecordova.blogspot.fi/search/label/jQuery%20Mobile
EDIT:
As an answer to your question in the comments, I don't think it would help if I posted my code here. The whole point is that you only write the code YOU need. My listview probably is totally different than yours.
To prove my point (again), I made two listviews. The first one is a basic jQM listview. The other one is styled with custom CSS and it's pretty close to what I use in my app. There's a button in both which renders the listview. What is happening under the hood is very different:
jQM: As you can see, there's a lot of stuff (that you may not need) going on
Custom CSS: attached an event listener to all the elements to make the comparison more fair
These profiles have been recorded with Chrome Developer Tools and the difference is obvious: 173ms vs 12ms. This custom CSS took me about 5min to write:
#custom-listview {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#custom-listview li {
display: block;
position: relative;
overflow: visible;
}
#custom-listview a {
display: block;
position: relative;
text-overflow: ellipsis;
text-decoration: none;
color: white;
padding: .7em 1em;
font-size: 16px;
background-color: #333;
border: solid 1px #1f1f1f;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
}
I had to add some code here, because SO won't let me link to Fiddle without:
I'm not saying jQuery Mobile is all bad. It's good for many things. But if you have complex structure and/or a lot of data, the performance may become an issue especially in PhoneGap apps. That's the conclusion I have come to with my little experience.
这篇关于Jquery Mobile + Phonegap改善列表视图性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
