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

Question

我目前正在改进我们的一个网站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未定义

这表明脚本管理器坏了，有办法做到这一点吗？

Answer 1

这是2021年晚些时候的答案。我看到你在这里做什么了。最简单的方法是在头部预加载组合的ajax.min.js。

你不应该再看到谷歌页面速度的问题了。我和你的处境相似，因为我正在使用ACT（AJAX控制工具包），但后来找到了替代方案。

Answer 2

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