推迟在asp.net MVC中加载javascript

Question

我正在寻找优化在MVC项目中加载较大的javascript文件的方式。 我已经在使用捆绑和缩小功能，但是我真的只想在HTML和CSS加载后再加载其中的一些。 我正在研究这种方法：

https://varvy.com/pagespeed/defer-loading-javascript.html

通过这种方法，在加载正文之后，在load / onload事件中使用javascript将脚本标签注入。 我的问题是，我想同时使用框架提供的捆绑和缩小功能，但我还没有找到一种好的方法。

我只是想知道是否有人在MVC项目中成功使用了这种方法，以及是否可能已经有一个库（在Nuget上或其他方式上）来简化此过程。

编辑：这是我目前的解决方案，但我不确定我是否喜欢它。

由于捆绑框架可以根据您是否在调试中运行而返回单个脚本标签或它们的列表，因此我们需要提取这些标签的源值。 为此，我创建了一个静态助手。

public static string ExtactFromScriptBundle(string aBundle)
    {
        List<string> returnValue = new List<string>();

        var jQueryString = Scripts.Render(aBundle).ToHtmlString();

        var reg = new Regex("\".*?\"");

        var matches = reg.Matches(jQueryString);
        foreach (var match in matches)
        {
            returnValue.Add(match.ToString().Replace("\"", ""));
        }

        return Json.Encode(returnValue);
    }

比起_layout.cshtml，您可以在标记之前插入一个类似于以下内容的代码块：

<script>
    function downloadJSAtOnload() {
     createScripElementsFromArray(@Html.Raw(ScriptHelper.ExtactFromScriptBundle("~/bundles/jquery")));
createScripElementsFromArray(@Html.Raw(ScriptHelper.ExtactFromScriptBundle("~/bundles/bootstrap")));
    }

    function createScripElementsFromArray(fileNameList) {
        var arrayLength = fileNameList.length;
        for (var i = 0; i < arrayLength; i++) {
            createScripElement(fileNameList[i]);
        }
    }

    function createScripElement(fileName) {
        var element = document.createElement("script");
        element.src = fileName;
        document.body.appendChild(element);
        console.log(fileName + " was loaded");
    }

    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

在我看来，这是一个小技巧，因为我只是为了分析输出而渲染捆绑包，但是我想我也可以缓存这些输出以进一步优化页面渲染。

Answer 1

通过Occam的Razor ，最好的解决方案是使用defer属性...

<script src='myJavaScriptFile.js' defer></script>

它得到很好的支持 。

如果要在ASP.NET MVC中使用它，请执行以下操作：

创建一个新的Razor命令，如下所示：

public static class Scripts
{
    public static IHtmlString RenderDeferred(params string[] paths)
    {
        return Scripts.RenderFormat(@"<script src='{0}' defer></script>", paths);
    }
}

然后像这样使用它：

@Scripts.RenderDeferred("~/myBundle/myJavaScriptBundle")

Answer 2

一种选择是使用jquery加载外部脚本。 您最初会对jquery本身有依赖性，但是jquery的重量很轻。

然后，您将拥有：

$(document).ready(function(){

    //At this point, the HTML/CSS has already been loaded and rendered.

    //load external scripts
    $.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
       console.log( data ); // Data returned
       console.log( textStatus ); // Success
       console.log( jqxhr.status ); // 200
       console.log( "Load was performed." );
    });

});

jQuery文档： https : //api.jquery.com/jquery.getscript/