CSS模糊效果第一次耗时太长答案

【问题标题】：CSS blur effect takes too long the first timeCSS模糊效果第一次耗时太长
【发布时间】：2014-07-21 14:33:31
【问题描述】：

有一个页面我想用下面的函数来模糊：

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]);

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

编辑：

我需要注意的是，即使我在下次加载页面时关闭选项卡而不是实际浏览器，动画也能正常工作。

【问题讨论】：

如果您提供问题的演示（例如使用 JSFiddle）会很有用。
不幸的是，这不是一个选择。这是一个更大项目的一部分，如果我要提供一个演示，我需要重新编写。
演示非常有帮助。如您所知，如果没有看到更大的背景，很难说太多。有时您必须编写测试才能找到错误。
也就是说，模糊是一项代价高昂的操作，模糊半径越大，代价越大。您是否尝试过将半径减小到较小的值并查看是否可以缩短加载时间？
其实不是半径高，而是被模糊的元素的大小和数量。我知道为什么会滞后我只想知道为什么第二次没有滞后以及如何防止滞后。

标签： javascript css gsap

【解决方案1】：

“我知道为什么会滞后，我只想知道为什么第二次没有滞后以及如何防止滞后。”

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

来源： wiki Web_cache

【讨论】：