setInterval() 如何影响性能？答案

【问题标题】：How does setInterval() affect performance?setInterval() 如何影响性能？
【发布时间】：2013-04-12 19:27:59
【问题描述】：

我们正在构建一个使用 Twitter Bootstrap 作为框架的网络应用程序，但在显示/隐藏工具提示时遇到了问题。除了试图找到实际问题的解决方案之外，我还有一个关于我们在此期间使用的解决方法的问题：

就性能而言，使用 setInterval() 通常是个坏主意吗？

如何衡量由此造成的性能影响？

有没有更好的方法来不断检查元素的存在并删除它们？

// temporary workaround to remove unclosed tooltips
setInterval(function() {
    if ( $('.tooltip.in').length > 1 ) {
        $('.tooltip').remove();
    }
}, 1000);

【问题讨论】：

在您解决问题之前，这会很好，但如果我是您，我会考虑实际解决问题。
你的意思是问 setInterval 函数本身的性能影响是什么，还是你的意思是你对它的特定使用的性能？使用 setInterval 的性能取决于您在每个时间间隔执行的函数。

标签： javascript jquery performance web-applications

【解决方案1】：

如果你真的，真的担心性能，使用实时节点列表可能会更快：

var tooltipInNodes = document.getElementsByClassName("tooltip in");
var tooltipNodes = document.getElementsByClassName("tooltip");

setInterval(function() {
    if ( tooltipInNodes.length > 1 ) {
        $(tooltipNodes).remove();
    }
}, 1000);

不过，这不太可能有太大的不同，正如前面提到的，使用长间隔（一秒大，4 毫秒小）的 setInterval 不太可能产生任何重大影响。

【讨论】：

live nodelist 是昂贵的恕我直言
err...除了恕我直言，您还有其他来源吗？
youtube.com/watch?v=mHtdZgou0qU（我承认是旧视频，但取决于浏览器可能会有用）
说真的，如果您要链接到一小时长的视频，请告诉我他在哪里谈论节点列表。第二个 cmets 像“活节点列表很昂贵”是完全没用的，因为它取决于具体情况。如果我要遍历所有元素，我更喜欢静态列表（避免使用每个元素访问重新评估查询），但这不是这里发生的事情！
使用 jquery，查询会被重新评估，并且每秒都会构造一个完整的静态列表。使用实时节点列表，只重新评估查询的长度部分（在某些浏览器中缓存），因此在这种情况下，它会更快。

【解决方案2】：

最好避免这种技术，但在找到真正的解决方案之前，您可以优化此解决方法。

创建一个非匿名函数并调用它，您将避免每秒“创建上下文函数”。

您还可以通过缓存和指定标签名称来优化 jQuery 选择器。

setInterval(tmp_workaround, 1000);

function tmp_workaround() {
  var $selectors = $('[TAG IF ALWAYS THE SAME].tooltip.in');

  if ( $selectors.length > 1 ) {
    $selectors.remove();
  }
}

【讨论】：

如果你想缓存它们，你不应该选择函数之外的元素吗？
不这么认为，因为您必须每秒“刷新”缓存并可能获取新的打开元素，这很有用，因为没有缓存，您会解析 DOM 两次。第一次检查长度是否大于1，第二次删除所有元素。
为什么在原版删除 .tooltip 时要删除 .tooltip.in？
感谢这些建议，我会添加它们。
这里是怎么缓存的？并且非匿名功能也没有任何好处。除了标签名称（我什至不确定）我在这里看不到任何优化。