Mark Mintoff My superpower is common sense


Combining JavaScript or CSS Files

I spent some time today, mulling over the evidently dismal state which lies in future Web Development. Already we see the horrors of script references upon script references as business-folk and neophyte developers alike, cram component after component after component into the same page. Buzz words like "Web 2.0", "SEO" and "value-added" being thrown around the room like the flaccid, empty whores that they are. Needless to say, I fell into a depression, realizing that there is no way to avoid these things. Forever shall pages be polluted by script references upon script references. Forever shall pages take forever to load and forever shall management complain (and rightly so) about the speed of a website. But should it remain that way? "No" says I; emphatically. Hence I decided that something needed to be done. I trust we all know about GZip and Minification. If not, please do go and educate yourself about these little things. They are quite useful. In addition to those two techniques, there is also the idea of cramming all your scripts and all your css into singular files. Why? Well clearly this is done in order to reduce the number of files requested from the server. What this achieves is that the page will load quicker. What this also achieves is further messy coding. All scripts in one single file? Really? That doesn't sit too well with me I'm afraid. I like having things organized. Folder structure and independent files are key to me maintaining the vestiges of my sanity in a world gone mad. But the results of such a technique are clear, evident, obvious. But I want the best of both worlds. And as an ASP.Net programmer, I figured out how to do this within the space of 10 minutes and decided to share it with you. I'm 100% sure this functionality may be replicated successfully in PHP and I will be making an effort to do so within the following couple of days. So, what is this technique I thought of? Imagine if you will, if the server were to read the files you wish to serve and append everything into a single file and serve that, instead of serving, say...10 JavaScript files. That's pretty much the principle of it all.
First things first. This is coded in ASP.Net and what I will be showing you is a hard-coded version. You should definitely make this data-driven. Why? Because it's god damn cool. And I love cool things. Start out by adding a Generic Handler (and ashx file) to your solution. I called mine "IncludeHandler.ashx". Next, code it up so that it looks something like this: Next, make sure you have all the files listed in the "files" generic List<string>. For my "test.js", I entered the following script: Include the following into the <head> tag of your page: Now, run it. Result: If you're using a hip browser like Google Chrome you can go take a look through the "View Source" and click on the link to "IncludeHandler.ashx?type=js". Otherwise, you can just type in the link yourself in the address bar. What you'll see is that all the code from your script files has been tossed into one response. Let's do a comparative benchmark test using Chrome's load speed graph. The first candidate for this test will be the standard way of doing it; ie: 3 script references, ie: The result: Now, if we do the same thing, except with the previous script reference, ie: 1 script reference, ie: The result: So. 1670 ms -vs- 569 ms. An entire 1.1 seconds shaved off. Not bad! The advantages here are evident. Not only did we manage to toss in all our scripts into a single file, but we maintained an organized file structure which won't make us tear out what little hair we have left. The same advantages apply to StyleSheets. Don't believe me? Try it! I do believe it's worth your time. NOTE: Before nose-diving into this, read the following: here.
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
Comments (6) Trackbacks (2)
  1. very nice. When i have some spare time im going to have a good look through this. Looking forward to seeing your php implimentation. Drop me a mail would be appreciated. Frank

  2. This is awesome dude :D … keep up the good work :D

  3. Man you never cease to amaze me dude! Fricking brilliant!

Cancel reply