

How Google uses HTML5 to reduce startup latency for mobile Gmail - adamhowell
http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html

======
IgorPartola
So first they take monolithic code and modularize it. Then they bundle it back
into a single piece of code. Then they do this:

    
    
      <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>
    

What if my JavaScript code looks like this:

var x = "hello /* world */";

I wouldn't do it this way. Instead just bundle all your code into a single
file and optimize its caching. No HTML5 needed: use HTTP headers.

~~~
IgorPartola
I guess this is the key part:

> On an iPhone 2.2 device, 200k of JavaScript held within a block comment adds
> 240ms during page load, whereas 200k of JavaScript that is parsed during
> page load added 2600 ms. That's more than a 10x reduction in startup latency
> by eliminating 200k of unneeded JavaScript during page load! Take a look at
> the code sample below to see how this is done.

But once again this is an issue of when to eval the code, not when to load it.
Put the script tag at the end of the page, so that it gets eval'ed after most
of the page is already built.

~~~
ashu
That does not stop it from parsing, so even though the page is rendered, it is
not interactive.

~~~
IgorPartola
I guess that's true. Still, XHR respects HTTP headers. You could request the
code and immediately get it out of the browser cache if it is there. I see the
problem they are trying to solve, but the solution is so obtuse I can't bring
myself to using something like this.

------
alain94040
I used to be impressed by hacks such as these, but now they mostly make me
sad: in 20 years of computer improvements, we still have to resort to ugly
hacks like these?

The chip on an iPhone runs at what, 600 MHz, maybe 800 MHz? My Apple II ran at
1 MHz. I was counting bytes then. I hope I'll see a day where I don't count
bytes anymore :-)

~~~
ardit33
I guess you haven't developed network mobile apps. Unfortunately it is still a
space where every byte counts.

------
ars
How is this HTML5 specific? Everything written there applies to older versions
too.

And the title is wrong - they are not using HTML5 to do anything, it's about
how to reduce latency by lazy loading modules in the background.

~~~
blasdel
Though they don't really mention it in the post, they use the new Local
Storage APIs (which were a reification of Google Gears) to programmatically
cache both the application and the user's data, at least on the iPhone
version.

In the article they're mostly using 'HTML5' to mean 'not flash' and 'not
native'.

~~~
tlrobinson
I think the proper name for the HTML5 feature they're using is the
"application cache", which caches all the files listed in the manifest etc.

~~~
blasdel
I'm pretty sure they're also using the Sqlite3-based "Local Storage" API for
locally caching your mail data.

------
waleedka
What surprised me was that parsing javascript took much longer than
downloading is, even on a mobile phone connection! Anyone knows why after all
these years we still don't have a way to download pre-compiled javascript?

~~~
tlrobinson
Well, supposedly there's some bug in WebKit on the iPhone that causes some or
all JavaScript to be parsed twice. That probably has something to do with
it...

------
tlrobinson
Why even bother using a script tag if you're just going to eval the text
later? Just make it a text file so you don't have to worry about stripping or
escaping comments.

~~~
litewulf
I assume you want to include it in the same page to pipeline everything. Using
a script tag is relatively safe because search engines tend not to look inside
it, and unrecognized languages are typically ignored. (Though in this case,
they don't specify a language, and thus comment it out for browsers that
assume a default of javascript). A textarea would be a bit difficult because
you'd need to escape characters correctly and such.

------
bprater
Wow, using commented out Javascript to speed up load times and then parsing
and evaling at run-time. That's a pretty interesting hack.

------
fauigerzigerk
If that's HTML 5 I remain unconvinced.

