使用多个事件侦听器优化javascript性能

我目前正在构建一个允许搜索元素的站点，并将结果添加到一个大表中（想想数百个结果）。结果表中的每个元素都可以通过各种方式进行操作（自定义javascript 0-5星评级、切换折叠面板以获得其他选项等）

如果我在android平板电脑上使用该站点，javascript部分的性能非常缓慢，因此我想知道如何提高性能

我考虑过的一个选项是不绑定结果行上的任何事件监听器，只有一个mouse enter事件除外，然后仅当鼠标位于给定元素上时才绑定实际的事件监听器

如有任何其他提高绩效的想法，我们将不胜感激

---

我的大部分javascript代码都是基于jquery的，因此如果您有任何特定于jquery的优化，我也会非常感激。

您可以研究javascript事件委派。关于这个问题有很多答案（一个例子）和很多好文章（或）

基本上，你的想法实际上是一个很好的解决方案。因此，与其使用自己的事件处理程序绑定（比方说）一百行，不如只绑定它们的公共父级，当其任何子级接收到鼠标输入时，该父级将触发事件

粗略地说，不是这样：

$('tr').on("click", function() {});

您将执行以下操作：

$('table').on('click', 'tr', function() {});

这显然是一个非常简化的示例，但它应该足以构建一个好的模式

作为旁注，检查触发的事件是一件非常有趣的事情（好吧，至少对我来说…），它可以执行以下操作：

$('table').on('click', 'tr', function(evt) {
   console.log(evt);
});

并查看一个事件包含多少信息，以及通过简单的单击或鼠标输入可以从框中获得多少有用的信息

VanillaJs

当然，同样的结果也可以在没有任何库的情况下实现

使用Vanilla JS的一个简单实现可以从David Walsh在答案开头链接的文章中获得，大致如下：

// Get the element, add a click listener...
document.getElementById("#myTable").addEventListener("click", function(e) {
    // e.target is the clicked element.
    // Check if it was a <tr>...
    if(e.target && e.target.nodeName == "TR") {
        // Element has been found, do something with it
    }
});

function walk(startEl, stopEl, targetNodeName) {
  if (!startEl || startEl === stopEl || startEl.nodeName === 'BODY') {
    return false;
  }

  if (startEl.nodeName === targetNodeName) {
    // Found it, return the element
    return startEl;
  }

  // Keep on looking...
  return walk(startEl.parentNode, stopEl, targetNodeName);
}

const container = document.getElementById('myTable');

container.addEventListener('click', (e) => {
  const clickedElm = walk(e.target, container, 'TR');
  console.log(clickedElm);
  if (clickedElm) {
    clickedElm.classList.add('clicked');
  }
})

请参阅以下内容或代码片段：

功能漫游（startEl、stopEl、targetNodeName）{
如果（！startEl | | startEl==stopEl | | startEl.nodeName===BODY'）{
返回false；
}
if（startEl.nodeName===targetNodeName）{
返回startEl；
}
回程步行（startEl.parentNode、stopEl、targetNodeName）；
}
const elem=document.getElementById（'myTable'）；
元素addEventListener（'单击'，（e）=>{
常量clickedElm=行走（例如，目标，元素，'TR'）；
控制台日志（单击日志）；
如果（单击拍摄）{
clickedElm.classList.add（'clicked'）；
}
})

表格{
宽度：100%；
}
tr{
背景：ddd；
}
.点击{
背景：水鸭；
}

一
二
三
四
五
六

使用

.on（）

方法在当前或将来的元素上绑定事件不应降低性能，因为在元素成为此类事件的发起方之前，不会发生任何事件。什么是迟钝？切换？尝试使用css选择器以获得更好的性能。此外，当您使用jQuery时，您应该知道<代码> JSIFF 以检查哪些选择器更好地使用。@ JAI“尝试使用CSS选择器以获得更好的性能”，您能解释一下吗？请考虑将那些“数百个结果”分页。而且没有神奇的配方可以提高性能。这涉及到很多因素。@RokoC.Buljan正如OP提到的jquery，因此OP可能使用了一些jquery提供的自定义选择器，如

：last，[id^=“someid”]

等。我想可能存在这些选择器。