Is dynamically loading CSS and Javascript Hackish or Good Practice?

Question

I don't want to start a flame war, but I'm curious what people think.

The benefits I can think of for dynamically loading:

• Load files as you need them. Faster load times
• You can create widgets that hook into your page with just linking to the widget and the widget loads all its files

Some (possible) negatives:

• Loading stuff in the head after it loads (am I just scared of doing that? :-P)
• Ensuring that the code is evaluated.
• Javascript being turned off.

Let me know what you think!

Thanks! Matt

Answer 1

Does it really take up that much bandwidth? I consider the smallest part of any web application I've developed to be JavaScript / CSS. Plus, the browser caches it anyway, it's only the first hit that really counts. There's no point adding complexity to defeat such a small issue.

EDIT

Building on from my comment, there's some really good articles around on how you should develop using JavaScript. The general idea is to develop your application in a layered manner. Javascript just sits on the top, but it's not fundamental to the functioning of your website. With Javascript disabled everything should work fine. Always develop as if the user doesn't have Javascript enabled (some users disable it purely for performance reasons). It's good practice.

Answer 2

I generally compress all my CSS into one file and all my JavaScript required to use the page into another (using YUICompressor.) Then I load those two files statically in the HTML document. It'll show the content as early as possible to your users (even if they might not get a nice loading indicator while waiting), and it'll use less server resources.

If I have JavaScript/other content that will be required after user interaction, I load that dynamically. I haven't really worked with many projects that benefited from dynamic loading, but here's one I did for my JavaScript libraries: "Blixt's JavaScript Realm" (but the reason it has so much dynamic loading is because the whole purpose of that project was to make it as JavaScript-ish as possible...)

Answer 3

on a very large popular site you want to minimise the total number of http requests, even small ones. Amazon and Ebay go great lengths to do this and even use techniques called css image sprites to load all thier front page images as one giant gif or jpeg and then use CSS to slice them up, all to save the overhead of each HTTP GET request, each request avoided can save as a few hundred bytes.