SVG 属性和样式之间是否存在性能差异？

Question

我正在处理涉及许多小元素的大型 SVG 粒子动画。有时高达 1000。当我为这么多元素设置动画时，浏览器似乎很挣扎，所以我正在寻找优化代码的方法，以获得更好、更流畅的性能（尤其是 Firefix）。

我的主要问题是，例如，将元素的stroke属性设置为属性或样式之间是否有任何区别：

<circle r="0.15" cx="84" cy="782" stroke-width="6" stroke="transparent" style="fill: #ffffff;"></circle>

对比

<circle r="0.15" cx="84" cy="782" stroke-width="6" stroke="transparent" style="stroke:transparent; stroke-width:6; fill: #ffffff;"></circle>

我正在使用 D3.js 添加一堆这些并让它们四处移动......在 Chrome 变得笨拙之前，1000 似乎是大致的限制。Firefox 更糟糕。

如果您有任何其他性能建议，也欢迎提出。

按要求更新：

这是我创建节点的方式：

var makeNode = function(coeficient, x, y) {
    coeficient = coeficient || 1;
    return {
        radius: (Math.random() * coeficient ).toFixed(2), 
        cx: function() { return x || Math.round(Math.random()*width) }, 
        cy: function() { return y || Math.round(Math.random()*height) }
    }
};

var nodes1 = d3.range(300).map( function(){ return makeNode(1.9); } );
var nodes2 = d3.range(700).map( function(){ return makeNode(.6); } );
// var nodes2 = [];

var svg = d3.select('#sky_svg');
var group1 = svg.append('g').attr("class", "group1");
var group2 = svg.append('g').attr("class", "group2");

var addNodes = function(group, nodes) {
    for (var i=0; i<nodes.length; i++){
        var node = nodes[i];
        var circle = group.append('circle');
        circle
            .attr("r", node.radius )
            .attr("cx", node.cx )
            .attr("cy", node.cy )
            .attr("stroke-width", 8 )
            .attr("stroke", "transparent")
            .style("fill", "#FFFFFF");
    }
}

addNodes( group1, nodes1 );
addNodes( group2, nodes2 );

这就是我为它们设置动画的方式：

function orbit( target, ease, duration ) {

  /* Other easing options here: https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease */
ease = ease || 'linear';
duration = duration || 40000;

  target
    .transition()
    .duration( duration )
    .ease( ease )
    .attrTween("transform", rotTween)
    .each('end', function(){ orbit( group1, false ); } );

  function rotTween() {
      var i = d3.interpolate(0, 360);
      return function(t) {
          return "rotate(" + i(t) + ","+width/2+","+height/2+")";
      };
  }

}

orbit( group1, 'sin-in', orbitSpeed );
orbit( group2, 'sin-in', orbitSpeed*2.5 );

我并不是特别喜欢这个实现。我原来的设计使用武力的布局，但Firefox的挣扎真的很难甚至加载它，然后它，所以我重构使用一个简单的旋转（几乎工程顺利在FF）的代码非常跑去。

Answer 1

圆圈有baseValcx,cy,r。有人建议通过访问这些属性baseVal。setAttribute使用or attr（在 d3 中）的 tnan 更有效。例如

myCircle.cx.baseVal.value=myCx
myCircle.cy.baseVal.value=myCy
myCircle.r.baseVal.value=myR