nuxt.jsでページ遷移を繰り返すとcanvasが重くなっていく

Question

Nuxt.jsを使ってwebサイトを作っていますが、
TOPページにpixi.jsによって作られたcanvas要素があり、
ページ遷移をして再びTOPページに戻ってくるたびに挙動が重くなっていきます。

イベントリスナーが重なって重くなることはあると思うのですが、
canvas要素に対しては何をクリアしたら良いのかわかりません。

<template>
  <main>
    <div id="canvasWrapper" class="canvas"></div>
  </main>
<template>

const app = new PIXI.Application({
        width: canvasWidth,
        height: canvasHeight,
        autoResize: true,
        autoDensity: true,
        resolution: devicePixelRatio
});
$("#canvasWrapper").append(app.view)

mountedで、このようにしてcanvas要素を生成して、挿入しており、
なんとなくdestroyedのタイミングでappをクリア？したら良いのかなとは想像はできるのですが、、
アドバイスいただけましたら幸いです。
よろしくお願いします。

// 追記

app.loader
          .add(slieds)
          .add("ripple", "/img/top/ripple.png")
          .add("displacement", "/img/top/ripple2.jpg")
          .load((loader, resources) => {
          }

loaderを用いて画像などのリソースを読んでいるのですが、
loaderが悪さしている可能性などもあるのでしょうか。。

Answer 1

PIXI.jsは使ったことがないので間違っているかもしれませんが、
こことか見るとremoveChild使えとかdestroyメソッド使えとか色々言われていますね。

PIXI - destroy

あとは、StackOverflowの回答とか見ると、removeChild使ってcanvas自体を削除してもう一回作り直せみたいなこと書いてますね。Vueでこんな事やっちゃていいのかどうか怪しいですが・・・

https://stackoverflow.com/questions/18456160/how-to-destroy-reload-the-canvas-in-html-5

実際MDNとか見ても対象のDOMをメモリから削除できそうではあります

一度ここらへんを試してみて挙動を確認してみてはどうでしょう？

あともしかすると公式サイトのメモリリークを回避するページはメモリリークの測定方法とかも乗ってるので参考になるかもしれません

Comments

[okpk]

回答ありがとうございます。
destroyedフックでcanvasやcontainerなどインスタンスを生成している部分を一通りdestroy()してみると挙動が改善されました。