HTML Canvas 与 Stacked Div 性能答案

【问题标题】：HTML Canvas Vs Stacked Div PerformanceHTML Canvas 与 Stacked Div 性能
【发布时间】：2011-11-26 12:02:34
【问题描述】：

基本上我有一个这样的 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 个 div、3 个画布图像和 3 个边框图像 (png)，位于 3 个画布图像之上。并且 3 个主要 div 相互堆叠。我使用 jQuery animate 进行了很多不透明度更改来制作动画。

您可以猜到，某些浏览器显示此动画时相当不稳定，并且在功能较弱的计算机上可能会更糟。

我的问题是，是否有可能只用 1 个画布标签重写所有这些，同时仍然拥有所有这些动画，但性能也比我目前的表现要好得多？

【问题讨论】：

标签： jquery performance html canvas

【解决方案1】：

很难说为什么你的代码在这里很慢。

您没有那么多 DOM 元素，所以这可能不是问题。

您可能应该分析代码。在 Chrome 或 IE 中按 F12，转到分析器选项卡，运行它，看看一直在吃什么。

您到底想要完成什么？某种模糊效果？如果您尝试做的事情可以通过这种方式轻松完成，那么在一个画布中完成所有这些操作可能更可取。

什么样的动画？您是否在物理移动 DOM 元素？那很糟。从性能的角度来看，如果可以避免的话，永远不要对 DOM 做任何事情。如果是这种情况，那么将所有内容放在一个画布上可能会有很大帮助。再说一次，这么少的细节很难说。

你只是在做模糊动画吗？一般来说，CSS 模糊比 Canvas 模糊更快（并且更容易编写）。

无论如何，答案可能不是“太多 DOM 元素”。要么是过多的 DOM 繁重的东西，要么是动画循环中的重复工作，要么是 DOM 交互过多，而 all-in-canvas 会更好。

【讨论】：