1

我在一张桌子上有大约 3000 行。显示集合的一些数据。例如用户的收藏。我在行中有名字，姓氏，父亲的名字。

user1First  user1Last  user1Father 
user2First  user2Last  user2Father 
user3First  user3Last  user3Father

我需要一个可以查看用户完整详细信息的操作。我有三个选择——

  1. 将单击事件绑定到各个行。

    1. 使用 jquery 或
    2. onclick 属性

  2. 将一键事件绑定到整个表格并使用事件冒泡

  3. 将链接列添加到行

从性能的角度来看，上述三个中的哪一个是最昂贵和最便宜的。有没有其他方法可以实现这一点并且性能友好。？

性能标准 -

  1. 速度是最重要的。

    1. 将行添加到表中时没有 UI 阻塞。- 当它们从服务器到达时，我使用 jquery append 将它们异步添加
    2. 取消绑定时间也很重要，因为我在删除视图时会清理所有事件。

  2. 内存是次要的，但在我也在移动设备上运行应用程序时不容忽视。

附加说明：我正在使用backbone.js。用于事件绑定。每一行都是一个主干视图本身[如果我使用链接可以将其删除] 它是一个 marionette.collection 视图

4

2 回答 2

1

毫无疑问，将点击事件附加到表格并使用事件冒泡是最好的选择。这在速度和内存方面都很有效。

如果您在单击链接时触发 ajax 请求，则将链接添加到列将与您的第一个选项相同。

于 2013-10-21T18:05:42.287 回答
1

不要忘记事件会冒泡，无论您是否在 DOM 树的更高位置附加了事件处理程序。

对委托事件的主要性能批评是针对并不总是触发的事件绑定。例如，如果您将委托事件附加到表格，并且您的某些行适合选择器而其他行不适合，那么您将在每次事件通过表格冒泡时检查 CSS 选择器时付出性能损失，无论是否该行符合规定的标准。

如果您附加一个委托处理程序，那么您是否会受到性能影响以及影响的程度取决于选择器。例如，如果您的选择器是 ' td'，则检查是一步过程：e.target.tagName === 'TD'。但是，如果您的选择器是 ' tr'，则检查涉及取消引用 e.target 的父项以发现是的，该元素是' tr'，并且事件将触发。

在大多数情况下，绑定在事件源附近并且通常在事件确实发生时匹配选择器的委托事件不会导致太多的性能损失。通常在这些情况下代码简单性和内存使用会胜过，您应该使用委托。

于 2013-10-21T18:25:18.700 回答