Javascript 画布优化答案

【问题标题】：Javascript Canvas OptimizationJavascript 画布优化
【发布时间】：2014-10-15 03:17:12
【问题描述】：

这是我正在尝试的一个 js 小提琴：

所有重要的事情都发生在

render()

画布将鼠标的位置合并到每个帧的每个块的颜色计算中。现在，无论我似乎从功能中删除了什么，画布在大尺寸 (1600 x 900) 下的渲染速度约为 10fps。

即使只是渲染纯黑色，填充样式没有变化，它也以 10fps 渲染。

对可能导致此问题的原因有任何见解吗？

【问题讨论】：

代码太多了，你应该在问题中发布代码，而不是在 jsfiddle 上
@Izzey 对大量代码感到抱歉，我不确定如何在不过度简化到无用的情况下对其进行提炼。对所发生的事情进行简短的解释对未来的人有帮助吗？
您是否尝试过在 Chrome 中使用分析器？
好吧。 A 画布越大，积木越多，积木更新越快。同时拥有setTimeout 和requestAniamtionFrame 也可能与此有关。并且仅仅因为它是黑色并不意味着它没有更新，您可以在黑色上绘制黑色。
那么不要为每个块设置填充样式。如果您可以批处理具有相同填充样式的块并同时绘制它们，那么您不必过多地更改上下文的状态。这是游戏引擎中常见的优化，它只是与您可能如何在逻辑上执行它有点反直觉。

【解决方案1】：

这个问题有点过于宽泛，无法回答。可能是由于单线效率低下的小问题，您的整个方法可能需要重新设计，或者您确实只是推动了太多像素。

因此，与其给你一条鱼，你应该学会自己钓鱼。

您应该知道的一件事是，2D 画布很慢。它非常依赖于填充率。这意味着您绘制的像素越多，速度就越慢。而且您的代码的本质是它会绘制很多像素。

如果您可以使用 WebGL，您可以通过硬件加速实现一些惊人的帧速率。但这需要完全重新设计这方面的所有内容并学习 GLSL。 See examples here。使用 GLSL 可以做的事情真是太棒了。

【讨论】：

谢谢，我很好奇 Web GL 是否会绕过我遇到的问题。我一定会更深入地研究分析工具。这个周末我也将深入了解 GLSL，我已经避免了太久了哈哈。
如果你发现瓶颈不在你自己的代码中，而是浏览器正在做的事情，那么你需要弄清楚如何少做那件事。或者完全重新考虑你的方法:) GLSL 很有趣，如果你想走那条路。
@RyanKilleen 我可以推荐shadertoy.com 作为第一种方法吗？这是我第一次成功尝试使用 WebGL。
@AlexWayne。同意 WebGL 在 Shaders 和 Blending Filters 等操作上更快、更高效。但是现代浏览器也可以硬件加速 2D Canvas，而且，如果设备有一个，GPU 可以非常有效地渲染 2D 绘图——可能比 3D 更有效，因为 2D 比 3D 更“平坦”（双关语！）并且 2D 自然适合GPU 通过合成绘制的方法。所以一定要测试 2D 画布...取决于您的设计要求。 ;-)