Title: Page 126 – Alex Kirk --- * ## 󠀁[Caching of Downloaded Code: Testing Results](https://alex.kirk.at/2005/10/11/caching-of-downloaded-code-testing-results/)󠁿 * October 11, 2005 * Today I did some experimenting with the caching of downloaded code (or On-Demand Javascript, whatever you want to call it). * I’ve set up a small testing suite that currently tests 3 different ways of downloading code: [script-tag insertion via DOM](https://alex.kirk.at/2005/10/10/better-code-downloading-with-ajax/), [XmlHttpRequest as a GET](https://alex.kirk.at/2005/10/05/code-downloading-with-ajax/) and XHR as a POST. * These are my results for now: * | Method | IE6 | Firefox 1.07 | Firefox 1.5b2 | Safari 2.0 | Opera 8.5 | | script_dom | cached | cached | cached | cached | cached | | xhr_post | not cached | not cached | not cached | not cached | not cached | | xhr_get | cached | not cached | cached | not cached | not cached | * (Results are the same for Win and OS X where both browsers are available (FF & Opera)) * ![Safari Code Downloading Cache Test](https://alex.kirk.at/wp-content/safari_cachetest. png "Safari Code Downloading Cache Test") * This gives an interesting picture: Firefox does not seem to cache any scripts, neither the ones loaded via DOM nor those loaded via XHR. Only IE loads an XHR GET request from cache. * I’ve got the script in my public testing area, so you can [test it for your own browser](https://alex.kirk.at/area7/2005/10/11/). Please do so and correct my values if you receive different results. * The sources of my tests are available, too: [index.phps](https://alex.kirk.at/area7/2005/10/11/index.phps) and [js.phps](https://alex.kirk.at/area7/2005/10/11/js.phps). I did my testings using the latest [prototype.js library](http://dev.conio.net/repos/prototype/dist/prototype.js). Maybe I will try it later on with another library (e.g. with [dojo](http://www.dojotoolkit.org/). io.bind). * I’d be interested in more ways to download code (especially via document.write since I haven’t been able to include this properly to my tests) and in your results for other browsers. Just leave a comment. * **UPDATE:** I have now included the `Expires` header field with the Javascript file. Now FireFox in both version caches the script with script_dom, in version 1.5b2 it also caches XHR with GET requests. * XmlHttpRequest, caching, prototype.js, test * [Code](https://alex.kirk.at/category/code/) * ## 󠀁[Better code downloading with AJAX](https://alex.kirk.at/2005/10/10/better-code-downloading-with-ajax/)󠁿 * October 10, 2005 * I’ve been playing with Code downloading (or Javascript on Demand) a little more. * [Michael Mahemoff](http://www.softwareas.com/ajax-can-improve-performance-too) pointed me at his great [Ajaxpatterns](http://www.ajaxpatterns.org/) in which he suggests a [different solution](http://ajaxpatterns.org/On-Demand_Javascript): ` if (self.uploadMessages) { // Already exists return; } var head = document.getElementsByTagName(" head")[0]; var script = document.createElement('script'); script.type = 'text/ javascript'; script.src = "upload.js"; head.appendChild(script); * Via DOM manipulation a new script tag is added to our document, loading the new script via the ‘src’ attribute. I have put [a working example here](https://alex.kirk.at/area7/2005/10/10/). As you can see this does not even need to do an XmlHttpRequest (XHR later on) so it will also work on browsers not supporting that. * So why use this approach and not mine? Initially I thought that it was not as good as doing it via XHR because you receive a direct feedback (i.e. a function call) when the script has been loaded. This is per se not possible with this technique. But as in good ol’ times a simple function call at the end of the script file will do the same job (compare source codes from [the last example](https://alex.kirk.at/area7/2005/10/05/) and [this one](https://alex.kirk.at/area7/2005/10/10/) (plus [load.js](https://alex.kirk.at/area7/2005/10/10/load.js))). * Using this method to load code later on also provides another “feature” (thanks for that hint to [Erik Arvidsson](http://erik.eae.net/)): Unlike XHRs Firefox also provides a cache for scripts loaded that way. There seems to be a disagreement about whether this is a bug or a feature (people complaining that IE caches such requests while it could be quite useful in this scenario). * When using dynamically generated javascript code you will also have to keep your HTTP headers in mind (scripts don’t send them by default). The headers `Cache- Control` and `Last-Modified` will do usually (see [section 6.1.2 of my thesis](https://alex.kirk.at/papers/caching-strategies/diploma_thesisch6.html#x17-730006.1.2)) * The method above is also the method used by [Dojo](http://www.dojotoolkit.org/), a developer ([David Schontzler](http://stilleye.com/)) commented, too. He says that Dojo also only loads the stuff the programmer needs, so little overhead can be expected from this project. * Also [Alex Russell](http://alex.dojotoolkit.org/) from Dojo left a comment about [bloated javascript libraries](https://alex.kirk.at/2005/10/03/bloated-ajax-applications-due-to-libraries/). He has some good points about script size to say ([read for yourself](https://alex.kirk.at/2005/10/03/bloated-ajax-applications-due-to-libraries/#comments)), I just want quote the best point of his posting: * So yes, large libraries are a problem, but developers need some of the capabilities they provide. The best libraries, though, should make you only pay for what you use. Hopefully Dojo and JSAN will make this the defacto way of doing things. * So hang on for Dojo, they seem to be on a good way (coverage of Dojo to follow). * Finally I want to thank you all for your great and insightful comments! * ajax, dojo, code downloading, javascript on demand, caching, http headers * [Ajax](https://alex.kirk.at/category/code/ajax/), [Code](https://alex.kirk.at/category/code/), [PHP](https://alex.kirk.at/category/code/php/) [Previous Page](https://alex.kirk.at/page/125/?output_format=md&term_id=1122) [Next Page](https://alex.kirk.at/page/127/?output_format=md&term_id=1122)