2012-09-23 44 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