But, moreover, not all use-cases call for the importance of loading external resources and caching. For instance, the comment-trick, AFAIK, was pioneered by google for their mobile gmail product. For them, the key was not caching or external resources, but simply deferring parsing/execution.

So, in that spirit, this trick will accomplish that use case. I think it’s something valid to explore for mobile web apps, and may have some limited use cases for regular web apps too.

This is a takeoff of John Resig’s micro-templating, where he includes an html template in the fake-type tag, but in this case, we actually include real code that we just want ignored for the time being.

In all browsers I know about and have tested, the code will not be parsed/executed in any way (ignored by the browser), but it is present in the DOM nonetheless.

So, when you want to execute it, the script element itself exists in the DOM and so you can retrieve the code by accessing the .text property of the script element, and then either eval() the code or do another script-injection.

NOTE: Not all browsers will download an external resource via src=”…” with the fake type (some do, some don’t), so it couldn’t be used by itself for caching per se. But, it might still be a valid approach for the use-case of inlining code that you can control/defer the execution, like on a mobile site (mobile gmail, etc).

Thanks for the mention Steve. I wanted to let you know that I did run the tests in IE8 today. The results are not as good as the others.

Basically you get no benefit from the deferred evaluation approach, though it is not significantly worse. Statistically, given the high variability of IE, in fact, deferred evaluation is the same as regular baseline.

There might be some confounding factors here though, so I think this technique needs some more refinement in IE to really work well. Outside of IE, it seems to have some promise however.

Hence the app actually makes two JS requests, the first is the normal code required for the initial state, and the second is launched just after the initial state is reached.

- eval
- document.createElement(“script”).text
- (Function(“”))();