Apache Cordova: How jQuery Mobile Eats PhoneGap Performance, See Experiment

Wednesday, August 14, 2013

How jQuery Mobile Eats PhoneGap Performance, See Experiment

As we know, jQuery Mobile renders a lot of HTML for a simple element/widget. For example, the below picture(from jQM demos) shows the HTML source code (right) of a simple list item(left).

However, to make such a list item, the html can be as simple as just: <li>Acura</li>(don’t know how? Leave a comment.)

But how will HTML elements affect the performance? Let’s take an experiment to see.

I wrote a simple page to test it. Open live demo for web browser(PC & Phone)

 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
   <head>  
     <meta charset="utf-8" />   
     <meta name="viewport" content="initial-scale=1, width=device-width" />  
     <title></title>  
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>  
   </head>  
 <body>  
   <p>  
     <input type="button" value="Render jQM" id="btnRenderjQM"/>  
     <input type="button" value="Render Custom" id="btnRenderCustom"/>  
   </p>  
   <p><b>Time: </b><span id="time">0</span></p>  
   <ul id="result" style="height: 200px; overflow: auto;"></ul>  
   <script language="javascript" type="text/javascript">  
     var time = null;  
     $(document).ready(function() {  
       var li1 = '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-up-c">\  
               <div class="ui-btn-inner ui-li">\  
                 <div class="ui-btn-text"><a href="#" class="ui-link-inherit">Acura</a></div>\  
                 <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div>\  
             </li>';  
       var li2 = '<li>Acura</li>';  
       $("#btnRenderjQM").click(function() {  
         var $ul = $("#result");  
         $ul.empty();  
         var html = '';  
         for (var i = 0; i < 1000; i++) {  
           html += li1;  
         }
         time = new Date();    
         $ul.html(html);  
         $("#time").html(new Date() - time);  
       });  
       $("#btnRenderCustom").click(function() {  
         var $ul = $("#result");  
         $ul.empty();  
         var html = '';  
         for (var i = 0; i < 1000; i++) {  
           html += li2;  
         }
         time = new Date();    
         $ul.html(html);  
         $("#time").html(new Date() - time);  
       });  
     });  
   </script>  
 </body>  
 </html>

There are two buttons on the test page, one appends 1000 jQueryMobile list items to the list, while the other appends 1000 simple list items.

Let’s see some charts.
Test in firefox:

Test in google chome:

Test on Android Phone:

The charts mean: HTML elements eat performance. If we use simple HTML elements to render a page, it will save about 80% performance than using jQM. If it’s a small page, that would be OK using jQM, if it’s a complex page, I recommend you write the HTML elements by yourself.

The above test page can be viewed online here: live demo for web browser(PC &Phone).