隐藏div停止动画(CSS还是JS)？

Question

考虑任何基于CSS的加载器动画作为参考.通常,当成功执行某些回调函数时,会隐藏div以指示结果已到达.我的问题是,隐藏div实际上是否停止了动画？或者那些仍然继续耗尽CPU周期？

那些非CSS动画呢？

Answer 1

长话短说

我的问题是，隐藏 div 真的会停止动画吗？或者那些仍然继续消耗 CPU 周期？

不确定动画状态在内部是如何定义的，但一旦隐藏就不会使用 CPU 周期。

那么非 CSS 动画呢？

CPU 周期不用于渲染，但用于底层的 JavaScript 计算。

以下是相关示例/测试的详细答案：

CSS

正如您在这里所看到的，浏览器（至少在我测试的浏览器中）似乎不会在不可见元素上浪费任何周期。它可能因浏览器以及浏览器版本而异。我认为较旧的浏览器不关心这一点，但所有现代浏览器都会尽力节省尽可能多的 CPU。

这是一个片段/证明，尝试将深色 div 加倍，直到它开始窒息，然后切换它们并查看浅色 div 的行为：

function dbl(){
  var c = document.querySelectorAll('div.reg').length;
  for(var i = 0; i < c; i++){
    var div = document.createElement('div');
    div.className = 'reg';
    document.body.appendChild(div);
  }
}

function toggle(){
  var divs = document.querySelectorAll('div.reg');
  for(var i = 0; i < divs.length; i++){
    divs[i].style.display = 
      divs[i].style.display == 'none' ? 
      'inline-block' : 'none';
  }
}

div {height: 50px; width: 50px; margin: 2px; display: inline-block; background: #eee; animation: rot 1s linear infinite}

div.reg {background: #ccc}

@keyframes rot {
  0% { transform: rotateZ(0deg) }
  100% { transform: rotateZ(360deg) }
}

<button onclick="dbl()">Double dark divs</button>
<button onclick="toggle()">Toggle dark divs</button><br>
<div></div>
<div class="reg"></div>

JS（非 CSS）

对于非 CSS 内容，浏览器不会浪费任何周期来渲染动画，但 JavaScript 动画计算肯定会发生。

var r = 1;
var fps = document.querySelector('span');
var lastFrame = new Date();

function dbl(){
  var c = document.querySelectorAll('div.reg').length;
  for(var i = 0; i < c; i++){
    var div = document.createElement('div');
    div.className = 'reg';
    document.body.appendChild(div);
  }
}

function toggle(){
  var divs = document.querySelectorAll('div.reg');
  for(var i = 0; i < divs.length; i++){
    divs[i].style.display = 
      divs[i].style.display == 'none' ? 
      'inline-block' : 'none';
  }
}

function rot(){
  var divs = document.querySelectorAll('div');
  for(var i = 0; i < divs.length; i++){
    divs[i].style.transform = 'rotateZ(' + r + 'deg)';
  }
  r = (r+1)%360;
  fps.textContent = parseInt(1000 / (new Date() - lastFrame), 10);
  lastFrame = new Date();
  window.requestAnimationFrame(rot);
}

function kill() {
  var divs = document.querySelectorAll('div.reg');
  for(var i = 1; i < divs.length; i++){
    divs[i].parentElement.removeChild(divs[i]);
  }
}

rot()

div {height: 50px; width: 50px; margin: 2px; display: inline-block; background: #eee;}

div.reg {background: #ccc}

<button onclick="dbl()">Double dark divs</button>
<button onclick="toggle()">Toggle dark divs</button>
<button onclick="kill()">Kill dark dupes</button>FPS: <span></span>
<br>
<div></div><div class="reg"></div>

这里的 JS 计算非常繁重（故意的），你可以看到它们一直在后台运行。