javascript - 使用许多事件监听器优化 javascript 性能

Question

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

如果我在我的 android 平板电脑上使用该网站，javascript 部分的性能非常低下，所以我想知道如何提高性能。

我考虑过的一个选择是，除了单个鼠标输入事件外，不在结果行上绑定(bind)任何事件监听器，然后仅当鼠标位于给定元素上时才绑定(bind)实际的事件监听器。

任何其他提高性能的想法将不胜感激。

我的大部分 javascript 代码都是基于 jquery 的，所以如果您有任何特定于 jquery 的优化，我也将不胜感激。

Answer 1

您可能会研究 javaScript 事件委托(delegate)。 SO 上有很多答案(例如 here)和很多好文章(here 或 here)。

基本上你的想法实际上是一个很好的解决方案。因此，不是绑定(bind) - 比方说 - 一百行有自己的事件处理程序，而是绑定(bind)它们的共同父级，这将在其任何子级接收到鼠标输入时触发事件。

粗略地说不是这样:

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

你会这样做:

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

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

作为旁注，检查被触发的事件是一件非常有趣的事情(好吧，至少对我来说......)做这样的事情:

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

并查看事件携带了多少信息，以及通过简单的单击或鼠标输入即可获得多少有用的信息。

VanillaJs

当然不用任何库也能达到同样的效果。

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

// 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
    }
});

如果您尝试此代码，但很可能是实际的 target.element是<td> ，而不是 <tr>我们想要。 这意味着我们必须更聪明一点，向上移动 DOM 以查看点击的元素 ( <td> ) 是否包含在我们真正想要的元素 ( <tr> ) 中。

让您入门的粗略实现如下所示:

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');
  }
})

查看此 fiddle或下面的代码片段:

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

  if (startEl.nodeName === targetNodeName) {
    return startEl;
  }

  return walk(startEl.parentNode, stopEl, targetNodeName);
}

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

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

table {
  width: 100%;
}
tr {
  background: #ddd;
}
.clicked {
  background: teal;
}

 <table id="myTable">
   <tr>
     <td>one</td>
   </tr>
   <tr>
     <td>two</td>
   </tr> 
   <tr>
     <td>three</td>
   </tr> 
   <tr>
     <td>four</td>
   </tr> 
   <tr>
     <td>five</td>
   </tr> 
   <tr>
     <td>six</td>
   </tr>    
 </table>