D3/Raphael js 绘制 1000+ 动画圆圈，fps 很慢

Question

我在 Raphael JS v2.1 上编写了脚本，它绘制了 1000 多个圆圈和许多路径。圆圈沿该路径设置动画，然后移除。在 ~100 圈时 fps 是 40。在 1000+ fps 时是 1-10。代码示例：

var r = Raphael("diagram", "100%", "100%");
setInterval(function () {
    r.moveCircle(lines[Math.floor(Math.random() * 20)]);
}, 100);

Raphael.fn.moveCircle = function (path) {
    var circle = this.circle(0, 0, 4).attr({fill: '#000'});
    circle.animateAlong({
        path: path,
        duration: 1000
    },
    function() {
        circle.remove();
    });
};

Raphael.el.animateAlong = function (params, props, callback) {
    var element = this,
        paper = element.paper,
        path = params.path,
        rotate = params.rotate,
        duration = params.duration,
        easing = params.easing,
        debug = params.debug,
        isElem = typeof path !== 'string';

    element.path = 
        isElem
            ? path
            : paper.path(path);
    element.pathLen = element.path.getTotalLength();
    element.rotateWith = rotate;

    element.path.attr({
        stroke: debug ? 'red' : isElem ? path.attr('stroke') : 'rgba(0,0,0,0)',
        'stroke-width': debug ? 2 : isElem ? path.attr('stroke-width') : 0
    });

    paper.customAttributes.along = function(v) {
        var point = this.path.getPointAtLength(v * this.pathLen),
            attrs = {
                cx: point.x,
                cy: point.y 
            };
        this.rotateWith && (attrs.transform = 'r'+point.alpha);

        return attrs;
    };

    if(props instanceof Function) {
        callback = props;
        props = null;
    }
    if(!props) {
        props = {
            along: 1
        };
    } else {
        props.along = 1;    
    }

    var startAlong = element.attr('along') || 0;

    element.attr({along: startAlong}).animate(props, duration, easing, function() {
        !isElem && element.path.remove();

        callback && callback.call(element);
    });
};

问题：

1) 是否可以在 Raphael JS 上改进 performance/speed/fps？

2) 在 d3.js 上 fps 会更好吗？ 10,000 多个动画圈怎么样？

3) 是否有任何解决方案可以以良好的 fps 沿着路径可视化 10,000 多个动画圆圈？

Answer 1

可能的瓶颈是DOM操作（添加/删除节点、编辑属性等），所以d3也会有同样的问题。如果你有很多东西要画，使用 canvas 而不是 SVG（特别是使用 WebGL 上下文）会快得多。

在坚持使用 SVG 的同时可以加快速度的方法：

重复使用 DOM 个节点，而不是删除它们并添加新节点
使用CSS提前定义动画。

Answer 2

沿路径设置圆圈动画的另一种方法是使用 stroke-dasharray、stroke-dashoffset 和 stroke-linecap:round。任何零长度破折号都将呈现为圆形。然后，您可以使用 stroke-dashoffset 沿路径移动圆圈。这仅适用于单个圆半径，通过 stroke-width.

控制

这种方法的好处是您可以消除一堆圆形元素。

D3/Raphael js 绘制 1000+ 动画圆圈，fps 很慢

D3/Raphael js draws 1000+ animated circle with slow fps

javascript

svg

frame-rate

raphael

d3.js