javascript - Pixi.js 在使用 PIXI ticker 时使浏览器崩溃

Question

我的问题是 chrome 浏览器在 ticker 开始大约 2 分钟后停止了。

const renderer = new PIXI.Renderer({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50,
    antialias: true,
});

const stage = new PIXI.Container();
const ticker = new PIXI.Ticker();

const initialLine = new PIXI.Graphics();
const dx = 0.2;

const xData = [50, 100, 150, 200];
const yData = [20, 90, 40, 100];

let lastX = xData[xData.length - 1];
let lastY = yData[yData.length - 1];


document.body.appendChild(renderer.view);

const simpleLine = () => {
    initialLine.lineStyle(2, 0xFFFFFF, 1);
    initialLine.moveTo(0, 0);
    for (let i = 0; i < xData.length; i++) {
        initialLine.lineTo(xData[i], yData[i]);
    }

    initialLine.position.x = 150;
    initialLine.position.y = 50;

    stage.addChild(initialLine);
}

const addLine = () => {
    const lastIndex = xData.length - 1;
    const newX = xData[lastIndex];
    const newY = yData[lastIndex];

    initialLine.moveTo(lastX, lastY);
    initialLine.lineTo(newX, newY);
}

const moveLine = () => {
    initialLine.position.x -= dx;
}

const setTicker = () => {
    ticker.add(() => {
        moveLine();
        addLine();
        renderer.render(stage);
    }, PIXI.UPDATE_PRIORITY.LOW);
    ticker.start();
}

const changeData = () => {
    lastX = xData[xData.length - 1];
    lastY = yData[yData.length - 1];
    xData.push(lastX + 10);
    yData.push(Math.floor(Math.random() * 100));
}

setInterval(() => {
    changeData();
}, 1000);

simpleLine();
setTicker();

body { margin: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.3/pixi.min.js"></script>

这是折线图的简单代码。

1. 添加一个基本的 PIXI 容器
2. 用 4 个点绘制第一行。
3. 使用 PIXI ticker 和更改行 x 位置每秒添加下一行。

目前运行良好，但大约 2 分钟后，浏览器崩溃了。

我不知道为什么以及如何解决它。帮帮我!

Answer 1

存在内存不足错误。潜在的内存泄漏。如果在开发工具打开的情况下运行，它会显示“在潜在的内存不足崩溃之前暂停”。

内存使用量迅速超过 1500 MB。但是如果这些行被注释掉，内存使用似乎保持稳定:

// xData.push(lastX + 10);
// yData.push(Math.floor(Math.random() * 100));

但是，当发生内存不足错误时，xData.length 约为 90。这些数组不能占用 1500+ MB。

我不确定 PIXI 如何存储图形对象，但我认为 initialLine 占用了大部分内存。 initialLine 正在向左移动，并且有一个很大的、不断增长的部分看不见。内存不足的错误是不可避免的!理想情况下，initialLine 中不可见的部分应该被释放。

PIXI.graphics API似乎没有办法释放旧线段。我不会不断移动和添加更多线段，而是 clear以前的图形并重新绘制整条线(跳过线中不可见的部分)。