將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工具包腳本移動到頁面底部

回答

相關問題