Defer loading of Javascript approach in asp.net mvc

Question

I'm going to implement Defer loading of JavaScript approach because as per current structure JavaScript is being called in <head> element which is taking long response time. So I just want to add this JavaScript after complete DOM load. Here is code in cshtml file

Layout.cshtml

<head>
@Scripts.Render("~/bundles/javascript")
</head>

Rendered html view source:

<head>
    <script src="/bundles/javascript?v=abcdefghikeriotterpoggkjs-fskdf"></script>
</head>

Here is what I'm planning to do: I will remove the @Scripts.Render("~/bundles/javascript") from <head> section. Then copy the src value from rendered view source and use given below

<script type="text/javascript">
    // Add a script element as a child of the body
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "/bundles/javascript?v=abcdefghikeriotterpoggkjs-fskdf";
        document.body.appendChild(element);
    }
    // Check for browser support of event handling capability
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else
        window.onload = downloadJSAtOnload;
</script>

Am I doing correct? My doubt is Does this value v=abcdefghikeriotterpoggkjs-fskdf throughout the application remain same or it can be changed. If it remain same then I think there won't be any issue. Please suggest.

Why not just move `@Scripts.Render("~/bundles/javascript")` to immediately before the closing `
` tag? — , Nov 26 '16 at 06:27
I thought the same earlier but after reading this article I decided for this approach: https://varvy.com/pagespeed/defer-loading-javascript.html — Sukhjeevan, Nov 26 '16 at 06:32
This is incorrect approach to defer loading JS. As suggested by Stephen, use JS from body. You can use required flag for JavaScript section or use AMD js to do lazy loading of JavaScript module — Pratik Gaikwad, Nov 26 '16 at 06:50
Have you considered the `async` attribute of the script tag instead? https://developer.mozilla.org/en/docs/Web/HTML/Element/script e.g. `` — Aaron Hudon, Nov 26 '16 at 07:01
@Patrik: Did you mean that approach suggested by Patrick Sexton in given link is incorrect? What do you mean by using required flag for JavaScript section? — Sukhjeevan, Nov 26 '16 at 17:06
@Sukhi please see [this SO](http://stackoverflow.com/questions/14284707/how-to-add-script-src-inside-a-view-when-using-layout) answer. This is one way, the other is to use AMD js and load asynchronously. But that is very expensive for just one call. So better approach is to use one mentioned in the above SO answer. — Pratik Gaikwad, Nov 26 '16 at 20:29
@PratikGaikwad this SO also would be helpful for me but it's different case where we have to execute JS code if particular view is getting called in Layout.cshtml...but I want to know if `v=abcdefghikeriotterpoggkjs-fskdf` will remain same in future or it can be changed. and I want to load javascripts after page load because few of third party JS taking long time to load — Sukhjeevan, Nov 27 '16 at 06:20
You can use @Scripts.Url("~/bundles/javascript") for get bundle URL. — Can Ürek, Jan 25 '18 at 13:17

Defer loading of Javascript approach in asp.net mvc

0 Answers0