基于倒数计时器的最佳性能 Javascript 条件答案

【问题标题】：Best performance Javascript conditionals based on countdown timer基于倒数计时器的最佳性能 Javascript 条件
【发布时间】：2017-06-26 18:36:44
【问题描述】：

我目前正在开发一个项目，该项目基于倒数计时器显示和显示DOM 元素。每秒都有另一个函数调用这个函数。

这是一个代码示例：

function eventsOnTimer() {

  let x = 1;

  const interval = setInterval(() => {

    if (x >= 0.0 && x < 30.0) {
      document.getElementById('thing1').style.display = 'block';
      document.getElementById('thing2').style.display = 'none';
    } 

    else if (x >= 30.0 && x < 60.0) {
      document.getElementById('thing1').style.display = 'none';
      document.getElementById('thing2').style.display = 'block';
    }

    x++;

  }, 1000);

}

我正在尝试提高性能，为此我尝试减少 DOM 请求的数量并寻找基于倒数计时器触发代码的替代方法。

【问题讨论】：

缓存 DOM 查找（调用 .getElementById() 的结果）。
你确定这真的是一个瓶颈吗？每秒 2 次 DOM 更改是微不足道的。
CSS 不是一个选项？
@Malk 我在想类似的事情，但是改变一个类然后查找该类的 CSS 并不比直接改变样式更好。我什至不确定如何对其进行基准测试，因为它是异步浏览器渲染。
我想知道为什么你每秒都运行这个函数，然后使用if() 语句，所以它每 30 秒才改变一次。

标签： javascript jquery performance dom timer

【解决方案1】：

类似

function eventsOnTimer(id1, id2, ms) {
  let toggle = false, thing1 = document.getElementById(id1), thing2 = document.getElementById(id2);

  const interval = setInterval(() => {
      if(toggle){
        thing1.style.display = 'block';
        thing2.style.display = 'none';
      } else{
        thing1.style.display = 'none';
        thing2.style.display = 'block';
      }
      toggle = !toggle;
  }, ms);
}

eventsOnTimer('thing1', 'thing2', 30000);

【讨论】：

【解决方案2】：

您可以在运行计时器之前存储所有节点引用以减少 DOM 访问时间 (getElementById)。

之后，使用 className 而不是 style 属性会更快。你只需要为每个状态声明一个特定的 CSS 规则。

我向您建议一个通用函数，以自动设置所有具有相同 CSS 类名称的节点。

var nodeArray = [];
var max_node = 2; 

function storeNodeRef() {
 for(var i =1; i <= max_node; i++) {
  nodeArray.push( document.getElementById("thing"+i)); // Your nodes are declared with ID thing"X". "X" is a numeric value, set "max_node"  with the latest "X" value.
 }
  eventsOnTimer();
}

function setNodeClass(nodeClassName) {
  var i = 0;
  while(i < max_node) {
    nodeArray[i++].className = nodeClassName;
  }

}

function eventsOnTimer() {
  let x = 1;
  const interval = setInterval(() => {
    if (x==30 || x == 60) { // declare here your different state, you can use multiple if/elseif or multiple switch case.
      setNodeClass('hide myClass'+x); // Param : new className
    } 
    x++;
  }, 1000);
}

 storeNodeRef();

CSS

  .process > div, .hide {display:none;}
  #thing2.myClass30, #thing1.myClass60, .process > div.show {display:block; }

HTML 示例

<div class="process">
    <div id="thing1" class="show" >Hello World 1</div>
    <div id="thing2">Hello World  2</div>
</div>

【讨论】：

没有证据表明设置类名比设置样式更快。请看stackoverflow.com/questions/693719/…
我知道这并不总是正确的，但在全球范围内使用大量浏览器类名比样式属性最快。差别不大，但如果您管理大量节点，您可以节省时间。