Question

在我的HTML / JS应用程序中，我根据运行时动态的一些规则和用户操作生成表元素。我通过字符串添加生成表的内容，最后使用Jquery .html（）方法将其设置为容器。 AFAIK，Jquery处理自己的内存问题，并且比直接设置innerHTML更好一些。根据用户操作，在下一阶段，生成完全不同的表并再次设置为相同的主容器。容器保持稳定，容器的html使用新表动态更新。

我的问题是关于注册事件监听器和处理内存泄漏和性能，因为在桌面上它运行正常，但在IPAD或Android平板电脑上，在一些操作之后，或者在一些登录/注销之后，应用程序变得缓慢，有时冻结和变得没有响应，设备不再响应点击操作。我想到了内存泄漏或性能问题，并计划使用谷歌浏览器调试，但首先我想了解设计是否存在缺陷。在我看来，我有3个处理事件监听器的选项，目前我正在使用第一个：

1.option （目前使用）

$('#mainContent').html(newTableContent);

如您所见，在每个表上，在设置mainContainer的html后在DOM中生成表时，将调用registerListener方法，该方法将绑定每个单元格的cellClicked操作。在我的应用程序中，我可以对所有可能的表使用相同的cellClicked操作用于所有表格单元格。我不执行任何清理（对mainContent调用空或调用unbind），当要设置一个新表时，我只需生成一个新表内容并直接设置为主要内容

var content = '<table id="t1"><tr><td onclick='cellClicked(this)'>val1</td>..';

$('#mainContainer').html(content);

function cellClicked(domCell) { // }

再次为单元格调用registerListeners方法。如果要执行N表更新，则registerListeners将被调用N次。以前的听众怎么了？可能的泄漏或性能问题？

2.option

我生成了已注册操作的表格单元格，而不调用任何绑定方法：

// call only once at startup
$('#mainContent').on('click','.cellclass',function() { //handle cell click

 var content = '<table id="t1"><tr><td class="cellclass">val1</td><td>val2..</table>';
 $('#mainContainer').html(content);

再次生成新表时，它是通过字符串添加生成的，并将html（）调用到容器中。

3.option（计划）

正如我在SO中看到的，最好对动态生成的元素使用 on 方法，我将生成表作为选项1，但不要调用任何registerListener方法。我只在启动时只调用一次寄存器方法，即使没有表存在。

$('#mainContent').off('click','.cellclass');

如果要进行注销，请取消

{{1}}

当我们频繁更新包含20列和30-40行的表时，您对3个选项或建议不同选项之间的建议是什么，以防止内存泄漏并跟上性能？

Answer 1

考虑您要创建多少个表格单元格。 10x10表将需要100个事件处理程序。他们加起来很快。更好的选择是在包含对象上有一个处理程序。然后，您的处理程序将确定确切接收事件的内容并采取适当的措施。

使用jQuery，您可以通过委派事件来完成此操作。像

这样的东西

$('#mytable-container').on('click', 'td', function(e) { // event logic });

＆＃34;这＆＃34;函数内部是接收事件的对象 - ＆＃39; td＆＃39;在这种情况下标记。或者您可以使用e.target进行进一步分析。在TD上使用data-XXX属性来保存任何特定数据也有很大帮助。（即data-id =＆＃34; my-db-id＆＃34;）然后您可以执行$（this）.data（＆＃39; id＆＃39;）来获取＆＃34; my-db- ID＆＃34;事件处理程序中的值。

我在IE6时代遇到了类似的问题，摆脱额外的处理程序对我来说是个窍门。这可能不是你需要的银弹。可能还有其他问题，但这是一个良好的开端。

jQuery，处理表单元格上的动作侦听器，处理性能和内存泄漏

1 个答案: