Latest Articles:
Committee Members:
Alert Email
Get a short email alert whenever a new entry is published.
Confidential, secure it's piece of cake to keep uptodate.
Optimize your Javascript with CFJAVASCRIPT
Unless you're still stuck in the web dark ages, you have to try pretty hard to develop a Web application these days without using Javascript at some point. Whether you are developing libraries yourself or simply pulling in other libraries, Javascript adds a lot of dimensions to an ordinary web page.
As handy as it is, Javascript files are often not optimized for delivery to the browser. They often contain lots of white space that could be compressed or removed. But compressing it makes it harder to develop and debug, so most people generally just leave them as they are, and don't give a moments thought to it.
For every <script src=""> tag you place in your web page, you generate another request on your server. It is not uncommon to see many of these individual script blocks dotted around as you load in the various libraries, all placing extra load and management on your already stressed server.
CFJAVASCRIPT was designed to make this problem go away and manage all the logistics of both optimized delivery but also on-the-fly compression and caching.
Instead of specifying the <script src=""> blocks yourself, gather up all the paths to your Javascript files and place them in a CFML array. Then put in the CFJAVASCRIPT where you wish to load them in the page and leave the rest to OpenBD.
<html> <head> <cfset jsFiles = ArrayNew(1)> <cfset ArrayAppend( jsFiles, "/common/jquery.js" )> <cfset ArrayAppend( jsFiles, "/common/jquery.autocomplete.js" )> <cfjavascript src="#jsfiles#" minimize="true"> </head> <body></body> </html>
OpenBD will then pull together all these Javascript files, and put them together in a single file, one after another. Additional if you specify it, the tag will then compress all these Javascript files down to a very small version.
But the help doesn't stop there. OpenBD will then ask the browser to aggressively cache this Javascript file ensuring it doesn't come asking for it every time. Should any of the files change on the file system though, OpenBD will rebuild the compressed file and redeliver it to the browser.
The sort of savings you can expect are dramatic. For example, it can take the standard JQuery1.3 build of 115KB and reduce it to 55KB. Naturally you can already download and use an optimized JQuery version, but for your own Javascript files, you can continue to develop in their verbose format but let OpenBD manage the optimization for you on the fly.
This tag is the first in many of our upcoming additions that bridge the gap between Javascript and CFML, including the CFAJAXPROXY. It is presently available as part of the nightly builds, but will be rolled into the 1.0.2 release.
Comments (16)
is this method will work if i'm using www.yourjavascript.com to host my javascript files?
* Maybe support a comma-delimited list of src files as well? * What about optionally putting the script tag into the HTML head section? * What happens if I include /js/prototype.js in two different cfjavascript tags? Do I end up with one merged JS file or two of them - both with the prototype.js code in them? * Maybe support code wrapped within the tag (without a src attribute) to be written to the HTML head?
Just a bunch of thoughts to make this tag more powerful.Combine requires a jar file to be installed. I don't think most shared hosting ISPs would do that.
http://combine.riaforge.org/
Here's another one for you.@StefanV it will be changed every time it detects a change in any of the source files. It is highly optimized to ensure minimum CPU cycles to compute, that is why it is done once and aggressively cached.
Looks interesting. I use a similar solution, but I manually run the my cf_minfy when I change the source in fear of heavy CPU load (approx 2M pageviews/day). Is the name of the resulting js file a UUID or something that will change for each rebuild? How does it track changes in the source files? Examining files do cost some CPU cycles.
That is tight.
@ Alan Williamson http://www.webveteran.com/blog/index.php/web-related-software/tinymce-cf-gzip/tinymce-cf-gzip-10/ I have it working as a live demo. 310KB down to 76KB.
Why force the creation of an array? A linebreak delmited list would be nice...
<cfjavascript minimize="true"> /common/jquery.js /common/jquery.autocomplete.js </cfjavascript>This sounds identical to Aaron Lynch's <cf_scriptalizer>, which also combines, minifies, and rebuilds on changes.
http://ajlcom.instantspot.com/blog/2008/07/09/Problem-WAY-too-many-javascript-files-Solution-cfscriptalizer @Raul Riera - the site http://www.scriptalizer.com will do the CSS as well.@"Freelance Web Develpoer" aah yes TinyMCE would really benefit from this tag, as it loads a huge amount of JS files upon startup!
You guys are killing me haha! This morning I released the same function, but just for TinyMCE - which is through AJAX. So I was going to write a CFC like this next. AUGH. I still will, for the folks not using BD.
Awesome work BTW.Sounds like a great idea, I developed something for our in-house framework using coldspring. but having a tag makes sense. great idea
;) stranger things have been known to happen!
I guess cfstylesheet is coming then? ;)
No, it will only work for javascript files that are hosted locally to the webserver