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

我目前正致力于改进我们的网站PageSpeed洞察分数，目前我们在90左右徘徊，如果可能的话，我们希望进入90年代中期。将Ajax工具包脚本移动到页面底部

一个我们有症结是，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>

这消除了产生复合的脚本，并创建一个新的一个之前关闭身体标记，这使我们的分数高达95，但我认为这是加载太晚，因为我们得到了很多控制台错误：

ReferenceError: Sys is not defined

WebForm_InitCallback is not defined

这表明脚本管理器已损坏，是否有办法实现这一点？

来源

2016-05-16 DGibbs

你使用什么版本的ACT？你是否尝试升级到最新版本并使用[Bundling]（https://github.com/DevExpress/AjaxControlToolkit/wiki/How-to-use-bundling-and-CDN）？ –

@MikhailTymchuk我正在使用捆绑，你可以看到，但问题是生成的捆绑脚本出现在页面的顶部，并被标记为渲染阻塞 – DGibbs

进出口使用AJAX控件工具包版本15.1.4.0，在您使用ScriptManager代替ToolkitScriptManager但你可以设置LoadScriptsBeforeUI="False"和它呈现之前</form>。

来源

2016-08-02 07:23:34 Peter

它将大部分脚本移动到底部，但在我的情况下，它造成的与其他内联脚本的一些问题，所以这可能不是万无一失，但你可以至少尝试它，看看它是否适用于你的情况 – Peter

恐怕我不使用'ScriptManager'，我的例子显示我使用' ajaxToolkit：ToolkitScriptManager />'，我也已经设置了'LoadScriptsBeforeUI'。 – DGibbs

@DGibbs对不起，您的代码中没有注意到'LoadScriptsBeforeUI'。 – Peter

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

回答

相关问题