Performance tip Lists

Ensure that your data model is as fast as possible

In many cases the slow model is actually the bottleneck in list scrolling performance. Ensure that the data model is as fast as possible.

• Delegates must be created quickly as the view is flicked
• Any additional functionality that is only needed when the delegate is clicked, for example, should be created by a Loader as it is needed
• Keep the amount of QML to a minimum in your delegate. The fewer elements in a delegate, the faster a view can be scrolled.
• In your list delegate, use QML only for user interface and implement the rest with C++. Do not use JavaScript.

CacheBuffer usage in ListView/GridView

In somes cases, cacheBuffer can be useful in improving your ListView/GridView performance. The default cacheBuffer is zero.

• cacheBuffer property determines whether delegates are instantiated outside the visible area of the view
• Note that cacheBuffer is defined in pixels, e.g. if delegate is 20 pixels high, cacheBuffer is set to 40 -> up to 2 delegates above and 2 delegates below the visible area may be retained in memory
• Setting this value can improve the smoothness of scrolling behavior at the expense of additional memory usage. Data is not cached, but the instantiated delegates that requested the data are.
• Define cacheBuffer if you have a short list where every item can be cached
• For longer lists cacheBuffer doesn't bring benefit because items are created at the same rate as if there were no cache while scrolling fast. The cacheBuffer just postpones the problem, i.e. only pushes the position where delegates are created further above/below the visible part of list/grid.
• More info: http://doc.qt.io/qt-5/qml-qtquick-listview.html#cacheBuffer-prop

Avoid useless painting

You should always prevent painting the same area several times. For example, prevent QDeclarativeView from painting its window background if you provide the background of your application:

QDeclarativeView window;
window.setAttribute(Qt::WA_OpaquePaintEvent);
window.setAttribute(Qt::WA_NoSystemBackground);
window.viewport()->setAttribute(Qt::WA_OpaquePaintEvent);
window.viewport()->setAttribute(Qt::WA_NoSystemBackground);

Also, consider using Item as root element rather than Rectangle to avoid painting the background several times:

• If your root element is a Rectangle, you’re painting every pixel, maybe even several times
• The system (QDeclarativeView) first paints the background and then paints all the QML elements
• You might have a Rectangle as the root element and inside that you have a lot of elements without opacity covering most of the Rectangle. In this kind of case the system is doing useless painting.
• You could instead use Item as root element because it has no visual appearance
• If you need to paint background, but have static UI elements covering part of the screen, you can still use Item as the root element and anchor a Rectangle between those static items. This way you don’t do useless painting.

More info: http://doc.qt.io/qt-5/qtquick-performance.html#rendering