【问题标题】:How to decrease page load time (combine javascript)?如何减少页面加载时间(结合 javascript)?
【发布时间】:2012-09-23 12:03:44
【问题描述】:

使用 ASP .NET MVC 2 创建的页面需要 1.7 秒才能加载。 它包含 13 个 js 文件,如下所示。 Firebug 显示每个 js 文件加载都会返回 304 响应,但由于有 13 个文件,因此可能会大大增加页面加载时间。 Chrome 审核红色警报建议合并 js 文件。

如何使用 ASP.NET MVC 2 自动或其他方式将它们组合成单个文件以减少加载时间? 项目中应该有单独的 js 文件以允许替换它们,但那些应该交付 可能是单个 js 文件。

jqgrid、jquery、jquery-ui、tinymce和一些jquery插件js文件如下图所示。 使用 Visual Web Developer Express 2010。应用程序在 Mono 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 %>');
...

更新

我在回答中尝试了 Oleg 建议,但得到错误 jQuery 未定义,如下图所示。如何解决这个问题? IE 控制台不显示任何错误。

【问题讨论】:

    标签: c# jquery asp.net-mvc visual-studio-2010 jqgrid


    【解决方案1】:

    我想建议您使用the Closure Compiler 进行一项实验。

    首先,您可以尝试连接您在页面上使用的所有 JavaScript 和所有内联 JavaScript 代码。您应该保留原因文件的顺序。在我看来,您将有两个版本的结果:一个带有CurUser.GetLanguage() === "EST",另一个带有CurUser.GetLanguage() !== "EST"

    在您拥有一个 JavaScript 文件后,您可以使用带有 compilation_levelADVANCED_OPTIMIZATIONS(参见 here)的闭包编译器,它可以删除所有未使用的 JavaScript 代码。结果,您将获得 jQuery、jQuery UI 和您在页面上真正使用的其他库的 子集。生成的 JavaScript 代码将与其他页面上的其他代码不同,但它可能非常小,可以更好地优化为任何单独的文件。

    【讨论】:

    • 谢谢你。我试过了,但得到了关于 jQuery 未定义的错误。如何解决或找到原因?我更新了问题。
    • 我在stackoverflow.com/questions/12553153/…也发布了相关问题
    • 简单优化工作正常,但高级优化会导致错误。
    • @Andrus:如果代码对ADVANCED_OPTIMIZATIONS 有一些问题,您可以使用SIMPLE_OPTIMIZATIONS 或使用例如Microsoft Ajax Minifier。最小化的文件不会像ADVANCED_OPTIMIZATIONS 那样小,但一切都会奏效,您的主要答案问题将得到解决。当然,我支持您至少为所有静态文件打开了 GZIP 压缩。
    • 高级优化可能会将 jQuery 重命名为其他名称。在哪里可以找到 jquery 的外部设置文件,可以包含以防止这种情况,如 google 关闭命令文档中所述?
    【解决方案2】:

    我推荐使用head.js

    使用单独的 .js 文件确实可以帮助您减少页面加载时间。你只需要包含一个类似这样的文件:

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

    【讨论】:

    • js 文件在浏览器缓存中。 Web 服务器发送 304 响应。在这种情况下,head.js 似乎不会减少加载时间。仍然会发出每个页面的请求,如果使用 head.js,则会收到 304 响应。
    • 那么最好的方法是使用YUI Compressor之类的东西。我在我的一些项目中使用它。第一次配置它可能会很困难,但它会给你很好的结果。作用原理是将一些js文件最小化并编译为一个。因此,您可以将 jquery、jquery-ui、datepicker 和其他文件编译为一个。当您需要用另一个文件替换一个文件时,您应该重新编译您的 js 文件(在某些 cms 中它会自动执行)。它还可以帮助优化和最小化 css 文件。
    【解决方案3】:

    http://combres.codeplex.com/ 允许您保留单独的 javascript 文件并在运行时合并和缩小。

    真正的享受。

    看起来他们已经在 asp.net 4.5 中加入了类似的东西:

    http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx

    http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

    【讨论】:

      【解决方案4】:

      要克服这种情况,您有很多技巧。其中一些是:

      Page Specific JS : 尝试根据需求添加javascript文件。不要添加页面中没有使用的任何不必要的 JS。

      GZIP 压缩: 对页面和静态 js 和 css 文件应用 GZIP 压缩。

      缓存:在服务器级别 (IIS),您可以将缓存应用于这些静态文件,如 JS 或 CSS

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

      Combine multiple JavaScript files into one JS file

      祝你好运!!

      【讨论】:

      • 1.使用所有 js 文件 2. 响应标头包含 Content-Encoding gzip 因此看起来响应已压缩 2-3:这是 Web 应用程序:文件在 99% 的情况下已经存在于浏览器缓存中,并且 apache 返回 304 响应。因此缓存和 gzip 压缩不会降低加载速度。我阅读了您提供的链接,但没有找到可以用作此问题答案的内容(除了合并我询问的文件)。
      • @Andru,找到这个帖子stackoverflow.com/questions/5511989/…
      【解决方案5】:

      将文件捆绑在一起

      当前大多数主流浏览器都将每个主机名的同时连接数限制为六个。这意味着在处理六个请求时,浏览器将对主机上的资产的其他请求进行排队

      捆绑可以显着缩短您的首页点击下载时间。

      捆绑通过将多个 CSS 文件和 Javascript 文件合并到单个 CSS 文件和 javascript 文件中来减少对服务器的单个 HTTP 请求的数量。

      这个网站有一个很好的教程,介绍如何通过五个简单的步骤将捆绑添加到您的应用程序:http://websitespeedoptimizations.com/Bundling.aspx

      【讨论】: