DOM 变化时动画缓慢

Posted 2023-05-09

【中文标题】DOM 变化时动画缓慢

【英文标题】：Sluggish animation on DOM change

【发布时间】：2015-03-20 16:07:14

【问题描述】：

假设我有一个持续运行的动画，而不是 css、javascript，或者在这种情况下为了简单起见是一个 .gif 文件，然后我 附加到 DOM 像 youtube iframe 这样的“重”元素和持续的动画会缓慢一秒钟。

是否有任何直接或变通的方法来实现这种 DOM 更改而不交错动画？

在下面的示例中，请注意，如果您将 iframe 更改为另一个 gif，甚至是一个具有相当简单网站的 iframe，动画运行时不会出现交错或迟缓的情况。

演示/示例：http://codepen.io/anon/pen/xbdewR

*** 发出警告，提示 codepen.io 的链接必须附有代码，这是我第一次发帖，所以我希望这是它所要求的：

$('.button').on('click', function(e) 
  // Sluggish
  $('.video-container').html('<iframe   src="//www.youtube.com/embed/FprQEGc3Za4" frameborder="0" allowfullscreen></iframe>');

  // Not Sluggish
  //$('.video-container').html('<img src="http://media2.giphy.com/media/e7FOBuKCDtwWI/giphy.gif"/>');

  // Not Sluggish
  //$('.video-container').html('<iframe   src="http://html5doctor.com/" frameborder="0" allowfullscreen></iframe>');

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://media.giphy.com/media/lRBEntSxN87WE/giphy.gif"  />
<div class="video-container">
  <a class="button" href='#'>wait for the gif to load completely and press me</a>
</div>

【问题讨论】：

每个tab只有一个主线程，dom重新布局和gif动画都使用它。某些视频可能是硬件加速的，但加载它可能总是会减慢渲染速度。

【参考方案1】：

很遗憾，您的问题没有解决方案...这是网络浏览器的问题。

这篇文章可能对你有所帮助：Why does my spinner GIF stop while jQuery ajax call is running?

【参考方案2】：

加载 iframe 会导致加载、布局和 DOM 更改的大量延迟。

您可以通过使 iframe display: none 直到需要，然后使用 display: block 渲染它来减少一些影响。即使它不可见也不会自动播放。

【参考方案3】：

您可以执行以下操作：

为您的 iframe 编写 html 代码，样式为 display : none

<iframe   src="//www.youtube.com/embed/FprQEGc3Za4" frameborder="0" style="display:none;" allowfullscreen></iframe>

当你点击按钮时，代码 js 代码应该是：

$('.button').on('click', function(e)
    $('iframe').css('display','block');
);

这样你的 gif 文件就不会卡顿了。

【讨论】：

不，这不起作用，显示无时仍然会发生惊人的情况，@eric-blade 提到的相同修复