Как рассчитать SVG-элементы для настройки производительности в JavaScript

Question

У меня есть веб-приложение на javascript, которое динамически создает графики + анимирует различные наборы данных в SVG, и хочу выполнить некоторую настройку производительности, потому что могут быть тысячи элементов SVG.Я ищу количество видимых или значимых элементов для сравнения.Моя рабочая, но грубая первая попытка ниже.Хотел бы по крайней мере получить счетчики по каждому элементу SVG, а не вызову document.getElementsByTagName () для всего документа.

   let svgs = document.getElementsByTagName("svg"),
       totalChildren = 0,
       childCounts = [];

   for( let i=0; i<svgs.length; i++ ){
       let svg = svgs[i];
       totalChildren += svg.childElementCount;
       childCounts.push( svg.childElementCount );
   }

   let tags = [ "clipPath", "circle", "rect", "path", "text" ],
       tagMessage = "";
   tags.forEach( tagName => {
       tagMessage += ( document.getElementsByTagName(tagName).length + " ");
   });

   console.log( 'SVG element counts are: totalChildren='+ totalChildren, " SVG childElementCounts:", childCounts, " by tag:", tagMessage + tags );

Пример вывода:

Количество элементов SVG: totalChildren = 2721SVG childElementCounts: (6) [1312, 5, 30, 4, 4, 1366] по тегу: 1313 1317 2673 21 11 clipPath, круг, прямоугольник, путь, текст