1

In my project each page has a bunch of dependent Javascript and Css. Whilst developing I just dumped this code right into the page but now I'm looking to clean it up...

it appears that the general approach out there is to package all the Javascript/CSS for an application into two big files that get minimised.

This approach has the benefit that it reduces bandwidth since all the front-end code gets pulled in just once from the server... however, I'm concerned I will be increasing the memory footprint of the application by defining a whole ton of functions for each page that I don't actually need - which is why I had them on a per-page basis to begin with.

is that something anyone else cares about or is there some way to manage this issue?

yes, I have thought of doing conditional function creation since I need to run code conditionally for each page anyway - though that starts to get a bit hackish in my view.

also, is there much cost to defining a whole ton of Css that is never used?

Improve this question

4 Answers 4

Reset to default
1

Serving the javascript/CSS in one big hit for the application, allows the browser to cache all it needs for all your pages. If the standard use case for your site is that users will stay and navigate around for a while then this is a good option to use.

If, however, you wish your landing page to load quickly, since there is a chance that the user will navigate away, consider only serving the CSS/javascript required for this page.

In terms of a performance overhead of a large CSS file - there will be none that is noticeable. All modern browsers are highly optimised for applying styles.

As for your javascript - try not to use conditional function creation, conditional namespace creation is acceptable and required, but your functions should be declared only in one place.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

you make a good point. my project is a web app, but I have a public-facing side... which means I have both use-cases you refer to. So as for the penalty of loading up large numbers of functions into memory that are never used, if that is generally considered as negligible perhaps I'll just go the easy route and bunch it all up...
1

The biggest thing you can do for bandwidth is make sure your server is compressing output. Any static document type should be compressed (html, js, css, etc.).

For instance the jQuery Core goes from approx. 90KB to 30KB only because of the compressed output the server is sending to browsers.

If you take into account the compression, then you have to create some mammoth custom JS includes to really need to split-up your JS files.

I really like minifying and obfuscating my code because I can put my documentation right into the un-minified version and then the minification process removes all the comments for the production environment.

Improve this answer

2 Comments

thanks for your reply - I'm aware of HTTP compression. my real concern here is for memory footprint
@ekkis Even mobile devices (Android, iOS, Blackberry) allow 1MB files to be cached. If you are talking about less than 100KB of code (before compression) then I wouldn't worry. A user is going to download it all if they view each page anyway; if you use a single include then each subsequent page will load faster.
0

One approach would be to have all the shared javascript minified and compressed into one file and served out on each page. Then the page-specific javascript can be compressed/minified to its own files (although I would consider putting any very common page's javascript into the main javascript file).

I've always been in the habit of compressing/minifying all of the CSS into one file, rather than separate files for each page. This is because some of the page-specific files can be very small, and ideally we share as much css across the site as possible.

Like Jasper mentioned the most important thing would be to make sure that your sever is GZIPing the static resources (such as javascript and css).

Improve this answer

1 Comment

yes... having the shared code in the <head> and everything specific to each page loaded by that page is what I'm doing now... what I'm debating is whether to throw it all into a big file, particularly with respect to the memory utilisation increase I may see by defining a ton of objects (functions, etc.) that may not be used for that page. If the answer is that memory constraints are not typically an issue then it would be simpler to throw everything into a single file... methinks
0

If you have a lot of javascript code you can take a look on asynchronous loading of js files.

Some large project like ExtJs or Qooxdoo have build in loaders to load only required code, but here is a lot of libs which simplify this, and you can use in your project (e.g. head.js, LAB.js).

Thanks to them you can build application which loads only necessary files, not whole javascript code which in case of big apps can be a heavy stuff for browser.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.