如何使用javascript获得良好的帧率？

我正在尝试使用像素操作将过滤器应用于javascript中的全高清视频

我使用隐藏画布、web workers和可转移内容创建了一个演示：

结果是，使用web workers浏览器的选项卡在短时间内崩溃，视频的性能非常低（约5fps）

如果选择“Web workers:0”ww不使用，则性能会更好（~15fps），并且选项卡不会崩溃

我能怎么办？目标是获得良好的帧率（~30fps），避免SVG或CSS过滤器

---

谢谢。

循环遍历所有像素并在CPU上转换它们不是一个好主意。这就是GPU的用途。在过去，这意味着你必须使用一些讨厌的东西，比如Flash

幸运的是，新技术正在涌现，图形加速在大多数流行浏览器中都可用。它被称为WebGL，它允许您使用图形卡来实现这些功能

除非您想了解WebGL的所有内部秘密（它相当复杂），否则我建议您使用PixiJS框架，它是为2D动画设计的

您可以在此处看到他们的过滤演示：

---

这里有更多的演示和示例：

在较小的图像上执行像素操作，或者使用最大全局合成操作而不是像素操作。由于不知道您想要什么效果，很难为您提供更多帮助。演示使用灰度，但“过滤器”应该是任何东西，例如模糊、色度键、rgb通道调节、水印，以及您可以操作像素的一切。@Killy您需要缩小问题的范围。你真的不能指望有人深入研究你的项目并对你的表现进行基准测试。但无论如何，我强烈建议您使用WebGL。PixiJS框架有很好的演示，显示了高FPS的过滤器：灰度可以用gCO完成，模糊可以用drawImage完成，色度键应该在较小的图像上完成，rgb通道=>gCO。浏览器开始在本地支持哦，如果你只想显示过滤后的视频，还有CSS过滤器的可能性，可以直接应用在视频元素上。谢谢大家，我将此标记为解决方案，但你的评论都很有用：）Canvas2d API也会传输到GPU。要避免的一件事是getImageData/putImageData@Kaiido嗯，静态图像是如何处理的（GPU/CPU）是完全无关的。这里我们需要的是某种动画。我的观点是，所有合成操作都由gpu处理，drawImage由gpu处理，而过滤器（如果支持）则由gpu处理。不是的是getImageData和putImageData。即使在那里，你也可以足够聪明地在缩小的帧上执行像素操作，然后使用gCO将其应用到正常缩放的帧上。我可能还没有得到你的静态图像参考。OP正在过滤一个视频（一组静态图像？），如果我没有错的话，因为我对webGL知之甚少，这意味着他必须在每一帧创建一个新的纹理。不确定纹理的创建是否在GPU上执行。