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

How to obtain good framerate using javascript?

本文关键字：帧率何使用 javascript 更新时间：2023-09-26

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

我使用隐藏画布、web worker和transferables创建了一个演示:

http://lab.jure.it/ww/ww.html

使用web worker的结果是浏览器的标签在短时间内崩溃，视频的性能非常低(约5fps)。

如果你选择"Web workers: 0"ww不使用，性能会更好(~15fps)，并且标签不会崩溃。

我能做什么呢?目标是获得良好的帧率(~30fps)，避免使用SVG或CSS过滤器。

谢谢。

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

幸运的是，新技术正在兴起，大多数流行的浏览器都可以使用图形加速。它叫做WebGL，它允许你使用显卡来做这些事情。

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

你可以在这里看到他们的过滤演示:http://www.goodboydigital.com/pixijs/examples/15/indexAll.html

更多演示和示例在这里:https://pixijs.github.io/examples/#/basics/basic.js