javascript - 始终运行的 Web 应用程序的动画滞后和性能问题

Question

我正在开发的网络应用程序相当典型。 MySQL 存储数据，PHP 检索，jQuery 使其看起来更漂亮，AJAX 使其异步。

我的客户仅使用 FireFox，并且 Web 应用程序可能全天候 (24/7) 打开。该应用可能会在几个小时内请求大量数据，并且不断更新页面上的大型表格。我注意到 FireFox 在一个小时左右的时间内 jquery 动画(即使是最简单的动画)将开始滞后。我已经确认这就是原因(浏览器打开的时间过长)，因为启动一个全新的浏览器可以解决这个问题。

我读过一些关于 FF 垃圾收集器对于 JS 引擎来说不是最佳的内容，但我真的不知道这是否是问题所在。我正在寻找有关如何处理这种情况的一般指导。

谢谢

Answer 1

您没有给出任何代码，但我怀疑它是 setInterval (在评论中提到)组合与导致您的问题的ajax调用。

如果我没猜错的话，您会在间隔函数内不断触发异步 AJAX 调用(情况 1)。或者您正在为 ajax 调用生成的每一行触发一个间隔函数(情况 2)。

如果是情况 1(setInterval 内的 AJAX)，那么您的页面就会很快被 ajax 调用淹没(使用 firebug 查看调用列表)...在此在这种情况下，您可以使用递归 ajax 函数，一旦完成，该函数就会调用它自己。

如果是情况 2 - 您提到 1 毫秒的间隔和每次调用 0-100 行的比率(假设为 50)，再次，您正在创建很多函数，并且您正在将系统(内存、GC、循环处理程序)投入到艰苦的工作中，这可能会导致页面挂起和滞后……在这种情况下，请考虑使用“池”对象您的行将被临时存储，只有一个永久间隔函数将一一抓取行并以您想要的速率将它们绘制到页面(不要忘记从池对象中删除行)。

如果这些情况与您的方法不符，请考虑向我们展示您的代码或有问题的页面。

关于 24/7 和表格增长:

您应该考虑分页机制或页面刷新策略，因为页面越大，它需要的内存就越多 - 您正在生成一个增长非常快的表，并且没有人可以处理、读取、理解如此大量的数据(以速率为 1ms ~ 1 个新行)。您应该专业并采取更“用户友好”的方法，并且可能实现无限滚动样式来加载新行或转储旧行。