大型jQuery应用程序中的性能问题

Question

我有一个Web应用程序，菜单上有8个选项卡。当我点击一个标签时，当前内容会淡出，特定于标签的内容会出现。

这个东西工作得很好但是应用程序非常慢，因为fadeIn和fadeOut是在非常大的html（可能大约2000行/制表符）内容上完成的，这会使整个应用程序变慢。

我能做些什么才能让它变得活泼流畅。

以下是我的一些疑点...

1. 我可以通过AJAX加载标签内容，而不是一次性加载所有内容吗？

2. 如果我通过AJAX加载它们以用于选项卡A，然后用户点击选项卡B，我是否应该从DOM中删除选项卡A内容并在点击选项卡A时重新加载它或者我应该将其保留在DOM。

3. 点击处理程序会发生什么，因为我需要在这种情况下进行动态事件绑定。

4. 为了提高绩效还可以做些什么？

非常感谢！

Answer 1

好吧，我们遇到了这样一个问题，我们有大约10个标签，需要加载数据。您的疑虑已经转向解决方案。我将使用更平滑和完美的结果来定义我们为完成任务所做的操作

1. 我们使用Ajax调用绑定选项卡上的数据，而不是在runat服务器上创建元素。我们将它绑定在客户端Dom操作上。
2. 如果有一个网格，那将有大量的数量，绑定数据用于evey分页，而不是加载整套数据。
3. 在每个选项卡上单击数据正在加载，前一个选项卡上的数据将被清除。或者进入默认位置。
4. 如果数据保留在html上，那么如果数量很大，那么Dom也会很重，反过来又会使你的应用程序变慢。 5.要完成此任务，您必须创建Ajax调用和更多Dom.manupulation，这将花费更多时间。所以必须决定你想去哪个方向的路径。

从我的观点来看，有一些观察。我可以考虑是否要提高应用程序的性能。

1. 检查是否有任何沉重的图像需要花费时间加载或减慢您的页面以便参与所有加载
2. 删除任何未使用的js文件或CSS的引用。
3. async和defer with external scripts的用户。
4. 尽量不要使用更多服务器端元素来加载页面，因为它们会在服务器端绑定。这让你的页面很重。
5. 在某些情况下，压缩技术对我也有帮助。
6. Ajax调用和客户端操作最好，而不是在服务器端发送整个页面。 !!!

根据我的经验，这些是我在使用Web应用程序时学到和实现的，以提高应用程序的性能。