小编aap*_*320的帖子

我正在开发一个使用 p5.js 作为前端的应用程序。它是一个覆盖整个屏幕的画布，并有许多不同的组件。

该应用程序已经发展成为每帧渲染的许多组件，正如您所料，这对 CPU 使用率有很大影响。

我使用面向对象的方法。这允许我在构建元素时计算渲染元素所需的所有属性，因此在 draw() 期间完成了非常少量的计算。性能问题显然来自渲染，渲染有时会出现类似上面示例的循环。

我正在寻找优化渲染的方法。一种想法是将图形缓冲区用于需要循环的元素，例如网格和图形（或 p5.js 中的形状），以及用于静态元素（颜色、大小等很少改变的元素）。

另一种选择是使用 noLoop() 和 redraw() 方法，但这会使多个动画的实现成为一场噩梦。

有没有人在渲染大量元素时使用 p5.js 遇到性能问题（低 fps、高 CPU 使用率）？

是否可以解决这些问题或以某种方式优化渲染？

创建图形缓冲区并通过 image() 渲染它们会比正常渲染更快吗？例如：

var canvas;
var buffer;
var w = 200,
    h = 200;

var nX = 100,
    nY = 100;

function setup() {
  canvas = createCanvas(400, 400);
  canvas.background(0);
  buffer = makeGridBuffer(w, h, nX, nY);
}

function draw() {
  image(buffer, 0, 0);          // <- Will this be faster than
  makeGrid(w, h, w, h, nX, nY); // …