Why JS scripts are run in the wrong order

Question

In my web app, you can open an iframe which load a report (similar to an excel spreadsheet). The reports open fine for a while (15-20 times). At some point, I will start always getting JS errors about kendo being undefined and I occasionally get "Insufficient memory" errors in IE console.

As you can see in my HTML , the kendo.all.min.js file comes before the kendo.sage.custom.min.js file.

<script type="text/javascript" src="/Scripts/kendo/web/kendo.all.min.js"></script>
<script type="text/javascript" src="/Scripts/kendo/kendo.sage.custom.min.js"></script>

When all goes well, fiddler shows

But when i start getting errors, I can see the following :

So for some reason, after using my app for a while, the scripts will load in the wrong order.

So I added console.log("all") and console.log("sage")at the top of each script. When working normally, I can see in order "all" and then "sage", but when I start getting the kendo undefined error, all i see is the "sage" log, never the "all".

We are using ASP.NET MVC and the scripts are in our layout file in the head section.

What could cause the scripts to be run in the wrong order ?

Answer 1

Are all the script in the head section? If not then move the custom to the footer and load the custom script after the page has loaded, this will ensure that the custom file loads after the main file

$(window).load(function(){
var element = document.createElement("script");
element.src = "/Scripts/kendo/kendo.sage.custom.min.js";
document.body.appendChild(element);
});

And for your answer, refer to this link load and execute order of scripts