Javascript CSS模糊效果第一次使用的时间太长

我想使用以下功能模糊一个页面：

var mainInfo;
function clonemain() {
    var Main = document.querySelector('#main');
    var Clone = Main.cloneNode(true);
    Clone.style.opacity=0;
    Clone.style.filter="blur(6px)";
    Clone.style.webkitFilter="blur(6px)";
    Clone.style.mozFilter="blur(6px)";
 }       
 document.querySelector('body').appendChild(Clone);
    return [Main,Clone];
}
function blurry(Main,Clone) {
    TweenLite.to(Main,0.25,{opacity:0});
    TweenLite.to(Clone,0.25,{opacity:1});
    Clone.style.display="block";
}

它复制一个

div

，使用

opacity=0将其模糊并隐藏

问题是第一次不透明度改变和复制发生时需要花费大量时间。它在下次加载动画时工作正常。
例如，这个问题可以通过对页面加载进行某种“预处理”来解决，先进行模糊处理，然后立即恢复正常，但仍然需要相同的时间

blurry(mainInfo[0],mainInfo[1]);
blurry(mainInfo[1],mainInfo[0]);

有人知道为什么会发生这种情况以及如何解决吗

编辑：

我需要注意的是，即使在下次加载页面时关闭选项卡而不是实际浏览器，动画也可以正常工作。
“我知道它为什么会滞后，我只想知道它为什么不会第二次滞后，以及如何防止滞后。”

原因是web浏览器的缓存：
web缓存是一种用于临时存储（缓存）web文档（如HTML页面和图像）的机制，以减少带宽使用、服务器负载和感知延迟

资料来源：
如果您提供问题的演示（例如使用JSFIDLE），这将非常有用。不幸的是，这不是一个很好的选择。这是一个更大项目的一部分，如果我要提供一个演示，我需要再写一次。尽管演示非常有用。正如你所知道的，如果不考虑更大的背景，很难说得更多。有时你必须编写一个测试来发现一个bug。也就是说，模糊是一个昂贵的操作，而且模糊半径越大，成本就越高。您是否尝试过将半径减小到一个较小的值，看看这是否会缩短加载时间？实际上，半径不是很高，而是被模糊的元素的大小和数量。我知道它为什么会滞后，我只想知道它为什么不会第二次滞后，以及如何防止滞后。