这个Javascript非常慢

Question

我要完成的工作：

我试图将abbr的标题分别更新为“ .Left”和“ .Right”类中的值。 我已经提出了一个jQuery解决方案，但是就加载时间而言，这太昂贵了，我正试图提出一个Javascript解决方案，但是我遇到了麻烦。 我是JS的新手，所以我对DOM有很多了解。

我给的HTML重复了100次（相同的骨骼）。 如何提高代码效率？ 另外，我收到“无法设置null的属性标题”错误。

 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

循环的每一遍，您都将查看整个页面的任务/选择器项，而不仅仅是当前部分中的内容。 您正在从document而不是当前部分获得对任务和选择器的引用。

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