我在一个HTML页面中创建了一个小型Jquery Mobile应用程序。 我面临的问题是移动设备中页面转换的性能是可怕的。在我滑到下一页后，我最终等了3-4秒才更改页面。 我有什么想法可以改进吗？
以下是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/branches/tables/css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="http://jquerymobile.com/branches/tables/docs/_assets/css/jqm-docs.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<form id="test" method="post">
<!-- Start of page: #p01 -->
<div data-role="page" id="p01" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Page 01 of 05</h1>
</div><!-- /header -->
<div data-role="content" >
<h3>Please provide these details about the child</h3>
<br/>
<fieldset>
<label>Child's Full Name:</label>
<fieldset>
<input id = "p01_childFirstName_text" type="text" placeholder="First Name...">
<input id = "p01_childMidName_text" type="text" placeholder="Middle Name...">
<input id = "p01_childLastName_text" type="text" placeholder="Last Name...">
</fieldset>
</fieldset>
<br/>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Child's Gender:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderMale_radio" value="choice-1" checked="checked" />
<label for="p01_childGenderMale_radio">Female</label>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderFemale_radio" value="choice-2" />
<label for="p01_childGenderFemale_radio">Male</label>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderOther_radio" value="choice-3" />
<label for="p01_childGenderOther_radio">Other</label>
</fieldset>
<br/>
<fieldset>
<label for = "p01_childEthnGroup_text">Child's Ethnic Group or Race:</label>
<input id = "p01_childEthnGroup_text" type="text" placeholder="Ethnic Group...">
</fieldset>
<br/>
<fieldset>
<label for="p01_childBirthDate_text">Child's Birth Date:</label>
<input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY">
</fieldset>
<br/>
<fieldset>
<label for="p01_childBirthDate_text">Child's Grade in School:</label>
<input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY">
</fieldset>
<br/>
<fieldset>
<label for="flip-1">Is the Child attending a School?</label>
<select name="flip-1" id="flip-1" data-role="slider" data-theme="a">
<option value="off">Yes</option>
<option value="on">No</option>
</select>
</fieldset>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<p class = "footer_text"><small><em>Please swipe the page to the sides to go to the next page, or to return to the previous one.</em></small></p>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of page: #p02 -->
<div data-role="page" id="p02" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Page 02 of 05</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<h3>Please provide these details about the child's parent</h3>
<p><small><em>Please enter these details even if the parents are not working now.
Be specific - for example: auto mechanic, high school teacher, home maker,
day labourer, lathe operator, army sergeant etc.
</em></small></p>
<br/>
<fieldset>
<label for="p02_fatherWorkType_text">Father's Type of Work:</label>
<input id = "p02_fatherWorkType_text" type="text" placeholder="Type of Work...">
</fieldset>
<br/>
<fieldset>
<label for="p02_motherWorkType_text">Mother's Type of Work:</label>
<input id = "p02_motherWorkType_text" type="text" placeholder="Type of Work...">
</fieldset>
<br/>
<fieldset>
<label>Your Full Name:</label>
<fieldset>
<input id = "p02_userFirstName_text" type="text" placeholder="First Name...">
<input id = "p02_userMidName_text" type="text" placeholder="Middle Name...">
<input id = "p02_userLastName_text" type="text" placeholder="Last Name...">
</fieldset>
</fieldset>
<br/>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Your Gender:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderMale_radio" value="choice-1" checked="checked" />
<label for="p02_userGenderMale_radio">Female</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderFemale_radio" value="choice-2" />
<label for="p02_userGenderFemale_radio">Male</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderOther_radio" value="choice-3" />
<label for="p02_userGenderOther_radio">Other</label>
</fieldset>
<br/>
<fieldset data-role="controlgroup">
<legend>Your Relation with the Child:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationBio_radio" value="choice-1" checked="checked" />
<label for="p02_userRelationBio_radio">Biological Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationAdopt_radio" value="choice-2" />
<label for="p02_userRelationAdopt_radio">Adoptive Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationStep_radio" value="choice-3" />
<label for="p02_userRelationStep_radio">Step Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationGrand_radio" value="choice-3" />
<label for="p02_userRelationGrand_radio">Grand Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationFoster_radio" value="choice-3" />
<label for="p02_userRelationFoster_radio">Foster Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationOther_radio" value="choice-3" />
<label for="p02_userRelationOther_radio">Others (Please Specify)</label>
<input class= "p02_input_hidden_text" id = "p02_userRelationOther_text" type="text" placeholder="Specify Relation...">
</fieldset>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<p class = "footer_text"><small><em>Please swipe the page to the sides to go to the next page, or to return to the previous one.</em></small></p>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of page: #p05 -->
<div data-role="page" id="p05" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Last Page</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<h2>Congratulations! You have filled out the Child Behaviour Checklist.</h2>
<p><small><em>Please click on the "SUBMIT" button below to send us the checklist.</em></small></p>
<br/>
<br/>
<br/>
<button type="submit" data-theme="a" class="ui-btn-hidden" data-disabled="false">Submit</button>
</div><!-- /content -->
</div><!-- /page five -->
</form>
<style>
.footer_text {
text-align:center;
}
</style>
<script>
$( document ).on( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading...";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
$(document).on ('pageshow', function (e, data) {
// keep all previously-visited pages in the DOM. Remove this option later when application becomes large.
$.mobile.page.prototype.options.domCache = true;
var activePage = $.mobile.activePage.attr("id");
var previousPage = (parseInt(activePage.slice(1,3))-1).toString();
var nextPage = (parseInt(activePage.slice(1,3))+1).toString();
window.myActivePage = activePage;
window.myPreviousPage = "#p0" + previousPage;
window.myNextPage = "#p0" + nextPage;
});
// page navigation on using swipes
$(document).on('swipeleft',function(event, ui){
$.mobile.changePage(window.myNextPage, { transition: "slide"});
});
$(document).on('swiperight',function(event, ui){
$.mobile.changePage(window.myPreviousPage, { transition: "slide", reverse:true});
});
// Code to show and hide fields. Spaghetti code. Refactor this when working on actual app.
$(document).ready(function() {
$('[id=p02_userRelationOther_text]').hide()
$('[type=radio]').click(function(eventName) {
if (this.id == 'p02_userRelationOther_radio') {
$('[id=p02_userRelationOther_text]').show('slow')
}
else {
$('[id=p02_userRelationOther_text]').hide('slow')
}
});
$('[id=p03_noSports_check]').click(function(eventName) {
if ($('[id=p03_noSports_check]').is(":checked")) {
$('[class=p03_hidden_container]').hide('slow')
}
else {
$('[class=p03_hidden_container]').show('slow')
}
});
$('[id=p04_noHobby_check]').click(function(eventName) {
if ($('[id=p04_noHobby_check]').is(":checked")) {
$('[class=p04_hidden_container]').hide('slow')
}
else {
$('[class=p04_hidden_container]').show('slow')
}
});
});
</script>
</body>
</html>
答案 0 :(得分：11)
有几种方法：
如果您正在使用！具有多个页面的html文件，将它们包装成单个div：
<div id="container"/>
并设置此css：
body {
margin: 0;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
js code：
$(document).one("mobileinit", function () {
$.mobile.pageContainer = $('#container');
$.mobile.defaultPageTransition = 'slide';
});
有关此方法的更多信息，请访问：http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/
该解决方案的问题在于它打破了表单上的选择列表。
关闭它们：
$(document).bind("mobileinit", function(){
$.mobile.defaultDialogTransition = "none";
$.mobile.defaultPageTransition = "none";
});
在jquery移动应用上使用快速点击可加快点击事件，从而加快页面转换速度。点击事件可以在页面转换中添加最多300毫秒。这个插件会做得更多，但在你的情况下就足够了。
链接：https://github.com/drowne/jquery.mobile.fastclick
如果您不想要其他插件，您仍然可以通过从页面更改按钮中删除href然后执行此操作来实现更快的页面转换：
<a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
$('#back-btn').bind('touchstart', function(e) {
$.mobile.changePage("#pageID");
});
如果您知道用户不会滚动，则touchstart（或touchend）事件会很有效。这实际上是点击事件在移动设备上需要很长时间才能解决的原因，设备正在等待用户是否正在滚动或点击。所以touchstart不应该像常见的点击/点击事件那样有延迟。
我希望其中一些解决方案可以帮助您。考虑到这些并不是防弹解决方案，而且它们有自己的缺点。
答案 1 :(得分：0)
对于全局css性能修复，请尝试JQM CSS survival kit，这是一个用于修复特定性能问题的小型css工具。
答案 2 :(得分：0)
谢谢Gajotres。
我用vclick替换了“touchstart”并添加了preventDefault（），否则我最终会遇到很多pagechangefailed事件。
<div data-role="page" id="event" data-theme="b" style="background: transparent;">
<div data-role="header" data-theme='b' data-position='fixed'>
<a class="ui-btn-left" data-icon="arrow-l" id="bhome" href="#">Back</a>
...
// Fastclick on back button - gets rid of the 300ms delay
$("#bhome").live('vclick', function(e) {
e.preventDefault();
javascript:history.back(1);// $.mobile.changePage("#home", {transition:'fade'});
});
在开发过程中，我认为添加以下事件处理程序以确保不会发生错误是一件好事：
$(document).bind("pagechangefailed", function(event, data) {
$.mobile.loading('hide');
alert("pagechangefailed");
});