c# - 减少大型单页 AJAX 应用程序(jQuery、ASP.net)

Question

我目前正在构建单页 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/设计人员)，所以说话要温和。我只需要一个好的攻击计划来使这个应用程序更快。有什么想法吗？

Answer 1

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

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

---

根据问题评论，“解决”此问题的一种快速方法是创建一个 C# 类来反射(reflect)您问题中的所有字段。像这样:

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

然后您可以像这样将其存储在 session 中(保持简单...我知道这不是“最佳”方式)

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

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

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

与其将其保存到 session 中，不如将其保存到数据库或 cookie 中，但 cookie 的大小限制为 4K，因此它可能放不下。