Canvasのメモリーリーク疑いについて

2011/03/22 23:07

このQ&Aのポイント

Canvasを使用したペイントソフトにおいて、大量のレイヤーを使用するとメモリーリークが発生している可能性がある。
特にFirefoxでは、1レイヤーにつき1MB程度のメモリを消費している。
メモリーリークが起きた場合の対処方法やCanvasの代替案について教えてほしい。

Canvasのメモリーリーク疑いについて

現在、Canvasを使ってペイントソフトにあるような「レイヤー」的なことが出来ないか実験をしています。 (レイヤー数に関しては、最大で24程度を考えています。) 環境等は、以下の通りです。 OS：Windows XP Pro(SP3) 32bit メモリ:2GB ブラウザ：各ブラウザの最新版(FireFox,Chrome,Opera,safariも実施予定です。) 実験の結果、大量のレイヤーを使用した場合についてメモリーリーク的な問題が発生しているような感じがしています。もちろん、レイヤーなのである程度のメモリ消費は承知の上だったのですがタブを閉じた際や描画してから時間が経過してもメモリ使用量が減少しないのは使用上問題がありますので質問させて頂くことになった次第です。 (なお、レイヤー数を削減すると、比例してメモリ使用量も削減されていました。メモリ使用量に関しては、タスクマネージャのプロセスタブのメモリ使用量で見ています。) で、この問題が特に顕著なのが、Firefoxです。私見では、1レイヤーにつき1MB程度消費してしまう感じです。他のブラウザ(クローム、オペラ)では一時的にメモリ使用量は増加しますが、時間が経過するとだいたい元にもどります。なお、実験は以下のようなサンプルを作成して行っています。 (途中省略しています。) ご教授して頂きたい点は、以下になります。 ■メモリーリークが起きている場合の対処方法 (特にFirefoxにおける対処方法) ■Canvasを使用しない場合の代替案宜しくお願い致します。 <html> <head> <script> function draw() { canvas = document.getElementById("g0"); if(!canvas || !canvas.getContext) return false; ctx = canvas.getContext('2d'); ctx.font = "15px 'ＭＳＰゴシック'"; ctx.fillStyle = "black"; ctx.fillText("aaa", 100, 100); canvas = document.getElementById("g1"); if(!canvas || !canvas.getContext) return false; ctx = canvas.getContext('2d'); ctx.font = "15px 'ＭＳＰゴシック'"; ctx.fillStyle = "black"; ctx.fillText("bbb", 150, 150); canvas = document.getElementById("g23"); if(!canvas || !canvas.getContext) return false; ctx = canvas.getContext('2d'); ctx.font = "15px 'ＭＳＰゴシック'"; ctx.fillStyle = "black"; ctx.fillText("eee", 300, 300); } function start() { draw(); } </script> </head> <body onload="start()"> <body onload="start()"> <canvas height="500" width="500" class="g" id="g0"></canvas> <canvas height="500" width="500" class="g" id="g23"></canvas> </body> </html>

armada-compaq
お礼率100% (4/4)

JavaScript
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

think49
ベストアンサー率59% (285/482)

2011/03/23 16:08 回答No.3

「Windows XP Pro SP3 + Firefox4 + タスクマネージャ」で確認しましたが、リークしているようには見えません。ページ描画時に一時的にメモリ消費量が増加し、やがて消費量が減ります。タブを閉じればメモリは解放されました。 (<body onload="start()"> を削る、DOCTYPE宣言を加える等、やや変更を加えていますが基本的には掲示されたコードと同じです) http://fiddle.jshell.net/mQpwL/ Firefox の拡張やPluginを全てオフにしても再現しますか？ Firefox のバージョンは 4 でしょうか？

質問者

お礼 2011/05/03 23:26

ご連絡が遅くなりまして大変申し訳ありませんでした。質問させて頂いた後で4がリリースされたのを知りまして 4にしてみました。で、プラグインをオフにするとかなり改善されることがわかりました。ご助言して頂きましてありがとうございました。

その他の回答 (2)

yyr446
ベストアンサー率65% (870/1330)

2011/03/23 11:17 回答No.2

OS：Windows XP Pro(SP3) 32bit メモリ:2GB Firefox:3.6.15 で、あえて <body onload="start()"> <body onload="start()"> のまま試したけど、別にリークしてませんね？（Windowタスクマネージャのメモリ使用量とメモリデルタで確認した）他にも別パターン（ローカル変数化とか）いろいろやったけど、ご提示のような単純パターンだとリークはしてませんね。

質問者

お礼 2011/05/03 23:32

ご連絡が遅くなりまして大変申し訳ありませんでした。確かにそのようです。もう少し試行錯誤してみます。ありがとうございました。

JidousyaGaisya
ベストアンサー率23% (45/189)

2011/03/23 00:37 回答No.1

RAMディスク化用のAPPとか常駐Software・Serviceとかによる邪魔の不在証明は可能でしょうか？

質問者

お礼 2011/05/03 23:33

ご連絡が遅くなりまして大変申し訳ありませんでした。完全な証明は出来ないですが、その状態でのみ再現性を確認したのでほぼ間違いないと思います。

Canvasのメモリーリーク疑いについて

Canvasのメモリーリーク疑いについて

質問者が選んだベストアンサー

お礼 2011/05/03 23:26

その他の回答 (2)

お礼 2011/05/03 23:32

お礼 2011/05/03 23:33

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう