Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

My QML application is very slow



  • 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.



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


  • Qt Champions 2017

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


  • Moderators

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


  • Moderators

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

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



  • @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
                        }
                    }
                }
            }
    


  • @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.


  • Moderators

    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.



  • @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.


  • Moderators

    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

  • Moderators

    @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.



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


Log in to reply