My QML application is very slow

milan

Hi, I am currently developing a qml desktop application. I find it very slow in response. How can I debug which part of code is slowing down the application? Please help.

ODБOï

@milan hi,
One possibility is to use the QML Profiler

dheerendra

what are you doing in main.qml ? Are you calling any c++ method which takes lot of time ?

sierdzio

Do you have good OpenGL drivers? Or using some software renderer (mesa)?

J.Hilk

@milan
what you're looking for is the QML Profiler

http://doc.qt.io/qtcreator/creator-qml-performance-monitor.html

milan

@dheerendra . My main qml contains ApplicationWindow. The application has toolbar with toolbutton which when it is clicked, opens a drawer. Drawer contains Listview which is fed by C++ model. I used delegate for each list item. Partial code snippet looks like one below. I dont think there is heavy processing in C++ too.

   ToolBar {
        id: toolbar
        property real buttonHeight: 40
        property real buttonWidth: 40
        width: itemWidth
        height: buttonHeight
        anchors.left: tabtoolitem.left
        anchors.top: tabtoolitem.top

        ToolButton {
            id: toolButton1
            width: toolbar.buttonWidth
            height: toolbar.buttonHeight
            text: "\u2630"
            anchors.left: parent.left
            anchors.top: parent.top
            onClicked: {
                drawer.open()
            }
        }
    }

    Drawer {
        id: drawer
        property real drawerWidth: parent.width * 0.2
        property real drawerHeight: parent.height - toolbar.height
        width: drawerWidth
        height: drawerHeight

        ListView {
            id: checkList
            width: parent.width - 20
            height: parent.height - 50
            property real delegateWidth: width
            property real delegateHeight: 50
            model: hwmodel
            delegate: Item {

                height: checkList.delegateHeight
                width: checkList.delegateWidth
                // color: index % 2 == 0 ? "steelblue" : "lightgreen"
                Text {
                    // text: name + ": " + number
                    text: "  " + name + ":"
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                }
                CheckBox {
                    checked: selected
                    anchors.right: parent.right
                    onCheckedChanged: {
                        selected = checked
                    }
                }
            }
        }

milan

@sierdzio. Yes, I do think the machine does have proper OpenGL drivers. And I am not using any software renderer. I am using default qml application settings.

sierdzio

You should not use anchors + width and height. This is highly suboptimal and makes the UI hard to extend.

Either use pure anchors, or layouts.

Other than that, the code looks ok-ish. So, as others have suggested: check if your C++ code (hwmodel?) is fast, and check performance bottlenecks in QML Profiler.

milan

@sierdzio. How can we achieve the dimensions I want if I dont use both anchors and width, height. I am only using anchors for a side of the UI and determine the width and height from that point. I also find it not easy to use QML profiler, is there any examples which i could follow.

sierdzio

If you have to set width and height to something specific:

using anchors: set dimensions for parent item, but in children use anchors.fill: parent
using layouts: set preferred width / preferred height

sierdzio

@milan said in My QML application is very slow:

I also find it not easy to use QML profiler, is there any examples which i could follow.

Identify the largest boxes - these take the most time. And for small boxes which repeat a lot. Any improvements you do to these parts will speed your app up considerably.

milan

@sierdzio . Thank you, I will try as you suggested.