Javascript DOM变化的缓慢动画

想象一下，我有一个常量动画运行，而不是css、javascript，或者为了简单起见，在本例中是一个.gif文件，然后我向DOM添加一个“重”元素，如youtube iframe，常量动画会在一秒钟内变得缓慢

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

在下面的示例中，请注意，如果您将iframe更改为另一个gif，或者甚至是一个具有相当简单的网站的iframe，则动画运行时不会摇晃或变慢

演示/示例：

stackoverflow发出警告，指向codepen.io的链接必须附带代码，这是我第一次发布，所以我希望这就是它的要求：

$（'.button'）。在（'click'，函数（e）上{
//迟钝的
$（'.video container'）.html（''）；
//不慌不忙
//$（'.video container'）.html（''）；
//不慌不忙
//$（'.video container'）.html（''）；
});
不幸的是，您的问题没有解决方案。。。这是一个网络浏览器的问题

这篇文章可能会对您有所帮助：
加载iframe将导致加载、布局和DOM更改的巨大延迟

您可以通过使iframe显示为：none直到需要时，然后使用display:block呈现它，来减少一些影响。。不确定您是否对iframe视频有足够的控制权，即使它不可见，也不能使其自动播放。
您可以执行以下操作：

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

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

这样，您的gif文件就不会迟钝。
每个选项卡只有一个主线程，dom重新布局和gif动画都使用它。一些视频可能是硬件加速的，但加载它可能会降低渲染速度。不，这不起作用。显示器仍然会出现令人震惊的情况。无，与@eric blade提到的修复方法相同
$('.button').on('click', function(e){
    $('iframe').css('display','block');
});