StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Using this html test page:</p> <pre><code><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> </code></pre> <p>The memory output from a Google Chrome profile snapshot is as follows:</p> <p><img src="https://i.stack.imgur.com/LTtTr.gif" alt="Google Chrome -> Developer Tools -> Profiles -> Take Head Snapshot -> Class Filter:HTML"></p> <p>Google Chrome -> Developer Tools -> Profiles -> Take Head Snapshot -> Class Filter:HTML</p> <p>The canvas has a smaller retained size (132 to 152 of the img), but a look into what's left over from rendering the image reveals more:</p> <p><img src="https://i.stack.imgur.com/CscYh.gif" alt="Class Filter:canvas"></p> <p>Class Filter:canvas</p> <p>IMHO you're going to pay an overhead for rendering to the canvas in most major browsers.</p> <p>Whether the mess gets cleaned up when your reference is released and your final memory usage is lower is anyone's guess.</p> <p>I realize I didn't do it strictly the way you intended, but I felt a side by side comparison would give you some idea what's involved.</p> <p>I suppose if loading the image via canvas is the only way to go, perhaps you're performing some manipulation before outputting the final result, then leaving it in the canvas and attempting to nullify all references for garbage collection will be slightly less expensive for the client.</p> <p>This test was only done in Google Chrome and I cannot verify anything for other browsers.</p> <p>Try it yourself!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload