YUI’s Combo Handler CDN Service

July 17, 2008 10:33 am | 3 Comments

Eric Miraglia wrote a post yesterday called Combo Handler Service Available for Yahoo-hosted JS. One of the advantages of YUI over other JavaScript frameworks is its à la carte capabilities. Developers can choose just the parts they want, rather than being saddled with the whole kit and caboodle. It’s great to download fewer bytes, but choosing a subset of modules results in downloading multiple external scripts, something that’s bad for performance and costs YSlow points. That’s where Eric’s post comes in.

The Combo Handler Service lets developers choose a customized subset of modules and have them served as a single HTTP request from Yahoo!’s worldwide CDN for faster delivery. Each module (file) is listed in the querystring. As an example, Eric shows that loading the YUI Rich Text Editor the old way would require downloading six separate scripts:

<script src=”http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js”>
</script>
<script src=”http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js”>
</script>
<script src=”http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js”>
</script>
<script src=”http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js””>
</script>
<script src=”http://yui.yahooapis.com/2.5.2/build/button/button-min.js”>
</script>
<script src=”http://yui.yahooapis.com/2.5.2/build/editor/editor-beta-min.js”>
</script>

This is reduced to a single HTTP request by using the Combo Handler:

<script src=”http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&
2.5.2/build/container/container_core-min.js&2.5.2/build/menu/menu-min.js&
2.5.2/build/element/element-beta-min.js&2.5.2/build/button/button-min.js&
2.5.2/build/editor/editor-beta-min.js”>
</script>

It’s important that developers using Combo Handler pay particular attention that they get the dependency order correct. I created the YUI Combo Handler: preserving order test page to show what happens if prerequisites are listed incorrectly. In this page instead of putting editor-beta-min.js as the last querystring parameter, I make it the first parameter. Not surprisingly, the page produces JavaScript errors. It would be great if Combo Handler ensured that the response had all the necessary prerequisites in the right order. With this enhancement the single request would be much simpler:

<script src=”http://yui.yahooapis.com/combo?2.5.2/build/editor/editor-beta-min.js”>
</script>

This is a great announcement. Web developers using YUI can now get a customized rollup hosted on Yahoo!’s CDN! This is the best of all worlds – reduced download size, fewer HTTP requests, and CDN hosting. I encourage other JavaScript frameworks to adopt YUI’s à la carte flexibility. Perhaps Google Ajax Libraries could then support features to serve up customized builds similar to what Combo Handler does. Well done.

3 Responses to YUI’s Combo Handler CDN Service

  1. Eric Miraglia | 17-Jul-08 at 11:30 am | Permalink |

    @Steve — That request has come in on the YUIBlog post as well — having the combo handler itself incorporate the functionality of a Loader engine that understands the YUI dependency tree. That’s a good idea, totally worth doing. It would provide shorter URLs, too, which shave bytes on the HTML page loading the combo-handled resource. For now, though, we’re providing the configuration tool (http://developer.yahoo.com/yui/articles/hosting ) to help folks keep dependencies well sorted and we’ll be building combo-handler syntax into loaders on the server and client-side in the future, hopefully moving away from situations where users are hand-coding dependency lists. -Eric

  2. Mathias Bynens | 27-Jan-11 at 8:57 am | Permalink |

    You’d probably want to encode the ampersands properly in your code example, i.e.

    <script src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&amp;
    2.5.2/build/container/container_core-min.js&amp;2.5.2/build/menu/menu-min.js&amp;
    2.5.2/build/element/element-beta-min.js&amp;2.5.2/build/button/button-min.js&amp;
    2.5.2/build/editor/editor-beta-min.js"></script>

  3. Steve Webster | 27-Jan-11 at 9:43 am | Permalink |

    We do this for CSS on our performance-critical pages, using rel=”prefetch” to pull in the individual CSS files after page load so as not to hurt inter-page performance. (Well, we did until I bumped into the Chrome bug: http://statichtml.com/2011/link-prefetching-broken-in-chrome.html)

    Anyway, the one caveat I’d have to recommending using this technique for CSS is that Firefox uses the CSS file’s URL as the Referer header when requesting any images referred to in the CSS file. When you have such verbose URLs, this can make the difference between one request packet and two (or more, depending on your URLs). The motivation here is the same as the recommendation to move static assets to a cookie-less domain.