jquery/jquery-mobile — Issue #2665: request: optional markup enhancements
Author: spellfork
Created: 2011-10-11 07:48:31+00:00
State: open

First off, jqm is awsome in so many ways and after some extensive testing performancewise I've found that performance can be boosted alot simply by limiting the javascript enhancement of markup. What I mean is that instead of processing each and every tag and data-attribute in order to get the nice jqm look I simply do much of the markup myself in my html document.

In order to get this to work with many elements I've been modifying the jqm script quite alot, and I'd really wish there was a way (like using data-role="none") to disable markup enhancments but still be able to hook on events that listen to clicks etc without having to mess around in the core js file.

This would be very nice for form elements such as the radio buttons controlgroup as well as for the on/off switch.

I made a final performance test yesterday, I made two test pages containing every possible element from the jqm docs, one with no enhancement markups and one with the markup allready applied. For the 'vanilla' page I simply used the jquery mobile rc1 compressed script and for the pre-enhanced I used my own heavilly modified. the difference was about 1.5 seconds in load time on an iPhone 4. Every resource was loaded from the server and the both used the same css ( took about 5 seconds for the pre-enhanced and about 6.5 for the non-enhanced file over a 3G mobile connection).

I'll admit that the test page was not replicating any real world scenarios with so many elements, but there clearly is a significant speedup of page rendering if you disable the markup enhancements through the js.

The drawback is that you end up with much larger html documents (mine was 19KB - non-enhanced and 36KB - pre-enhanced). And even though reducing the data might be perferable in many cases I think the option to allow for pre-enhanced pages might be good when speed and load times are a big issue.