基本上我有这样的div设置：
<div class="pane">
<div class="banner">
<img class="original" src="images/picture.jpg" width="100%" height="100%" />
<div class="blurred"></div>
<div class="blurred_colour"></div>
<div class="focused"></div>
</div>
</div>
好的，我的脚本会隐藏.original，然后获取它的来源，并为每个div创建3个不同的图像。它们都是在javascript中生成的canvas标签。
.blurred包含原始的去饱和和模糊版本。 .blurred_colour包含模糊版但有颜色。 .focused只是原始图片。
现在我还在每个div的顶部放置了一个边框图像并将其置于相对位置，使其显示在顶部而不是div之下。因此，如果您保持跟踪，那就是3个画布图像，3个画布图像和3个边框图像（png）位于3个画布图像的顶部。并且3个主要div相互堆叠。我通过jQuery动画使用很多不透明度变化进行动画制作。
你可以猜到，有些浏览器显示这个动画相当不稳定，而且功能较弱的电脑可能会更糟。
我的问题是，是否可以只用1个canvas标签重写所有这些，同时仍然拥有所有这些动画但是还有比我目前正在做的更好的性能？
答案 0 :(得分：1)
很难说为什么你的代码在这里很慢。
您没有许多DOM元素，因此可能不是问题。
您应该剖析代码。在Chrome或IE中使用F12，转到“分析器”标签，运行它，看看所有时间都在吃东西。
你想要完成的是什么？某种模糊效果？在一个画布中完成所有这些操作可能更好，只要您尝试做的事情可以通过这种方式轻松完成。
什么样的动画？你在物理上移动DOM元素吗？那很糟。从性能角度来看，如果可以避免，就不要对DOM做任何事情。如果是这种情况，那么将所有内容放在一个画布上可能会有很大帮助。再说一次，用这么小的细节很难说。
你是在做模糊动画吗？通常，CSS模糊比Canvas模糊更快（并且更容易编写）。
无论如何，答案可能不是“DOM元素太多”。它可能是过多的DOM重要的东西，也可能是动画循环中的重复工作，或者当画布全部更好时，DOM交互过多。