草庐IT

javascript - 隐藏 div 是否会停止动画(CSS 或 JS)？

coder 2024-07-25 原文

将任何基于 CSS 的加载器动画作为引用。通常，当某些回调函数执行成功时，div 会被隐藏，以表明结果已经到达。我的问题是，隐藏 div 实际上会停止动画吗？或者它们是否仍在继续耗尽 CPU 周期？

非 CSS 动画呢？

最佳答案

长话短说

My question is, does hiding the div actually stop the animation? Or do those still continue to use up CPU cycles?

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

What about non-CSS animations?

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 计算量很大(故意的)，你可以看到它们一直在后台运行。

关于javascript - 隐藏 div 是否会停止动画(CSS 或 JS)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35304730/

javascriptdivsection39cssanimationcpu-usage

有关javascript - 隐藏 div 是否会停止动画(CSS 或 JS)？的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  4. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

    我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

  5. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  6. ruby - 检查日期是否在过去 7 天内 - 2

    我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？ 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/

  7. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  8. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  9. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  10. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2

    这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub

随机推荐