如何通过多个链接提高JointJS的性能？

Question

在对代码进行概要分析之后，看起来反复调用了bbox函数。我无法删除marker-source，marker-target和connection-wrap，因为我需要这些功能。有没有办法提高绩效？

Answer 1

尝试将marker-source和marker-target替换为SVG Markers。如果您的应用程序不需要不同尺寸和颜色的标记，则相对容易实现。例如：

1. 定义您自己的标记箭头。

var arrowMarker = V('marker', {
   viewBox: "0 0 10 10",
   refX: 9,
   refY: 5,
   markerWidth: 6,
   markerHeight: 6,
   orient: "auto"
}, [
   V('path', {
       'd': "M 0 0 L 10 5 L 0 10 z",
       'fill': 'green'
   })
]);

1. 将标记添加到纸张SVG Defs中，以便以后可以多次重复使用。

V(paper.defs).append(arrowMarker);

1. 最后将标记放在链接上。使用marker-end或marker-start属性定义target resp。 source标记。

var link = new joint.dia.Link({
    markup: '<path class="connection"/><path class="connection-wrap"/>',
    attrs: {
        '.connection': {
            'stroke': 'green',
            'stroke-width': 2,
            'marker-end': 'url(#' + arrowMarker.attr('id') + ')'
        }
    }
});

有一个JSFiddle，其中包含示例和其他有用的性能提示。