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

时间:2016-05-16 08:36:21

标签: c# asp.net ajax ajaxcontroltoolkit

我目前正致力于改善我们的某个网站PageSpeed见解得分,目前我们徘徊在90左右,我们想要进入90年代中期&#39 ;如果可能的话。

我们遇到的一个难点是,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>

有没有办法在获得输出的defer标记上设置asyncCompositeScript?或者将其移动到页面底部的任何其他方式?

我尝试过以下方法:

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>

这将删除生成的复合脚本并在结束正文标记之前创建一个新的复合脚本,这会使我们的分数达到95,但我认为由于我们获得了大量的控制台,因此加载太晚了错误:

  

ReferenceError:未定义Sys

     

未定义WebForm_InitCallback

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

1 个答案:

答案 0 :(得分:0)

我正在使用ajax控件工具包版本15.1.4.0,您使用ScriptManager代替ToolkitScriptManager,但您可以设置LoadScriptsBeforeUI="False"并在</form>之前渲染}。