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

Question

我的问题是 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 ticker 每秒添加下一行并更改行 x 位置。

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

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

Answer 1

出现 out-of-memory 错误。潜在的内存泄漏。如果运行打开开发工具，它会显示 "Paused before potential out-of-memory-crash"。

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

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

但是，当out-of-memory错误发生时，xData.length大约是90。这些数组不能占用1500+ MB。

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

PIXI.graphics API doesn't seem to have a way to free old line segments. Instead of continuously moving and adding more line segments, I would clear 之前的图形并重新绘制整条线（跳过线中不可见的部分）。

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

Pixi.js makes browser crashed when use PIXI ticker

javascript

pixi.js