как свести к минимуму повторы при добавлении кружков в SVG

Question

В какой-то конкретной ситуации я хочу нарисовать 100000 кругов со случайной центральной координатой, радиусом и цветом в области страницы.Рисование всего этого одновременно может вызвать проблему замораживания страницы.Поэтому я хочу нарисовать их один за другим.Но, как серия тестов, это не может реально улучшить производительность, так как каждый раз, когда добавляется новый элемент круга, происходит перерисовка и перерисовка всей страницы.

ниже - мой код для выполнения этих действий:

  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()