减少大型单页 AJAX 应用程序（jQuery、ASP.net）答案

【问题标题】：Reducing a large single page AJAX application (jQuery, ASP.net)减少大型单页 AJAX 应用程序（jQuery、ASP.net）
【发布时间】：2009-07-10 17:01:02
【问题描述】：

我目前正在构建一个单页 AJAX 应用程序。这是一个大型“注册表单”，它被构建为一个多步骤向导，具有多个分支和基于用户做出的选择的不同措辞。表格的最后是一个可编辑的评论页面。用户提交表单后，它会向我们发送一封相当大的电子邮件，并向他们发送一封小电子邮件。这有点像一本非常无聊的选择你自己的冒险书。

功能蔓延已将这个应用程序的大小推到了当前架构的能力之外，而且它在任何速度较慢的计算机上运行都太慢了（对网络应用程序不利），尤其是那些使用 Internet Explorer 的计算机。它目前有 64 个单独的步骤、5400 个 DOM 元素，仅 .aspx 文件就有 300kb (4206 LOC)。在运行 FireFox 3 的快速机器上加载应用程序需要 1.5 秒，在运行 IE7 的较慢机器上加载应用程序需要 20 秒。在步骤之间移动大约需要相同的时间。

让我们回顾一下这些功能：

多步骤、多路径向导样式表格（64 步）
当前步骤的显示方式与此类似：http://codylindley.com/CSS/325/css-step-menu
多个验证字段
根据用户更改措辞选择
最终的、可编辑的评论页面

我正在使用 jQuery 1.3.2 和以下插件：

jQuery 表单向导插件
jQuery 线索提示插件
jQuery 性感组合
jQuery meioMask 插件

以及一些用于从 XML 文件加载措辞、运行评论页面和一些美学装备的自定义脚本。

我没有在任何地方公开发布此内容，但我主要是在寻找有关如何处理此类项目并使其重量轻且可扩展的一些技巧。如果有人对工具、教程或技术有任何想法，那就是我正在寻找的。我是一个相当新手的程序员（我主要是 CSS/xHTML/Design 专家），所以说话要轻声细语。我只需要一个好的攻击计划来让这个应用程序更快。有什么想法吗？

【问题讨论】：

300KB 页面中有多少是 ViewState？
说实话...我不知道。我对asp.net 的工作方式不是很熟悉。我怎么知道？
一种快速而肮脏的方法是查看页面源代码并搜索 name="__VIEWSTATE" 的输入字段，然后查看 value 属性中有多少个字符。
那么……没有。 ViewState 输入字段根本没有显示在我的源代码中。该页面实际上只是 xHTML 和 JavaScript，然后我使用 jQuery 表单插件通过 AJAX 将数据提交到另一个 aspx 页面。所以我猜这可能是我看不到视图状态的原因。
好的，所以它是纯 XHTML。你如何从页面发回结果？换句话说，什么/谁在处理用户在服务器端输入的表单？

标签： c# asp.net jquery performance wizard

【解决方案1】：

一种方法是将步骤分解为多个页面/请求。为此，您必须将先前页面的状态存储在某处。您可以使用数据库来执行此操作或其他方法。

另一种方法是通过 AJAX 动态加载您需要的部分。虽然这对 54000 个 DOM 元素没有帮助，但对初始页面加载有帮助。

基于问题 cmets，“解决”此问题的一种快速方法是创建一个反映问题中所有字段的 C# 类。像这样的：

public class MySurvey
{
  public string FirsName { get; set; }
  public string LastName { get; set; }
  // and so on...
}

然后你会像这样将它存储在会话中（也保持简单......我知道这不是“最好”的方式）

public MySurvey Survey 
{
  get 
  { 
    var survey = Session["MySurvey"] as MySurvey;
    if (survey == null)
    {
      survey = new MySurvey();
      Session["MySurvey"] = survey;
    }
    return survey;
  }
}

这样，您将始终拥有一个可以使用的非空调查对象。

下一步是将大表单拆分为较小的页面，例如：step1.aspx、step2.aspx、step3.aspx 等。所有这些页面都将继承自包含上述属性的通用基本页面。在此之后，您需要做的就是将来自 step1.aspx 的请求发回并将其保存到 Survey，这与您现在所做的类似，但针对每个小块。完成后重定向 (Response.Redirect("~/stepX.aspx")) 到下一页。上一页的信息将保存在会话对象中。如果他们关闭浏览器页面，他们将无法返回。

您可以将其保存在数据库或 cookie 中，而不是将其保存到会话中，但您的 cookie 被限制为 4K，因此它可能不适合。

【讨论】：

我更愿意走 AJAX 路线并根据需要加载每个部分。我只是不确定解决这个问题的最佳方法是什么，因为每个页面还需要知道根据用户选择的路径来获取哪块空话。
您需要通过一些自定义 JavaScript 来处理所有这些。如果用户选择路径 X 然后加载 Y 等等。从可用性的角度来看，如果这是一个巨大的表格，我建议尽可能多地保存步骤。没有什么比花 20 分钟填写表格然后由于网络中断或浏览器崩溃等无法提交更糟糕的了。您为什么更喜欢 AJAX 路由？
所以如果我做了类似的事情，var verbiage = "verbiage radio button selected" 然后每次我加载一个步骤时，为那个步骤加载'verbiage'？我可以将信息保存在 cookie 中吗？那会是个好主意吗？我更喜欢 AJAX，因为我更喜欢用 jQuery 编写而不是其他任何东西。
你可以将这些东西保存在一个xml文件或db中的临时表中。

【解决方案2】：

我同意 PBZ，保存各个步骤将是理想的选择。但是，您可以使用 AJAX 执行此操作。但是，如果您这样做了，它需要一些听起来可能超出您主要前端开发技能的东西，您可能需要创建一个新的数据库行并将其绑定到用户的会话 ID，并且每次他们单击下一步时，都会更新该行。甚至可能将其与他们的 IP 地址联系起来，这样如果整个事情爆炸了，他们就可以回来点击“还记得我吗？”让您的应用程序检索它。

就优化现有结构而言，jQuery 在优化方面相当繁重，添加大量 jQuery 模块并无济于事。我并不是说这很糟糕，因为它可以为您节省大量时间，但是在某些情况下，您正在使用一个模块来实现其众多功能之一，并且您可以用几行启用 jQuery 的 javascript 替换整个模块.

就最小化单个 DOM 元素而言，我上面提到的步骤可以帮助减少它，因为您可能会为那些您可能需要或可能不需要的模块加载大量可扩展函数。

在后端，我必须查看源代码以了解如何告诉您对其进行优化，但听起来各个步骤中存在很多冗余，其中一些可能可以精简为功能包括一点递归，或者至少将一些任务委托给彼此。

我希望我能提供更多帮助，但在不挖掘您的来源的情况下，我只能建议基本策略。祝你好运！

【讨论】：

【解决方案3】：

同意，分解步骤。 5400 个元素太多了。

如果您需要将其保留在一页上，有几个选项。

AJAX 请求返回原始 HTML 或要解析为 HTML 或 DOM 的对象数组
框架或 iframe
JavaScript 根据当前步骤设置 innerHTML 或操作 DOM。注意这个选项 IE7 尤其是 IE6 会有内存泄漏。 Google IE6 JavaScript 内存泄漏了解更多信息。
使用 document.write 仅包含当前步骤所需的 .js 文件。

HTH。

【讨论】：

【解决方案4】：

听起来主要是一个 JQuery 优化问题。

第一个建议是将尽可能多的选择切换到 ID 选择器。通过只能移动到 id 属性选择，我的加速超过了 200-300 倍。

第二个建议更像是一个攻击计划。由于 IE 是您的主要问题区域，我建议使用 IE8 调试器。您只需要在 IE8 中按 f12 ...选项卡 3 和 4 分别是脚本和分析器。

一旦您尽可能多地完成了#1，要获得一个起点，只需转到分析器，点击开始分析，在网页上执行一些缓慢的操作，然后停止分析。您将看到最长的方法调用，然后按照自己的方式进行操作。

要进行更精细的测试/开发，请转到脚本选项卡。断点当地人等在那里进行分析。您可以通过即时窗口开发/测试更改...即在要更改函数的位置放置一个断点，触发该函数，执行您的 javascript 而不是即时窗口中定义的 javascript。

当您认为自己已经解决了一些问题时，请分析您的更改以确保它们确实是改进。只需启动分析器，运行旧代码，停止它并记下您的基准。然后重新启动分析器并使用即时窗口执行您更改的功能。

就是这样。如果该流程不能带您走得足够远，如上所述，JQuery 本身（以及它的插件）的性能并不是非常好，并且用标准 javascript 替换将加快一切。如果您的插件基准测试速度较慢，请考虑用其他插件替换它们。

【讨论】：