javascript - 如何计算 svg 元素以在 javascript 中进行性能调整

Question

我有一个 javascript Web 应用程序，它可以动态地为 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=2721 SVG childElementCounts: (6) [1312, 5, 30, 4, 4, 1366] by tag: 1313 1317 2673 21 11 clipPath,circle,rect,path,text

标签： javascriptperformancesvg