Perfomance is bad while switching between the pages with jquery mobile

Perfomance is bad while switching between the pages with jquery mobile

I was facing performance problem while switching between the pages.I went to various forums and added something like faskclick and more.

First time, when i switch to different page, it takes around 3-4 seconds but from second time it is fast e.g. 1 - 1.5 sec. Now, sometimes, click does not work. Out of 5 clicks, only 2-3 clicks works. I am struggling to figure out what went wrong ? 

If you can help me out finding why click is not working and how to improve performance when using jquery mobile, it would really be helpful. Following are my code snipers


<html>

<!-- head -->

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />


<title>Project</title>


<link rel="stylesheet" href="StyleSheet/jquery.mobile-1.3.0.css" />


<script src="StyleSheet/jquery-1.8.2.min.js"></script>

<script src="StyleSheet/jquery.mobile-1.3.0.js"></script>


<script src="StyleSheet/fastclick.js"></script>


<script type="application/javascript">

        

                $.mobile.defaultPageTransition = 'none';

                $.mobile.transitionFallbacks.slideout = 'none';

           

            window.addEventListener('load', function() {

                new FastClick(document.body);

            }, false);

            

            $( document ).bind( "mobileinit", function() {

    $.mobile.buttonMarkup.hoverDelay = 500

});

            

       </script>


</head>


<body>

<div id="container">

<div data-role="page" id="HomePage" class="jqm-demos">

<div class="ui-body ui-body-b">

<a href="#SecondPage">CLick Me to go second page</a>

</div>

</div>

<div data-role="page" id="SecondPage" class="jqm-demos">

<div class="ui-body ui-body-b">

<br> <a href="#HomePage">CLick Me to go first page</a>

<div id="JQM" data-theme="b" data-content-theme="c"

data-role="collapsible" data-collapsed-icon="arrow-d"

data-expanded-icon="arrow-u">

<h3>

<span style="float: left;"> JQM is very slow </span> <a

href="#JQM_1" class="splitButtonClicked" data-rel="popup"> <span

style="float: right;"

class="ui-btn-up-b ui-btn-corner-all ui-icon ui-icon-arrow-r2"></span>

</a>

</h3>

<p>I sther any way so that page transition should happen just

like native applciation when using JQM ? Botton click also also

sometimes not responsive.</p>

</div>

</div>

<!-- content -->


<!-- footer -->

<div data-role="footer" data-theme="b" data-tap-toggle="false"

data-position="fixed">

<!--class="ui-bar ui-bar-b"-->

<a href="#" data-rel="back" data-role="button" data-icon="arrow-l"

data-iconpos="notext" class="ui-btn-left" data-theme="b">left</a>

<center>

<a href="#HomePage" data-role="button" data-icon="home"

data-iconpos="notext" data-theme="b">Home</a>

</center>

<a href="#" data-role="button" data-icon="arrow-r"

data-iconpos="notext" class="ui-btn-right" data-theme="b">Right</a>

</div>

<!-- /footer -->

</div>

</div>

</body>

</html>