将 Ajax 工具包脚本移动到页面底部答案

【问题标题】：Moving Ajax toolkit scripts to the bottom of the page将 Ajax 工具包脚本移动到页面底部
【发布时间】：2016-09-11 23:56:34
【问题描述】：

我目前正在努力提高我们的一个网站的 PageSpeed 洞察力得分，目前我们在 90 附近徘徊，如果可能的话，我们希望能打入 90 年代中期。

我们遇到的问题之一是 Ajax 工具包脚本管理器在页面顶部生成其脚本，谷歌将此标记为“应该修复”问题并抱怨脚本处于渲染阻塞状态，应移动到页面底部或异步加载或通过defer 属性加载。

我正在使用以下内容将我们的脚本合并到一个 .js 文件中以最小化请求：

<ajaxToolkit:ToolkitScriptManager ID="manScript" LoadScriptsBeforeUI="false" runat="server" EnableViewState="false" ScriptMode="Release">

    <CompositeScript ScriptMode="Release" Path="/CMSGlobalFiles/Js/combinedajax.min.js">
        <Scripts>
            <asp:ScriptReference Name="WebForms.js" Path="/CMSGlobalFiles/Js/aspnet/WebForms.js" Assembly="System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
            <asp:ScriptReference Name="MicrosoftAjax.js" Path="/CMSGlobalFiles/Js/aspnet/MicrosoftAjax.js"  />
            <asp:ScriptReference Name="MicrosoftAjaxWebForms.js" Path="/CMSGlobalFiles/Js/aspnet/MicrosoftAjaxWebForms.js" />
        </Scripts>
    </CompositeScript>

</ajaxToolkit:ToolkitScriptManager>

有没有办法在获得输出的CompositeScript 标记上设置defer 或async？或任何其他方式将其移至页面底部？

我尝试了以下方法：

protected override void Render(HtmlTextWriter writer)
{
    StringWriter output = new StringWriter();
    base.Render(new HtmlTextWriter(output));

    string outputAsString = output.ToString();

    if(outputAsString.Contains("<script src=\"/CMSGlobalFiles/Js/combinedajax.min.js\" type=\"text/javascript\"></script>"))
    {
        outputAsString = outputAsString.Replace("<script src=\"/CMSGlobalFiles/Js/combinedajax.min.js\" type=\"text/javascript\"></script>", string.Empty);
    }

    writer.Write(outputAsString);
}

然后在页面底部手动包含对脚本的引用：

<script type="text/javascript">
    function downloadJSAtOnload() {
        createScript("/CMSGlobalFiles/Js/combinedajax.min.js?v=1");
        createScript("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js");
        createScript("/cmsglobalfiles/js/vendor/modernizr.js");
        createScript("/cmsglobalfiles/js/main.min.js");
        createScript("/cmsglobalfiles/js/vendor/wow.min.js");
    }

    function createScript(path) {
        var element = document.createElement("script");
        element.src = path;
        document.body.appendChild(element);
    }

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

这会删除生成的复合脚本并在结束 body 标记之前创建一个新脚本，这使我们的分数达到了 95 但我认为加载得太晚了，因为我们遇到了很多控制台错误：

ReferenceError: Sys 未定义

WebForm_InitCallback 未定义

这表明脚本管理器坏了，有没有办法实现这一点？

【问题讨论】：

您使用什么版本的 ACT？您是否尝试升级到最新版本并使用Bundling？
@MikhailTymchuk 如您所见，我目前正在使用捆绑，但问题是生成的捆绑脚本出现在页面顶部并被标记为渲染阻塞

标签： c# asp.net ajax ajaxcontroltoolkit

【解决方案1】：

这是 2021 年的迟到答案。我知道你在这里做什么。最简单的方法是在head部分预加载combinedajax.min.js。

您应该不会再看到 Google pagespeed 的问题。我在使用 ACT（AJAX 控制工具包）时与您的情况相似，但后来找到了替代方案。

【讨论】：

【解决方案2】：

我使用 ajax 控制工具包版本 15.1.4.0，您使用 ScriptManager 而不是 ToolkitScriptManager，但您可以设置 LoadScriptsBeforeUI="False"，它会在 </form> 之前呈现。

【讨论】：

它将大部分脚本移动到底部，但在我的情况下，它会导致其他内联脚本出现一些问题，所以这可能不是万无一失的，但您至少可以尝试一下，看看它是否适用于您的情况
恐怕我没有使用ScriptManager，我的示例显示我正在使用<ajaxToolkit:ToolkitScriptManager />，并且我也已经设置了LoadScriptsBeforeUI。
@DGibbs 抱歉没有注意到您的代码中的LoadScriptsBeforeUI。