Search code examples
cssjavafxscrollshadowjavafxports

JavaFX on iPhone - Laggy ListView scrolling when applying shadow

I am developing an app on iOS using JavaFXPorts. I have a Pane that holds a ListView with countries and their flags. I have noticed that ListView scrolling is laggy when I apply the dropshadow effect on the Pane. As you can see from the videos below, without the effect the scrolling is super smooth, whilst applying the effect through CSS, scrolls starts to get laggy. I would like to keep the shadow effect as it makes app more beautiful. So any suggestion is really appreciated.

CSS Code I am using is:

-fx-effect: dropshadow( three-pass-box, rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1);

Video: Scrolling without shadow effect

Video: Scrolling with shadw effect (Laggy)

Please note that this is on iPhone 6 running. On iPhone 5 results are much worse.

Solution

  • When adding effects, css, transitions, custom controls and other complex stuff that typically works fine on desktop, there could be a big loss in terms of performance when being ported to mobile.

    Effects

    While effects make nodes or panes look fancy, they have the highest negative impact on performance on mobile.

    Try to avoid applying them to nodes that change a lot, like cells on ListView, TableView or ComboBox controls.

    Also if you apply them to a parent with the referred children (ListView, ...), the parent (and the effect) will be rendered all the time if the children are invalidated (after scrolling, or similar).

    If you really need the effect over this parent, try to split parent and children.

    Instead of:

    parent (Pane with effect)
  |-- ListView

    you can do something like:

    parent (StackPane without effect)
  |-- Pane (with effect)
  |-- ListView

    Since the pane won't change much, you can use Cache over it. Typically, the cache strategy works by rendering an image of the node (pane with effect), instead of recreating all over again the node and that effect, so it is a quick win:

    parent (StackPane without effect)
  |-- Pane (with effect) and with Cache
  |-- ListView

    On the contrary, don't use cache on nodes that change a lot (like the ListView).

    CSS

    Complex CSS requires long CPU time. Try to simplify it. Even you can remove the whole CSS for a quick test. Then decide what you may or may not use.

    Try as well to replace some of the styling by code.

    Animations

    The same goes for animations: Avoid animations, transitions, if possible.

    Number of nodes and custom controls

    The higher the number of nodes, the lower the performance, so try to keep it to a minimum (replacing complex content with images, canvas when possible).

    Switching scenes

    Mobile screens are smaller and it is better having less content on each scene than on desktop. Also it is important avoiding switching stages or scenes. Instead use different nodes and replace them over the same scene.

    Gluon Charm uses View nodes, and an easy way to switch between different views: MobileApplication.getInstance().switchView("other view name").

    Images

    Finally, when using images either downloaded from internet or loaded from a file, cache strategies are a must. Have a look at those provided by Gluon Charm Down.