javascript - 这个 JavaScript 非常慢

Question

我想要实现的目标:

我正在尝试将 abbr 的标题分别更新为“.Left”和“.Right”类中的值。我想出了一个 jQuery 解决方案，但就加载时间而言它太昂贵了，我试图想出一个 Javascript 解决方案，但我陷入了困境。我是 JS 新手，所以关于 DOM 我还有很多东西需要学习。

我给出的 HTML 重复了 100 次(完全相同的骨架)。如何让我的代码更加高效？另外，我收到“无法将属性标题设置为空”错误。

var ratedSection = document.getElementsByClassName('RatedSection');
var ratedQuest = document.getElementsByClassName('RatedQuest');
var selector = document.getElementsByClassName('Selector');

for (var i = 0; i < ratedSection.length; i++) { //loops through ratedsection
  var left = ratedSection[i].querySelector('.Left');
  var right = ratedSection[i].querySelector('.Right');

  left = left.innerHTML.replace(/<br>/g, " ");
  right = right.innerHTML.replace(/<br>/g, " ");

  for (var j = 0; j < ratedQuest.length; j++) {
    for (var k = 0; k < selector.length; k++) {
      var index = ratedQuest[j].querySelector('input').value;

      if (index == 1)
        selector[k].querySelector('abbr').title = left;

      else if (index == max)
        selector[k].querySelector('abbr').title = right;
    }
  }
}

<table class="RatedSection">
  <tr class="Header">
    <td class="Left">Stuff
      <br>inside
      <br>here
    </td>
    <td class="Right">More
      <br>stuff
      <br>inside
      <br>here
    </td>
  </tr>
  <tr class="RatedQuest">
    <td class="Selector">
      <abbr title>7</abbr>
      <abbr title>1</abbr>
    </td>
  </tr>
</table>

Answer 1

让我们消除一些困惑并看一下循环代码:

for(var i = 0; i < ratedSection.length; i++)
  for(var j = 0; j < ratedQuest.length; j++)
    for(var k = 0; k < selector.length; k++)

我猜你想写这个(伪代码):

FOR EACH section IN PAGE
  FOR EACH quest INSIDE section
    FOR EACH selector INSIDE quest

但你实际上正在这样做:

FOR EACH section IN PAGE
  FOR EACH quest IN PAGE
    FOR EACH selector IN PAGE

每次循环时，您都会查看一整页的任务/选择器项目，而不仅仅是当前部分内的项目。您将从文档而不是当前部分获取对任务和选择器的引用。

您不是迭代 100 次，而是迭代 10000 次。进入第一个循环时，在节对象上使用 querySelector