I am working on an enterprise application development in ASP.NET MVC3. Of-course I have different master layouts and multiple views.

My concerns

• Including all js/css files in master layout might affect the performance of the page
• Including the files in views (where it is required) are creating duplicate references (kick-off jquery/other libraries)
• More the references, the more the back&forth requests between client and server - which in turn affect the performance of the output page

My Thoughts

1. Create a custom list of required resources and store it in ViewBag. Let the master layout refer this object to include the js/css files
2. Or add the link referring an action with some key (an unique value to identify the page being rendered) and dynamically generate an output with all required resources as a single response. And cache the output (inmem/staticfile) with the unique key for succeeding requests. A kind of custom resource bundling.

Please share your ideas, any thoughts and suggestions are wele!

EDIT: Sep.17.2012

Below answers are more talking about optimization techniques in web application development world - appreciating those answers.

I would like to discuss from an architectural perspective, focusing on creating a dynamic resource collection required by the page being rendered.

For example, in specific views I would like to use jQuery UI which requires jquery-ui-1.8.11.min.js, and in certain views I would like to use MVC3 ajax which requires MicrosoftMvcAjax.js and jquery.unobtrusive-ajax.min.js

I don't want to include permanent reference in master layout, which will result in loading these js for all views. Rather I would like to include the js files dynamic during runtime.

Hope this might have added clarity!

Thanks for the help - Vinod

I am working on an enterprise application development in ASP.NET MVC3. Of-course I have different master layouts and multiple views.

My concerns

• Including all js/css files in master layout might affect the performance of the page
• Including the files in views (where it is required) are creating duplicate references (kick-off jquery/other libraries)
• More the references, the more the back&forth requests between client and server - which in turn affect the performance of the output page

My Thoughts

1. Create a custom list of required resources and store it in ViewBag. Let the master layout refer this object to include the js/css files
2. Or add the link referring an action with some key (an unique value to identify the page being rendered) and dynamically generate an output with all required resources as a single response. And cache the output (inmem/staticfile) with the unique key for succeeding requests. A kind of custom resource bundling.

Please share your ideas, any thoughts and suggestions are wele!

EDIT: Sep.17.2012

Below answers are more talking about optimization techniques in web application development world - appreciating those answers.

I would like to discuss from an architectural perspective, focusing on creating a dynamic resource collection required by the page being rendered.

For example, in specific views I would like to use jQuery UI which requires jquery-ui-1.8.11.min.js, and in certain views I would like to use MVC3 ajax which requires MicrosoftMvcAjax.js and jquery.unobtrusive-ajax.min.js

I don't want to include permanent reference in master layout, which will result in loading these js for all views. Rather I would like to include the js files dynamic during runtime.

Hope this might have added clarity!

Thanks for the help - Vinod

• javascript
• html
• css
• asp-mvc
• razor

• Include the libraries in the master layout pages. This way you don't have to worry about including just where it is required and can add any functionality using that framework to any page within the site. – Kyle Commented Aug 28, 2012 at 7:52
• Caching... have you thinked about how it is done? Good caching may solve your concerns. – Sampo Sarrala Commented Aug 28, 2012 at 7:55
• Kyle, thanks for you reply. But that is my first concern. I don't want to add all libraries in master layout - a kind of performance concern. – vinodpthmn Commented Aug 28, 2012 at 8:14
• How many libraries are you planning to add? You need to look into caching of the library, as suggested by Sampo. Including it on just some pages isn't a wise way forward. – Kyle Commented Aug 28, 2012 at 8:19
• Common libs are added in master layout. Still certain page requires exclusive libraries. For example if a page requires cookie handling or drag-n-drop feature, I would wish to include those js files. – vinodpthmn Commented Aug 28, 2012 at 12:46

1 Answer 1

You need to think about reducing your download size first:

• putting all your js and css into as few files as possible. This is because a client can only open 2 HTTP channels (most browsers now support more, info here) at any one time, all file downloads after this are queued until the previous ones finish downloading.
• minify your js and css.

Once you've got this down to a reasonable size then you can think about the above. You want to download, the smallest amount of content upfront, so in the master. This will improve performance because then the client can cache it. Caching is a good thing, this stops the client having to request the js and css every time they visit a page on your site.

You might also want to think about applying HTTP expiry headers.

Yahoo do a good site on lots of these ideas: http://developer.yahoo./performance/rules.html

Also don't put your js in the viewbag. This is unnecessary overhead and load on the server. Just add a reference in your pages!

MVC4 now supports bundling