我目前正在构建一个单页面的AJAX应用程序。这是一个大型的“注册表单”，它被构建为一个多步骤向导，具有多个分支和基于用户选择的不同措辞。表单末尾是可编辑的评论页面。用户提交表单后，会向我们发送一封相当大的电子邮件，并向他们发送一封小电子邮件。这有点像一个非常无聊的选择你自己的冒险书。
功能蠕变已经将这个应用程序的大小推到了当前架构的能力之外，并且在任何较慢的计算机（对Web应用程序都不利）中工作太慢，尤其是那些使用Internet Explorer的计算机。它目前有64个单独的步骤，5400个DOM元素和单独的.aspx文件，重量为300kb（4206 LOC）。在运行FireFox 3的快速计算机上加载应用程序需要1.5秒，在运行IE7的较慢计算机上加载20秒。在步骤之间移动需要大约相同的时间。
让我们回顾一下这些功能：
我正在使用jQuery 1.3.2和以下插件：
以及一些自定义脚本，用于从XML文件加载verbiage，运行评论页面和一些美学装备。
我没有在公开的地方张贴这个，但我主要是寻找一些关于如何处理这类项目并使其重量轻且可扩展的技巧。如果有人对工具，教程或技术有任何想法，那就是我正在寻找的东西。我是一个非常新手的程序员（我主要是CSS / xHTML /设计人员），所以请轻轻说。我只需要一个好的攻击计划来加快这个应用程序的速度。有什么想法吗？
答案 0 :(得分：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;
}
}
这样您就可以使用非空的Survey对象。
下一步是将这个大表格分成更小的页面，让我们说：step1.aspx，step2.aspx，step3.aspx等。所有这些页面都将从包含上述属性的公共基页继承。在此之后，您需要做的就是将step1.aspx中的请求发送回Survey并将其保存到Survey，类似于您现在所做的但是每个小块。完成后重定向（Response.Redirect（“〜/ stepX.aspx”））到下一页。上一页的信息将保存在会话对象中。如果他们关闭浏览器页面，他们将无法返回。
您可以将其保存在数据库或Cookie中，而不是将其保存到会话中，但是您的cookie限制为4K，因此可能不适合。
答案 1 :(得分：1)
我同意PBZ，保存个别步骤将是理想的。但是，您可以使用AJAX执行此操作。但是，如果你这样做，它需要一些听起来可能超出你的大多数前端开发技能的东西，你需要创建一个新的数据库行并将其与用户的会话ID联系起来，每次他们点击下一步都会更新该行。可能甚至将它绑定到他们的IP地址，所以如果整个事情爆发，他们可以回来打“记住我吗？”为您的应用程序检索它。
就优化现有结构而言，jQuery在优化方面相当沉重，添加大量jQuery模块并没有帮助。我并不是说这很糟糕，因为它可以节省你很多时间，但是在某些情况下你使用模块实现其众多功能之一，你可以用几行jQuery替换整个模块javascript
就最小化单个DOM元素而言，我提到的上述步骤可以帮助减少这一点，因为您可能为那些您可能需要或可能不需要的模块加载了许多可扩展函数。
在后端，我必须看到源代码，看看如何告诉你优化它，但听起来在各个步骤中有很多冗余，其中一些可能会被削减成函数包括一点递归，或者至少将一些任务委托给另一个。
我希望我能提供更多帮助，但如果不深入了解您的来源，我只能建议基本策略。祝你好运！
答案 2 :(得分：0)
同意，分解步骤。 5400个元素太多了。
如果您需要将其保留在一个页面上，有几个选项。
HTH。
答案 3 :(得分：0)
听起来像是一个JQuery优化问题。
第一个建议是尽可能多地选择ID选择器。我只能通过id属性选择来获得超过200-300x的加速比。
第二个建议更多的是攻击计划。由于IE是您的主要问题区域，我建议使用IE8调试器。你只需要在IE8中点击f12 ...标签3和4分别是脚本和探查器。
一旦你完成了你认为可以做到的＃1，为了获得一个起点，只需转到探查器，点击开始分析，在网页上做一些缓慢的动作，然后停止分析。您将看到最长的方法调用，并且只需按照它进行操作即可。
要进行更精细的测试/ dev，请转到脚本选项卡。断点本地等等用于分析。您可以通过即时窗口开发/测试更改...即在您想要更改功能的地方放置一个断点，触发该功能，在即时窗口中执行您的javascript而不是定义的javascript。
如果您认为自己已经找到了解决方案，请对您的更改进行分析，以确保它们真正得到改进。只需启动探查器，运行旧代码，停止它并记下您的基准。然后重新启动探查器并使用立即窗口执行更改的功能。
就是这样。如果这个流程不能带你走得太远，如上所述，JQuery本身（以及它的插件）并不是非常高效，并且用标准的javascript替换将加速一切。如果您的插件基准测试速度很慢，请查看用其他插件替换它们。