鈍化しないアニメ

アニメーションをするときに、古い画像の上に（白い四角を）上書きしていたのですが、動作がおそくなったり、ページのスクロールが重くなることがわかりました。上書きせずに removeChild して作りつけをやり直すことで重たくなくなりました。

また、svg はいつも div に付随させているので、div の下の svg という名前の要素として扱うようにしています。

心覚えとして、時計のシミュレーションを作ってみました。コードは以下の通り。

/////////////////////////////////////////////////////////////////////////////////////////
function svgrenew(panel) {
    try{
        panel.removeChild(panel.svg); // === here, svg is only name !!! 
    } catch { } 
    panel.svg=document.createElementNS('http://www.w3.org/2000/svg', 'svg');  
    panel.svg.setAttribute("width", panel.style.width); 
    panel.svg.setAttribute("height", panel.style.height); 
    panel.svg.setAttribute("opacity", 1);    
    panel.appendChild(panel.svg); 
} // ==============================================================================  
function svgrect(svgtf, x, y, w, h, color) {   
    var svg=svgtf;   if (svgtf.svg !== undefined) { svg=svgtf.svg; }
    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute( 'x', x);
    rect.setAttribute( 'y', y);
    rect.setAttribute('width', w);
    rect.setAttribute('height', h);
    rect.setAttribute('fill', color);
    //
    // rect.setAttribute('opacity', 1);
    rect.setAttribute('fill-opacity', 1);
    rect.setAttribute('stroke-opacity', 1);
    rect.setAttribute('transform', "rotate(0)"); 
    svg.appendChild( rect );  
} // ===========================================================================
function svgpoint(svgtf, x1, y1, color) {  
    var svg=svgtf;   if (svgtf.svg !== undefined) { svg=svgtf.svg; }
    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1',x1-0.5);
    line.setAttribute('y1',y1);
    line.setAttribute('x2',x1+0.5);
    line.setAttribute('y2',y1);
    line.setAttribute('stroke', color);
    line.setAttribute('stroke-width', 1); 
    line.setAttribute('stroke-linejoin', 'miter'); //miter round bevel inherit
    line.setAttribute('stroke-linecap', 'butt'); //butt round square inherit
    line.setAttribute("opacity", 1);
    line.setAttribute('fill-opacity', 1);
    line.setAttribute('stroke-opacity', 1);
    line.setAttribute('transform', "rotate(0)");
    svg.appendChild( line );  
} // ============================================================================  
function svgline(svgtf, x1, y1, x2, y2, color, width, txt) {  // txt: "20,4,6,4" 
    var svg=svgtf;   if (svgtf.svg !== undefined) { svg=svgtf.svg; }
    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1',x1);
    line.setAttribute('y1',y1);
    line.setAttribute('x2',x2);
    line.setAttribute('y2',y2);
    line.setAttribute('stroke', color);
    line.setAttribute('stroke-width', width);
    line.setAttribute('stroke-linejoin', 'miter'); //miter round bevel inherit
    line.setAttribute('stroke-linecap', 'butt'); //butt round square inherit
    line.setAttribute("opacity", 1);
    line.setAttribute('fill-opacity', 1);
    line.setAttribute('stroke-opacity', 1);
    line.setAttribute('transform', "rotate(0)");
    if (txt == null) {
        line.setAttribute('stroke-dasharray', "none");//10,10 etc
    } else { 
        line.setAttribute('stroke-dasharray', txt); }
    svg.appendChild( line );  
} // ============================================================================  
function svgcirc(svgtf, xc, yc, r, color, width, txt) {  // txt: "20,4,6,4" 
    var svg=svgtf;   if (svgtf.svg !== undefined) { svg=svgtf.svg; }
    for (var i=0; i<20; i++) {
        var tt0=i*Math.PI/10, tt1=(i+1)*Math.PI/10; 
        var x0=xc+r*Math.cos(tt0), x1=xc+r*Math.cos(tt1), 
            y0=yc+r*Math.sin(tt0), y1=yc+r*Math.sin(tt1); 
        svgline(svg, x0, y0, x1, y1, color, width, txt); }
} // ============================================================================  
function svgtext(svgtf, x, y, str, color, fontsize, fontfam, tf) {
    var svg=svgtf;   if (svgtf.svg !== undefined) { svg=svgtf.svg; }
    var color='black'; 
    const txt=document.createElementNS('http://www.w3.org/2000/svg', 'text');
    txt.setAttribute('x',x);
    txt.setAttribute('y',y);
    if (fontfam != null) {
        txt.setAttribute('font-family', fontfam); 
    } else {
        txt.setAttribute('font-family', "Verdana"); }
    if (fontsize != null) {
        txt.setAttribute('font-size', fontsize);   
    } else {
        txt.setAttribute('font-size', "16"); }
    if (color != null) {
        txt.setAttribute('fill', color); }
    txt.innerHTML=str; 
    if (tf != null) { txt.setAttribute('transform', tf); } 
    svg.appendChild( txt );  
} // ==============================================================================  
function round(v, n) { 
    var vv=Math.pow(10, n); 
    var toret=Math.round(v*vv)/vv; 
    return toret;   
} // ==============================================================================
function toNum(str) {
    var n=str.indexOf("px"); 
    if (n >= 0) {return Number(str.substring(0,n)); 
    } else {return Number(str); }
} // ==============================================================================
/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////  
var timer, timer2, DS=0, DM=0, DH=0;  
redraw();  
function redraw() { 
    svgrenew(panel0); 
    {   var cx=toNum(panel0.style.width)/2, cy=toNum(panel0.style.height)/2, r=90,
                dx=r*Math.sin(Math.PI*DH/180), dy=r*Math.cos(Math.PI*DH/180); 
        svgline(panel0, cx, cy, cx+dx, cy-dy, "orange", 9); }
    {   var cx=toNum(panel0.style.width)/2, cy=toNum(panel0.style.height)/2, r=130,
                dx=r*Math.sin(Math.PI*DM/180), dy=r*Math.cos(Math.PI*DM/180); 
        svgline(panel0, cx, cy, cx+dx, cy-dy, "skyblue", 5); }
    {   var cx=toNum(panel0.style.width)/2, cy=toNum(panel0.style.height)/2, r=140,
                dx=r*Math.sin(Math.PI*DS/180), dy=r*Math.cos(Math.PI*DS/180); 
        svgline(panel0, cx, cy, cx+dx, cy-dy, "black"); }
    svgcirc(panel0, cx,cy,20,"red");
} // ==============================================================================
/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
init(); 
function init() {  
    btreset.addEventListener('click', (o,e) =>{  
        DS=0; DM=0; DH=0;  
        redraw(); 
    }); // ----------------------------------------------------
    btstep.addEventListener('click', (o,e) =>{   
        step();  
    }); // ----------------------------------------------------
    chbanime.addEventListener('change', (o,e) =>{ 
        if (chbanime.checked) {
            if (chbreal.checked) {
                chbreal.checked=false; 
                clearInterval(timer2);
            }
            step(); 
            timer=setInterval(step, 1);  
        } else {
            clearInterval(timer); } 
    }); // ----------------------------------------------------
    chbreal.addEventListener('change', (o,e) =>{ 
        if (chbreal.checked) {
            if (chbanime.checked) {
                chbanime.checked=false; 
                clearInterval(timer);
            }
            step2(); 
            timer2=setInterval(step2, 1000);  
        } else {
            clearInterval(timer2); } 
    }); // ----------------------------------------------------
} // ==============================================================================
function step() {
    for (var ct=0; ct<1; ct++) {
        DS++; 
        if (DS == 360) {DS=0; }
        if (DS%60 == 0) {
            DM++; 
            if (DM == 360) {DM=0; }
            if (DM%12 == 0) {
                DH++; 
                if (DH == 360) {DH=0; } } } }  
    redraw();  
} // ==============================================================================
function step2() {
    let nowTime = new Date(); //  現在日時を得る
    DH = 30*nowTime.getHours()+0.5*nowTime.getMinutes(); // 時間を抜き出す
    DM = 6*nowTime.getMinutes(); // 分数を抜き出す
    DS = 6*nowTime.getSeconds(); // 秒数を抜き出す 
    redraw();  
} // ==============================================================================