Chrome performance struggling with lots of connectors - Firefox OK

[ruhowe]

Hi,
We've recently noticed that graphs with lots of connectors/links (hundreds) are starting to glitch a bit in Chrome - elements and links appearing and disappearing as the cursor moves across the graph.
It seems that there are too many callbacks in these projects, so we’re running a lot of code, and it’s slowing the page down. Firefox seems to be dealing with it better than Chrome, and we're not seeing it.
Seems like Chrome has only started struggling in the last 2-3 weeks - perhaps a Chrome update.
I've searched and can't see any other threads about this but wondered if anyone else seen this or does anyone have any thoughts about how we could optimise it?
Thanks,
Ru

[ruhowe]

got to the bottom of this after a lot of investigation – in case it helps anybody else in future, the problem causing graph glitching in Chrome was that opacity was being applied to the parent classes for .marker-arrowheads and .marker-vertices, and being changed on :hover.

Chrome obviously doesn't like this when the graph gets large, or specifically when there are hundreds of long connector lines with vertices where the path has been changed.

Chrome apparently sometimes has an issue with opacity applied to parent elements instead of child elements. Firefox is fine with it.

So we fixed it by removing the opacity setting and :hover opacity from the parent classes and applying them to the equivalent child elements: .marker-vertex-group and .marker-arrowhead-group

Specifically:
removed the opacity 0 setting from the separate .marker-arrowheads and .marker-vertices class rules
and removed the hover opacity 1 setting from the combined
.joint-link:hover .marker-vertices, .joint-link:hover .marker-arrowheads rule

and applied these settings instead to the child elements:
adding opacity 0 to .joint-link .marker-vertex-group, .joint-link .marker-arrowhead-group
and opacity 1 to .joint-link:hover .marker-vertex-group, .joint-link:hover .marker-arrowhead-group

Then Chrome was happy! Hope that helps someone.

Ru

[kumilingus]

Hi,
Good job finding out the root cause!

Did you have a chance to report this to the Chrome team? Or perhaps there is already a ticket regarding this?

Would you be open to fix it directly in the source code of JoinJS?

---

If you are looking for a real performance boost, replace all dia.Link (where every link renders its tools and hide them with opacity: 0, even though the tools are hidden 99% of the time) with standard.Link (a lightweight link consist of 2 <SVGPath>) and add the tools via linkTools dynamically when user actually hovers them.

Note that in v4:

• the dia.Link will become an abstract class (same as dia.Element) and the default markup removed
• the current dia.LinkView will be cleaned from the built-in tools & arrowheads logic (in favor of <SVGMarker>)
• this slow tools & arrowheads from the current dia.Link will be moved to legacy.Link and legacy.LinkView which will be sitting in a separate package outside of the core JointJS.