2012-09-23 103 views
4

使用ASP創建的頁面.NET .NET MVC 2需要1.7秒才能加載。 它包含13個js文件,如下所示。 Firebug顯示每個js文件加載都會返回304響應,但由於有13個文件,它可能會增加頁面加載時間。 Chrome審計紅色警報提示將結合js文件。如何減少頁面加載時間(結合javascript)?

如何使用ASP.NET MVC 2自動或以其他方式將它們合併到單個文件以減少加載時間? 項目中應該有單獨的js文件以允許替換它們,但應該將 作爲單個js文件提供。

jqgrid,jquery,jquery-ui,tinymce和一些jquery插件js文件的使用方式如下所示。 使用Visual Web Developer Express 2010。應用單2.10/Apache下和Windows下運行/ IIS

的Site.Master包含:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> 
    <!DOCTYPE html> 
    <html> 
    <head runat="server"> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1" /> 
     <link rel="stylesheet" href="../../themes/redmond/jquery-ui-1.8.12.custom.css" type="text/css" /> 
     <link href="../../Scripts/jqgrid/css/ui.jqgrid.css" rel="stylesheet" /> 
     <link href="../../Content/Css/Site.css" rel="stylesheet" /> 
     <asp:ContentPlaceHolder ID="HeadContent" runat="server" /> 
     <title> 
      <asp:ContentPlaceHolder ID="TitleContent" runat="server" /> 
     </title> 
     <script type="text/javascript"> 
      "use strict"; 
      var BASE_URL = '<%= ResolveUrl("~/") %>'; 
     </script> 
     <script src="<%= Url.Content("~/Scripts/jquery/jquery-1.7.1.js")%>" type="text/javascript"></script> 
     <script src="<%= Url.Content("~/Scripts/jquery-ui-git.js")%>" type="text/javascript"></script> 
     <script src="<%= Url.Content("~/Scripts/i18n/jquery.ui.datepicker-et.js")%>" type="text/javascript"></script> 
     <script src="<%= Url.Content("~/Scripts/jquery.contextmenu-fixed2.js")%>" type="text/javascript"></script> 
     <% if (CurUser.GetLanguage() == "EST") 
      { %> 
     <script src="<%= Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-et.js")%>" type="text/javascript"></script> 
     <% } 
      else 
      { %> 
     <script src="<%= Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-en.js")%>" type="text/javascript"></script> 
     <% } %> 
     <script type="text/javascript"> 
      $.jgrid.no_legacy_api = true; 
      $.jgrid.useJSON = true; 
    </script> 
    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jqgrid/jquery.jqGrid.src-multiselect1-deleteandsortpatches.js")%>"></script> 
    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jqgrid/jQuery.jqGrid.dynamicLink.js")%>"></script> 
    <script src="<%= Url.Content("~/Scripts/json2.js")%>" type="text/javascript"></script> 
    <script src="<%= Url.Content("~/Scripts/jquery.form.js")%>" type="text/javascript"></script> 
    <script src="<%= Url.Content("~/Scripts/TinyMCE/tiny_mce_src.js")%>" type="text/javascript"></script> 
    <script src="<%= Url.Content("~/Scripts/TinyMCE/jquery.tinymce.js")%>" type="text/javascript"></script> 
    <script src="<%= Url.Content("~/Scripts/myscripts.js")%>" type="text/javascript"></script> 
    <script type="text/javascript"> 
    var 
     $grid; 
    $(function() { 
     "use strict"; 

<% if (TempData["Message"]!=null) { 
setTimeout(function() { 
    showMessage ('<%= TempData["Message"] as string %>'); 
... 

更新

我試圖奧列格建議在回答卻得到了錯誤的jQuery沒有被定義爲如下圖所示。如何解決這個問題? IE控制檯不顯示任何錯誤。

jQuey is undefined

回答

0

我想建議你使用the Closure Compiler做一個實驗。

首先,您可以嘗試連接您在頁面上使用的所有JavaScript和所有內嵌JavaScript代碼。你應該保持原因文件的順序。在我看來,你會得到兩種版本的結果:一種是CurUser.GetLanguage() === "EST",另一種是CurUser.GetLanguage() !== "EST"

後,你將有一個JavaScript文件,你可以使用關閉編譯器與ADVANCED_OPTIMIZATIONS一個compilation_level(見here),它可以刪除所有未使用的JavaScript代碼。結果你會得到子集的jQuery,jQuery UI和其他你真的在頁面上使用的庫。生成的JavaScript代碼將與其他頁面上的其他代碼類似,但它可能非常小,並且可以更好地優化爲任何單獨的文件。

+0

thna你。我嘗試過,但沒有定義jQuery的錯誤。如何解決或找到原因?我更新了問題。 – Andrus

+0

我也發佈了相關的問題http://stackoverflow.com/questions/12553153/how-to-fix-clouse-cliler-compiler-error-on-css-float-left – Andrus

+0

簡單的優化工作正常,但高級優化會導致錯誤。 – Andrus

0

爲了克服這些類型的情況下,你有很多技巧。一些是:

頁面特定JS:嘗試根據需要添加JavaScript文件。不要添加任何不在頁面中使用的不必要的JS。

GZIP壓縮:在頁面和靜態js和css文件上應用GZIP壓縮。

緩存:在您緩存可以像JS或CSS

http://sixrevisions.com/web-development/decrease-webpage-load-times/

Combine multiple JavaScript files into one JS file

好運這些靜態文件被應用在服務器級別(IIS)!

+0

1.所有的JS文件是用來2.響應報頭包含'內容編碼\t gzip'所以它看起來類似的響應被壓縮2-3:這是web應用程序:文件已經存在於瀏覽器緩存中99%的情況下,並且apache返回304響應。所以緩存和gzip壓縮不能降低加載速度。我讀了你提供的鏈接,但沒有找到一些東西(除了結合我所問的文件)可以用來回答這個問題。 – Andrus

+0

@Andru,找到這個線程http://stackoverflow.com/questions/5511989/combine-multiple-jquery-script-files-into-one-js-file –

0

我推薦使用head.js

它確實可以幫助您使用單獨的.js文件減少頁面加載時間。你只包括一個文件,這樣的事情:

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {  
    // all done  
}); 
+1

js文件在瀏覽器緩存中。 Web服務器發送304響應。它看起來像head.js在這種情況下不會減少加載時間。如果使用head.js,仍會發布每個頁面的請求並收到304響應。 – Andrus

+1

然後最好的方法是使用[YUI Compressor](http://developer.yahoo.com/yui/compressor/)。我在一些項目中使用它。第一次配置它可能相當困難,但它會給你帶來好的結果。行動原則是儘量減少和編譯一些js文件。所以你可以編譯jquery,jquery-ui,datepicker和其他文件。當你需要用另一個文件替換一個文件時,你應該重新編譯你的js文件(在某些cms中它會自動執行)。它也可以幫助優化和最小化css文件。 – Progressor

0

捆綁文件一起

大多數目前主流瀏覽器數量限制每個主機名同時連接到六個。這意味着,雖然有六個請求正在處理,但主機上資源的額外請求將由瀏覽器排隊

捆綁可顯着提高您的首頁命中下載時間。

綁定通過將多個CSS文件和Javascript文件合併到單個CSS文件和JavaScript文件中,減少了對服務器的單個HTTP請求的數量。

這裏這個網站有關於如何捆綁在五個簡單的步驟添加到您的應用程序一個很好的教程:http://websitespeedoptimizations.com/Bundling.aspx