[Interest] Improve ListView scrolling performance (many pictures)

Mark Gaiser markg85 at gmail.com
Fri Aug 11 15:53:44 CEST 2017


You need to do the "heavy" image operations in a separate thread!
Copy the result back to the main thread and feed it to QML.
You should not do any more operations on it once it lives in the main
thread (no resize, scale, colorize, whatever) as you will notice that
during scrolling.

On Fri, Aug 11, 2017 at 3:36 PM, Bernhard B <schluchti at gmail.com> wrote:

> Hi Andy,
>
> many thanks for your response! I am also using a
> QAbstractListModel-derived class that gets exposed to the QML world which
> contains the images.
>
> Yesterday I started to resize the images before feeding them to the
> ListModel. According to the QML Profiler the delegate gets now created a
> little bit faster, but fast scrolling is still a little bit sluggish. Today
> I probably will play a little bit with different image codecs to see if
> those have an impact. Currently I am using *.png files often which is
> probably not the best choice.
>
> Thanks a lot for your input, really appreciated!
>
> Bernhard
>
>
> Am Freitag, 11. August 2017 schrieb Andy :
>
>> Bernhard:
>>
>> I don't use QML, but in my application I use a QAbstractItemModel-derived
>> class and a QTreeView-derived class to display image thumbnails in the
>> view. The way I make it speedy is to save the image as a thumbnail so the
>> view items don't need to resize the image data at all.
>>
>> Maybe you could save a thumbnail of an appropriate size when you're
>> adding them to your model?
>>
>> ---
>> Andy Maloney  //  https://asmaloney.com
>> twitter ~ @asmaloney <https://twitter.com/asmaloney>
>>
>>
>> On Fri, Aug 11, 2017 at 3:33 AM, Bernhard B <schluchti at gmail.com> wrote:
>>
>>> Hi Vlad,
>>>
>>> you mean the QQuickAsyncImageProvider? That one sounds really promising.
>>> Will definitely try that out. Many thanks for the suggestion!
>>>
>>> Bernhard
>>>
>>> Am Donnerstag, 10. August 2017 schrieb Vlad Stelmahovsky :
>>>
>>>> threaded image provider might help
>>>>
>>>> On Thu, Aug 10, 2017 at 12:36 PM, Bernhard B <schluchti at gmail.com>
>>>> wrote:
>>>>
>>>>> Hi,
>>>>>
>>>>> yesterday, I also tried to replace the Base64ImageProvider approach
>>>>> with a subclassed QQuickPaintedItem which paints the image in it's paint
>>>>> method. I imagined that this approach might be faster es no bade64 decoding
>>>>> needs to be done. But unfortunately it looks like as it's performing even
>>>>> worse that way.
>>>>>
>>>>> Bernhard
>>>>>
>>>>> Am Mittwoch, 9. August 2017 schrieb Bernhard B :
>>>>>
>>>>>> Hi,
>>>>>>
>>>>>> I would need some help from you guys on how to improve the ListView's
>>>>>> performance. The problem is, that scrolling through my ListView sometimes
>>>>>> feels a little bit sluggish.
>>>>>>
>>>>>> If I only display some text in the ListView's delegate I can scroll
>>>>>> smoothly through my list. But as soon as there is a picture in the
>>>>>> ListView's delegate I notice that I can't scroll smoothly through my list
>>>>>> anymore. That's especially noticable if I try to scroll fast through my
>>>>>> list. Every time I hit a picture while scrolling through the list I can see
>>>>>> that there is a noticable delay until the picture is fully loaded. My
>>>>>> assumption is, that those pictures are the reason why he scrolling feels so
>>>>>> sluggish.
>>>>>>
>>>>>> My application currently works like this:
>>>>>>
>>>>>> * load 20 pictures via REST (pictures are base64 encoded)
>>>>>> * populate list model
>>>>>> * the Image component in the delegate uses a Base64ImageProvider
>>>>>> (self written) to access the model's base64 encoded content and displays
>>>>>> the image
>>>>>> * if the user scrolls past a threshold another batch of base64
>>>>>> encoded pictures is fetched from the server
>>>>>>
>>>>>> I also found this document: http://doc.qt.io/qt-
>>>>>> 5/qtquick-performance.html#rendering and tried to apply as much as
>>>>>> possible. In detail I applied the following changes:
>>>>>>
>>>>>> * removed complex bindings from delegate
>>>>>> * set sourceSize property for Image
>>>>>> * increased cacheBuffer a bit
>>>>>> * profiled with QML profiler and improved a few things
>>>>>>
>>>>>> But still, the ListView feels a bit sluggish. The strange thing is,
>>>>>> that it's most noticable on Android whereas on Windows and iOs it is better.
>>>>>>
>>>>>> Does anyone have an idea on how to improve that?
>>>>>>
>>>>>>
>>>>>> Any help is really appreciated.
>>>>>> Thanks a lot!
>>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> Interest mailing list
>>>>> Interest at qt-project.org
>>>>> http://lists.qt-project.org/mailman/listinfo/interest
>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> Best regards,
>>>> Vlad
>>>>
>>>
>>> _______________________________________________
>>> Interest mailing list
>>> Interest at qt-project.org
>>> http://lists.qt-project.org/mailman/listinfo/interest
>>>
>>>
>>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20170811/a7c95d7d/attachment.html>


More information about the Interest mailing list