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

我的问题是Chrome浏览器在大约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>

这是折线图的简单代码。


添加一个基本的PIXI容器
用4个点画第一条线。
使用PIXI代码每秒添加下一行，然后更改第x行的位置。


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

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

最佳答案

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

内存使用量迅速超过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先前的图形重新绘制整个线（跳过不可见的线部分）。

关于javascript - Pixi.js使浏览器在使用PIXI代码时崩溃，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56337358/