Google Developers Blog: Gmail for Mobile HTML5 Series: Reducing Startup Latency

Gmail for Mobile HTML5 Series: Reducing Startup Latency

Thursday, September 3, 2009

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

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 ModulesHigh 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 ModulesOption 1: Script as DOM<script type="text/JavaScript"> function loadFile(url) { var script = document.createElement('SCRIPT'); script.src = url; document.getElementsByTagName('HEAD')[0].appendChild(script); } </script>Option 2: XmlHttpRequest (XHR)<script type="text/JavaScript"> function loadFile(url) { function callback() { if (req.readyState == 4) { // 4 = Loaded if (req.status == 200) { eval(req.responseText); } else { // Error } } }; var req = new XMLHttpRequest(); req.onreadystatechange = callback; req.open("GET", url, true); req.send(""); } </script><html> ... <script id="lazy"> // Make sure you strip out (or replace) comment blocks in your JavaScript first. /* JavaScript of lazy module */ </script> <script> function lazyLoad() { var lazyElement = document.getElementById('lazy'); var lazyElementBody = lazyElement.innerHTML; var jsCode = stripOutCommentBlock(lazyElementBody); eval(jsCode); } </script> <div onclick=lazyLoad()> Lazy Load </div> </html>http://code.google.com/speedPrevious posts from Gmail for Mobile HTML5 SeriesHTML5 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 applicationBy Bikin Chiu, Software Engineer, Google Mobile

13 comments :

steveSeptember 3, 2009 at 11:19 PM
This comment has been removed by a blog administrator.
ReplyDelete
Swadhin PatelSeptember 4, 2009 at 1:56 AM
What's that Spilt in the line "How to Spilt Your Code into Modules"?
ReplyDelete
Mike MarchakSeptember 4, 2009 at 9:45 AM
@ S w a d h i n

Thanks for the spell check!
ReplyDelete
Jon RoigSeptember 5, 2009 at 3:51 PM
Pretty neat... guess we're all dealing with the same basic browser weirdness as apps get bigger, eh?
ReplyDelete
rr8004September 8, 2009 at 7:51 PM
This comment has been removed by a blog administrator.
ReplyDelete
rr8004September 8, 2009 at 7:53 PM
This comment has been removed by a blog administrator.
ReplyDelete
aaSeptember 10, 2009 at 5:33 PM
Thats 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.
ReplyDelete
kangaxSeptember 24, 2009 at 8:59 PM
Actually, 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.
ReplyDelete
AlexSeptember 28, 2009 at 4:04 AM
You've re-invented the JIT compiler!
ReplyDelete
Nick TulettSeptember 30, 2009 at 4:32 AM
Sneaky trick - how ironic, then, that this page never fully loads in FF3.5 due to broken 3rd party links and google stats.
ReplyDelete
SerbanMarch 10, 2010 at 11:08 AM
Simple trick! This brings us to JavaScript design patterns. Keep posting this neat tricks!

@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.
ReplyDelete
abdhaySeptember 5, 2011 at 7:45 PM
Wonderful trick on how to load mobile web apps faster. Never thought of putting JS in comment block.

Thank you for sharing this technique.
ReplyDelete
颂赞January 19, 2012 at 2:48 AM
Thanks.
ReplyDelete

Add comment

Gmail for Mobile HTML5 Series: Reducing Startup Latency

13 comments :

Labels

Archive

Company-wide

Products

Developers