Relocating JavaScript to bottom of page in ASP.NET MVC

Other Questions JavaScript
1

I’m working on an ASP.NET MVC project with lots of partial views and @section scripts blocks. Right now, our main JavaScript file (global.js) is in the <head>, which slows down page loading. I want to move it to the end of the <body>, but this causes problems because the partial views need it.

Here’s what the HTML looks like now:

<html>
  <head>
    <title>My Page</title>
    <!-- Other stuff -->
  </head>
  <body>
    <!-- Partial view -->
    <div id="PartialView">Content</div>
    <script>
      $(function() {
        AppFunctions.doSomething();
      });
    </script>

    <script src="global.js"></script>
  </body>
</html>

And global.js has:

var AppFunctions = {};
AppFunctions.doSomething = function() {
  console.log("Function called!");
}

Is there a way to put global.js at the end of <body> while still letting the earlier scripts use it? Maybe some kind of custom event I could use? Any ideas would be great!

2

I’ve faced a similar challenge in one of my MVC projects. Here’s what worked for me:

Instead of moving the entire global.js to the bottom, I split it into two parts. The first part, containing just the essential function declarations and object definitions, I kept in the head. The second part, with the actual function implementations, I moved to the bottom of the body.

Something like this:

In the head:

var AppFunctions = {
  doSomething: function() {}
};

At the bottom of the body:

AppFunctions.doSomething = function() {
  console.log('Function called!');
};

This way, the core structure is available early, allowing partial views to reference it, while the bulk of the code loads at the end. It significantly improved page load times without breaking functionality.

Another approach I’ve used is to employ a script loader like RequireJS. It allows you to define dependencies and load scripts asynchronously, which can be a game-changer for complex projects with many interdependent scripts.

3

Have you considered using a script loader like LABjs or HeadJS? These tools can help you manage script loading more efficiently. They allow you to load scripts asynchronously while still maintaining dependency order.

Here’s a basic example using LABjs:

<script src="LAB.min.js"></script>
<script>
$LAB
.script("global.js").wait()
.script("other-script.js")
.wait(function(){
    // All scripts are loaded, now you can run your initialization code
    AppFunctions.doSomething();
});
</script>

This approach keeps your global.js at the bottom of the body, improves page load time, and ensures that dependent scripts wait for global.js to load before executing. It’s been a game-changer for several of my projects with complex script dependencies.

4

hey, have u tried using defer attribute on ur script tag? it’s pretty handy. like this:

this way, the script loads in the background n executes when the page is done parsing. might solve ur issue without needing to move stuff around. worked for me in a similar situation!