4

我目前正在构建一个单页 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/设计专家），所以说话要轻声细语。我只需要一个好的攻击计划来让这个应用程序更快。有任何想法吗？

4

4 回答 4

4

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

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

根据问题评论，“解决”此问题的一种快速方法是创建一个反映问题中所有字段的 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，因此它可能不适合。

于 2009-07-10T17:14:06.233 回答
1

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

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

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

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

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

于 2009-07-10T18:00:03.363 回答
0

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

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

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

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

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

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

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

于 2009-11-04T06:25:36.740 回答
0

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

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

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

HTH。

于 2009-07-10T18:06:49.933 回答