1348989 - D3.js generated graph is much less responsive than in Chrome due to lots of display list/layers overhead

Status: RESOLVED INCOMPLETE

(Core :: SVG, enhancement, P3)

Description

[Jonathan Watt [:jwatt]]

https://kieranhealy.org/philcites/

Grab and move a node in the graph. In Chrome it's nice and smooth, in Firefox it's noticeably janky. I profile this:

https://perfht.ml/2nLHjkP

  68%  nsDisplayList::PaintRoot
    32%  ClientContainerLayer::RenderLayer
    17%  FrameLayerBuilder::ComputeGeometryChangeForItem
    11%  FrameLayerBuilder::BuildContainerLayerFor
     3%  LayerPropertiesBase::ComputeDifferences  
  15%  JS

So we spend as much time processing layers/display lists as we do actually painting.

Interestingly the nodes and text are layerized since they are moved by changing their transforms, but the lines connecting the nodes are not layerized since they are moved by simply changing their vertices.

Comment 1

[Martín González Gómez]

URL is down so it's not possible to test but SVG performance is much better, at least on M1 macs: https://bugzilla.mozilla.org/show_bug.cgi?id=1259142