gpt4 book ai didi

javascript - 性能慢,在react中使用p5

转载 作者:行者123 更新时间:2023-12-03 13:12:50 25 4
gpt4 key购买 nike

我尝试在 React 应用程序中使用 p5 ( https://p5js.org/ ),但某些草图的性能非常糟糕(开发中与构建应用程序后相同)。我使用 create-react-app 作为项目脚手架,没有对build设置进行任何更改。

当直接在浏览器中运行草图时,它们的运行速度约为 50-60fps,但是当加载到 React 中时,它们会下降到大约 1-2fps。

我将草图与 react 连接起来,如下所示:

// React Component to interface the sketches
class P5Wrapper extends React.Component {

componentDidMount() {
const { sketch, ...rest } = this.props;
this.canvas = new p5(sketch(rest), this.wrapper);
}

componentWillReceiveProps(newProps) {
const { sketch, ...rest } = newProps;

if (this.props.sketch !== newProps.sketch) {
this.canvas.remove();
this.canvas = new p5(newProps.sketch(rest), this.wrapper);
}

if (typeof this.canvas.onNewProps === "function") {
this.canvas.onNewProps(newProps);
}
}

componentWillUnmount() {
this.canvas.remove();
}

render() {
return <div ref={(wrapper) => this.wrapper = wrapper} />;
}
}

// you can watch the sketch in action here (https://p5js.org/examples/simulate-game-of-life.html)
const gameOfLife = (props) => (p) => {
let w;
let columns;
let rows;
let board;
let next;

p.setup = () => {
p.createCanvas(1024, 768);
p.background(255);
p.noStroke();
w = 20;

columns = p.floor(p.width / w);
rows = p.floor(p.height / w);

board = new Array(columns);
for (let i = 0; i < columns; i++) {
board[i] = new Array(rows);
}

next = new Array(columns);
for (let i = 0; i < columns; i++) {
next[i] = new Array(rows);
}
init();
};

p.draw = () => {
generate();
for (let i = 0; i < columns; i++) {
for (let j = 0; j < rows; j++) {
if ((board[i][j] === 1)) p.fill(0);
else p.fill(255);
p.rect(i * w, j * w, w - 1, w - 1);
}
}
};

p.mousePressed = () => {
init();
};

const init = () => {
for (let i = 0; i < columns; i++) {
for (let j = 0; j < rows; j++) {
if (i === 0 || j === 0 || i === columns - 1 || j === rows - 1) board[i][j] = 0;
else board[i][j] = p.floor(p.random(2));
next[i][j] = 0;
}
}
};

const generate = () => {
for (let x = 1; x < columns - 1; x++) {
for (let y = 1; y < rows - 1; y++) {
let neighbors = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
neighbors += board[x + i][y + j];
}
}
neighbors -= board[x][y];
if ((board[x][y] === 1) && (neighbors < 2)) next[x][y] = 0;
else if ((board[x][y] === 1) && (neighbors > 3)) next[x][y] = 0;
else if ((board[x][y] === 0) && (neighbors === 3)) next[x][y] = 1;
else next[x][y] = board[x][y];
}
}
const temp = board;
board = next;
next = temp;
};
};

// render the wrapper and the sketch
ReactDOM.render(<P5Wrapper sketch={gameOfLife} />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<div id="root"/>

什么可能导致速度变慢?

最佳答案

这似乎是由于RAM可用内存不足引起的,当有足够的可用内存时,它会顺利运行。但当内存较少时,P5.js 会以低帧率运行。

简要说明我相信当我们使用 Node 运行 React 应用程序时,它肯定可以容纳大量的 RAM。特别是当我们使用 4GB 或更少 RAM 配置与节点一起运行 React 时,我们最终可能会以非常低的每秒帧数运行 P5.js 或任何图形内容。

提升内存或在另一台机器上运行

Low memory availability in RAM

关于javascript - 性能慢,在react中使用p5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47983010/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com