javascript segregation/performance in an ASP.NET MVC Application

Question

We have an MVC 4 web application with a number of areas.

There is a main layout view that is used by all the pages on the site and it contains all of the CSS includes, the render body tag, then all the JavaScript libraries.

<head>
<link rel="stylesheet" media="screen" href="~/Content/jquery-ui-1.10.3.custom.min.css" />
..
</head
<body>
    <div id="main-content">@RenderBody()</div>
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
    ..   
</body>

The JavaScript consists of common libraries such as jquery, jqueryui and plug-ins. There is also a single JavaScript file that contains the custom code for the whole site

Since there is only 1 large JavaScript file with thousands of lines, code routines are initialized by checking for the existence of a particular DOM element to decide if it proceeds.

runExample = function() {
    if ($(".Example").length > 0){
      // execute code
    }
}
..
runExample();

This is of course problematic since there is a great deal of script included for all files, while there is code that applies to all pages, most of the code only applies to certain areas or pages.

Is there a better way to split the JavaScript up for the site? Keep in mind it is the custom code that is conditional, not necessarily the plug ins
Even if there way a way to create a JavaScript file for each area, how would that be referenced within the main layout?
Is it best to load the JavaScript include files at the end of the include file?
What is the effect of minification on performance and would it benefit the custom code file?

Any advice would be appreciated.

I'm not entirely sure of how you would accomplish this with MVC, but basically when you want to include a specific js file for a specific page, instead of using <script>, you would add it to some global array of includes that then get added to the bottom of the page, after including jQuery core. Or, you can take the easy way out and include jquery core in the header, keeping things simple and easy to maintain. — user400654
– user400654, Commented Nov 4, 2013 at 20:49
"Is it best to load the JavaScript include files at the end of the include file?" For performance, yes, but sometimes maintainability becomes more important than performance, at which point it would be better to place it in the header. Just depends on the requirements of your project. — user400654
– user400654, Commented Nov 4, 2013 at 20:54

Chris Pratt · Accepted Answer · 2013-11-04 22:15:29Z

1

First, use bundling. Give BundleConfig.cs under the App_Start folder in your project a gander. By simply minifying and bundling all your JS together, it's sometimes inconsequential that certain code is not actually being used on the current page (the savings you gain from having one cached JS file that every page uses is sometimes better than loading a new different bit of JS on each page.)

If you need more fine grained control, you can use something like Require.js. You essentially write your JS in modules that depend on other modules to run (all of your plugins, jQuery, etc. become "modules" in this scenario). You'll need to manually minify and combine your JS as much as logically possible, but this will allow you to integrate various scripts together without having to worry about load order and missing dependencies.

As a side note, I would respectfully disagree with Kevin B. If maintainability dictates that your JS has to be in the head, I would say that's a symptom of a larger problem with your code design. The only good reason to add JS in the head is when it's essential that the JS be run before the page is rendered. A good example is Modernizr, which for one adds classes to the html element to allow you to specify different styles and such depending on whether certain features are available in the user's browser or in the case of IE, what version the user is running. Without loading in the head, your style would changed after page load leading to flashes of unstyled content and such. Other than situations like these, all JS should go before the closing body tag, as JS is blocking: the browser will completely stop what it's doing and all rendering of the page, and run the script completely before continuing. Too much of this in the head, and your users stare at a blank page for far too long.

Also all script (and CSS for that matter) should be minified. There's no good reason not to, and the difference in bytes the user has to download is often quite dramatic. Especially in this day and age of mobile-everything and far-too-limited data plans, every byte truly does count.

edited Nov 4, 2013 at 22:15

answered Nov 4, 2013 at 22:06

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

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

2 Comments

user1838662 Over a year ago

Lets say the JavaScript was split into 'modules', I am still wondering how the code responsible for the loading would be aware of when to use the correct module, based on whatever area/page the user is currently viewing?

Chris Pratt Over a year ago

You specify the dependencies for your module and require.js (or similar) makes sure those dependencies are satisfied before your module runs. Give requirejs.org/docs/start.html a read if you're interested.

Collectives™ on Stack Overflow

javascript segregation/performance in an ASP.NET MVC Application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related