What can a developer do to minimise this issue? There are several very effective methods that can be explored:
Compacting Your Code
This is acheived by stripping out comments and unneccesary white-space which can drastically reduce the size of your files – sometimes cutting them in half. Recommended tools: Dean Edwards Packer or Douglas Crockford's JSMin. You could apply the same theory to your CSS as well.
Using GZIP or Deflate can drastically reduce the downloaded file size (but should be used wisely). You can read more on this here.
Combining Multiple Files
Server-side caching can help speed the up the delivery of page content. Also understanding browser caching and how to control this using file headers can make a difference – but again should be used wisely.
These techniques have been around for quite a while now. But this leads me to the real point of this post!
When it comes to the world of Web Applications (as opposed to a "website") where the use of Iframes is more likely, there is another technique that can be explored – "Code Injection".
I became aware of this technique while trying to interpret some very lengthy posts from Choleriker on the Ext forums. I thank Choleriker for taking the time to explain the concepts. I thought I would share my interpretation of this technique, as well as provide some examples to see it in action as requested by other developers in the forums.
First of all – what is this "code injection" that I am referring to?
- Compacts the code by stripped white-space, comments etc
- Caches the output code to a file on the server
- Include the code inline using PHP or some other scripting language
I may provide some code for doing this in PHP in the future. In the meantime you might want to look at the "Combine" script from Niels Leenheer to get started.
The secret to this working is the following code in the Top Page:
<textarea id="StyleProxy" style="display:none;visibility:hidden;">
// CSS loaded inline here
var _SCRIPTS = null;
var _STYLES = null;
// use jQuery to run the JS once HTML is loaded
top.window._SCRIPTS = Ext.get("ScriptProxy").dom.innerHTML.toString();
top.window._STYLES = Ext.get("StyleProxy").dom.innerHTML.toString();
// create an iframe and add to the DOM
// this should be always be done after the variables
// for the JS and CSS are filled
$main_container = Ext.get("iframe_main_container");
var $iframe_nav = Ext.DomHelper.append (
So – should you use this technique? That depends on your application and your preference. The objective of this post was to simply introduce a concept that was new to me, and I am sure is new to many others. It is simply another technique to add to a developers toolbox.
PS: I am very interested what other developers think of this technique and what they perceive as the advantages and disadvantages. I also have a question – does this technique expose any security holes I should be aware of?