Why is this animation so slow in FireFox?

问题

I'm using D3.js to manipulate some SVG elements. I learned (the hard way) that newer versions of FireFox don't really handle D3's force layout well. So I switched to a simple rotation and it's STILL running crappy in Firefox. In the following code, group1 is an array of 200 <circle> svg elements which I create dynamically:

function orbit( target, first ) {

  /* Other easing options here: https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease */
  var ease = ( first ) ? 'sin-in' : 'linear';

  target
    .transition()
    .duration(40000)
    .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, true );

It's perfect smooth in Chrome but it chugs along like a Choo Choo train in Firefox.

As requested, here is how group1 is selected:

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

回答1:

I also, consistently have problems with FireFox in rendering svg transformations that IE/Chrome handle with no problem. Follow the Posts:

Google Search: "Looking for SVG that was/is slow in Firefox"

You can also search on: Firefox's Gecko rendering engine+SVG, and see that Firefox has a poor rep for responsive SVG rendering.

My suggestion is to keep pressure on FireFox to fix this poor performance in dynamic SVG.

来源：https://stackoverflow.com/questions/22875328/why-is-this-animation-so-slow-in-firefox

标签

javascript

firefox

animation

svg

d3.js