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.
>
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.
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.
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 :-)
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?
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...
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'.
Note that "HTML5" is in the title of this series of blog posts. On the other hand, the same criticism has been levelled at some other entries in the series too.
But you can't really have HTML5 without HTML, just as you might write about C tricks in a Objective-C or Cocoa article.
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.
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.
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.