添加small example (jsfiddle),我在requestAnimationFrame循环中使用900内部元素重新创建SVG。
function SVGBuilder(){
this._parser = new DOMParser();
this._svg = null;
}
SVGBuilder.prototype.build = function(){
var string =
'<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">' +
Array.apply(null, {length:900}).map(function(_, i){
return '<rect class="rect" x="'+(i*10%300)+'" y="'+(i/30|0)*10+'" width="10" height="10" fill="#'+(Math.random()*1000000).toString(16).slice(-6)+'"/>'
}).join('') +
'</svg>'
if (this._svg) this._svg.parentNode.removeChild(this._svg);
this._svg = this.parse(string).documentElement;
document.body.appendChild(this._svg);
}
SVGBuilder.prototype.parse = function(string) {
return this._parser.parseFromString(string, 'image/svg+xml');
}
var SVG = new SVGBuilder();
function draw(){
SVG.build();
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
我知道重新绘制很难实现,但我没有看到可以获得高内存泄漏的地方。我错过了什么?