QML Screen loading optimization

Question

I'm having an issue with a QML application running on a somewhat old GPU. As a result, I need to optimize the structure of the QML screens that are expected to be dynamically loaded via a StackView. However, some screens take more than 350ms to load, which is visually unacceptable.

Initially, I wanted to optimize the screens by using Loader on some QML components and loading/displaying them when necessary.

The problem is that within the screens, there are C++ Backends, managing the business logic, declared in the QML that have a number of bindings to the Items I wanted to put in Loaders.

Therefore, I have to leave the Items as they are and show/hide them as needed. Consequently, everything must be loaded at the screen's loading, which increases loading times. I'm wondering how to effectively optimize this system that I inherited.

Here's a code snippet:

Item {
    BackendCpp {
        workingProp1: cppContext.prop1
        workingProp2: item1.prop
        workingProp3: item2.prop
    }

    BigQmlItem {
        id: item1
        visible: cppContext.condition === true
    }

    AnotherBigQmlItem {
        id: item2
        visible: cppContext.condition === false
    }
}

Answer 1

There's nothing wrong with having C++ Backends, managing business logic, and having several bindings.

Look at delay loading strategies. In QML, use Qt.callLater() and Timer to defer initialization or to break up large initialization logic into smaller pieces. In C++ look at QTimer:singleShot and QThread to delay execution in the main thread or move activity out of the main thread.

Signals/Slots are your friend to help marshal data from another thread back to the UI thread.

Look at your models in both C++ and QML. Determine if the models can start empty and be gradually populated. If your data binding is good, it should respect your models being populated slowly and be resistant to initialization order.