On April 7th, Google launched a new version of Gmail for mobile for iPhone and Android-powered devices. We shared the behind-the-scenes story through this blog and decided to share more of what we've learned in a brief series of follow-up blog posts. This week, I'll talk about how modularization can be used to greatly reduce the startup latency of a web app. navigating away . Even if your application is blazing fast after it loads, the user may never get the chance to experience it.Network time to fetch the application (JavaScript + HTML) JavaScript parse time Code execution time to fetch the data and render the home page of your application How to Split Your Code into Modules High Level Functionality: A "Weather in my Favourite Cities" home page Click on a city to view the cities entire week forecast Weather data comes from an external web service Possible Module Separation: Weather data model Weather web service API Common UI widgets (buttons, toolbars, navigation, etc) Favourite Cities page City Weather Forecast page How to Lazy Load the Modules Option 1: Script as DOM <script type="text/JavaScript"> Option 2: XmlHttpRequest (XHR) <script type="text/JavaScript"> <html> http://code.google.com/speed .Previous posts from Gmail for Mobile HTML5 Series HTML5 and Webkit pave the way for mobile web applications Using AppCache to launch offline - Part 1 Using AppCache to launch offline - Part 2 Using AppCache to launch offline - Part 3 A Common API for Web Storage Suggestions for better performance Cache pattern for offline HTML5 web application By Bikin Chiu, Software Engineer, Google Mobile
This comment has been removed by a blog administrator.
ReplyDeleteWhat's that Spilt in the line "How to Spilt Your Code into Modules"?
ReplyDelete@ S w a d h i n
ReplyDeleteThanks for the spell check!
Pretty neat... guess we're all dealing with the same basic browser weirdness as apps get bigger, eh?
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThats quite a nifty trick. A follow up question is "how to unload a module?" although not as relevant, but still important for devices with limited memory.
ReplyDeleteActually, in HTML4.01 SCRIPT elements can not have ID attributes; relying on some unspecified handling of illegal attributes doesn't seem like a good idea.
ReplyDeleteYou've re-invented the JIT compiler!
ReplyDeleteSneaky trick - how ironic, then, that this page never fully loads in FF3.5 due to broken 3rd party links and google stats.
ReplyDeleteSimple trick! This brings us to JavaScript design patterns. Keep posting this neat tricks!
ReplyDelete@S w a d h i n - you split your application in modules like PHP script do. For example, if user clicks a link with class="action_listproducts" you go and uncomment < script id="listpoducts" > or load listproducts.js.
@aa - i guess you can do var lazyElementBody = '/*'+lazyElement.innerHTML+'*/'; or if you load the file through ajax, delete it's content or the element itself.
Wonderful trick on how to load mobile web apps faster. Never thought of putting JS in comment block.
ReplyDeleteThank you for sharing this technique.
Thanks.
ReplyDelete