Question

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

非CSS动画怎么样？

Answer 1

TL; DR

我的问题是，隐藏div实际上是否会停止动画？或者那些仍然继续耗尽CPU周期？

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

非CSS动画怎么样？

CPU周期不用于渲染，但它们用于幕后的JavaScript计算。

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

CSS

正如你在这里看到的那样，浏览器（至少我测试过它）似乎不会浪费任何不可见元素的循环。它可能因浏览器和浏览器版本而异。我认为旧浏览器并不关心这一点，但所有现代浏览器都会尝试尽可能多地节省CPU。

这是一个片段/证据，尝试将黑暗的div加倍，直到它开始窒息，然后切换它们，看看灯光div的行为：

＆＃13;

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';
  }
}

＆＃13;

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) }
}

＆＃13;

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

＆＃13;

JS（非CSS）

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

＆＃13;

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()

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

隐藏div停止动画（CSS还是JS）？

1 个答案:

TL; DR

CSS

JS（非CSS）