3

次の方法でキャンバス要素を作成する場合：

var canvas = document.createElement('canvas');

そしてそれに引き寄せます。次に、そのキャンバスへの参照を保持すると、キャンバスのコンテンツをデータURLに変換し、そのデータを使用して画像要素を作成してキャンバスへの参照を解放するよりも多くのメモリを使用しますか？

どちらがメモリ消費量が少ないですか？キャンバス要素または画像要素、両方とも同じ画像データで同じ寸法ですか？

4

1 に答える 1

5

このhtmlテストページの使用：

<html>
    <head>
        <script type="text/javascript">
            window.onload = function () {
                var c = document.getElementById("canvas");
                var ctx = c.getContext("2d");
                var img = new Image;
                img.src = "http://blog.buzzbuzzhome.com/wp-content/uploads/2012/06/Canadian-Flag-canada-729711_1280_1024.jpg";
                ctx.drawImage(img, 0, 0);
            }
        </script>
    </head>
    <body>
        <canvas id="canvas" width="1280" height="1024"></canvas>
        <img src="http://blog.buzzbuzzhome.com/wp-content/uploads/2012/06/Canadian-Flag-canada-729711_1280_1024.jpg">
    </body>
</html>

GoogleChromeプロファイルスナップショットからのメモリ出力は次のとおりです。

GoogleChrome->開発ツール->プロファイル->ヘッドスナップショットを撮る->クラスフィルター：HTML

GoogleChrome->開発ツール->プロファイル->ヘッドスナップショットを撮る->クラスフィルター：HTML

キャンバスの保持サイズは小さくなりますが（画像の132〜152）、画像のレンダリングで残ったものを調べると、さらに多くのことがわかります。

クラスフィルター：キャンバス

クラスフィルター：キャンバス

私見では、ほとんどの主要なブラウザでキャンバスにレンダリングするためのオーバーヘッドを支払うことになります。

参照が解放され、最終的なメモリ使用量が少なくなったときに混乱が解消されるかどうかは、誰もが推測できます。

私はあなたが意図したように厳密にやっていないことを理解していますが、並べて比較すると、何が関係しているのかがわかると思いました。

キャンバスを介して画像をロードすることが唯一の方法である場合、おそらく最終結果を出力する前に何らかの操作を実行し、それをキャンバスに残してガベージコレクションのすべての参照を無効にしようとすると、少し安価になります。クライアント。

このテストはGoogleChromeでのみ行われ、他のブラウザでは何も確認できません。

自分で試してみてください！

于 2013-01-22T21:33:16.047 に答える