Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

火狐上Canvas2D绘图内存泄漏问题

  起初,我以为是代码问题,但是试了释放渐变对象,发现问题依然无法解决。后来我又试了试纯色,发现纯色填充也存在内存泄漏问题,只不过不明显而已。所以我就想,这应该是Canvas2D自身的问题。而渐变的时候缓存泄漏的明显,纯色时不明显,那么这个泄漏的就准是绘图时的数据了。 <canvas id="canvas"></canvas>
<script>
var canvas,w,h,g;
canvas=document.getElementById("canvas");
canvas.width=w=600;canvas.height=h=400;
g=canvas.getContext("2d");
setInterval(function(){
 var gradient=g.createLinearGradient(0,0,0,h);
 gradient.addColorStop(0,"#00FF00");
 gradient.addColorStop(1,"#FF0000");
 g.fillStyle=gradient;
 g.fillRect(0,0,w,h);
},1);
</script>
  这是测试用的渐变代码,这个代码在火狐上运行内存使用量会一直增减而不减少。

  为了解决这个问题,就是让火狐自己为Canvas2D释放内存。这个不难,火狐缓存那些东西的目的就是为了重绘的速度快,那么我们把重绘的缓存信息做废掉就行了。所以我使用修改Canvas大小的方法,让缓存做废掉。因为Canvas的大小被重新定义,原本缓存中的数据只能重绘原来那个尺寸的Canvas,现在重新定义了尺寸,原来的缓存信息就没用了,这时候就会被自动释放掉。 <canvas id="canvas"></canvas>
<script>
var canvas,w,h,g;
canvas=document.getElementById("canvas");
canvas.width=w=600;canvas.height=h=400;
g=canvas.getContext("2d");
setInterval(function(){
  canvas.width=w;canvas.height=h;//←这两句重新定义大小
 var gradient=g.createLinearGradient(0,0,0,h);
 gradient.addColorStop(0,"#00FF00");
 gradient.addColorStop(1,"#FF0000");
 g.fillStyle=gradient;
 g.fillRect(0,0,w,h);
},1);
</script>
  这回内存泄漏的问题就解决了,但是这个方法会出现一个问题,就是CPU使用量会变得很高,所以这个解决方法不怎么漂亮。
  但是我还真没想到有什么更好的方法,如果你们想到了也顺便告诉我吧~ 当然我们更期待火狐自己把问题解决了。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^