在将圆形添加到svg

Question

在某些特定情况下，我想绘制100000个带有随机中心坐标，半径和颜色的圆到页面区域。同时绘制所有内容可能会导致页面冻结问题。所以我想一一画出它们。但是，作为一系列测试，这并不能真正提高性能，因为每次添加新的circle元素都会导致整个页面重排和重新绘制。

下面是我做这些事情的代码：

  function createCircle(cx,cy,r, color){
    let circle = document.createElementNS(svgns, 'circle')                              
    circle.setAttributeNS(null, 'cx', cx);                                              
    circle.setAttributeNS(null, 'cy', cy);                                              
    circle.setAttributeNS(null, 'r', r);
    circle.setAttributeNS(null, 'style', `fill: none; stroke: ${color}; stroke-width: 1px;`);
    return circle
  }                                                                   
  let svg = document.getElementById('mysvg')
  function drawRandomCircle(){
    let x = 300*Math.random()
    let y = 100*Math.random()
    let maxR = Math.min(100-y,y,300-x,x)                                                
    let r = maxR * Math.random()
    let color = '#' + Math.floor(0xffffff * Math.random()).toString(16)                 
    let c = createCircle(x,y,r, color)                                                  
    svg.appendChild(c)
  }

  let count = 0
  function drawCircles(){
     if(count < 100000){
       drawRandomCircle()
       count ++
       requestAnimationFrames(drawCircles)
     }
  }
  drawCircles()