Nominate our 2022 Qt Champions!

Performance hit when using Loader to load a lot of qml files

  • Hi,

    Our application uses Loader to load many qml files. But before all qml files are loaded, the animation in the first shown qml is slow (guess the rendering thread doesn't have enough scheduling time to do the job).

    We know we should load a qml on demand, but we want to have the benefit that switching to another qml is very fast due to it's loaded and cached in the memory.

    So our question is that, if we still want to have fast qml switching time, is there any way to load/cache qml files in memory, but the scheduling time of rendering thread won't be influenced?


  • Hi,

    From the description it is not clear what you're trying to do. Are you using many loader elements or just one? If you're using many loader elements you can use the visible property to switch between loaders. If you're using just one, then I don't think it can be done.
    An alternative is to use the stack view component.

  • Hi t3865,

    Thanks. We use many Loader elements to load different qml files.
    Let me use an example to explain our situation.

    Say if there are 10 pages, page 1 is the home page. Each page have a way to switch to arbitrary page. We use 10 Loader elements in our main.qml. The visible property of Loader element of page 1 is set to true and the source property is specified. Other Loader elements' visible property are set to false in the first time. When page 1 is loaded and show up in the screen, we set the source property of other Loader elements to let them start to load.

    The problem happens when page 1 shows up and other pages are loading. The animation in page 1 is quite slow and FPS is down to very low. After other pages are completely loaded, the animation of page 1 becomes normal and FPS goes up.

    We use this approach because the time is quite low when switching to another page. However, we must overcome the performance hit on the page 1 during loading other pages. We are thinking is there any way to stick on this approach, but use a trick to let the animation in page 1 won't be affected.

    Thanks for reading my long story. :)

  • How we do it is to only set the source component property the first time a page is loaded, this ensures that pages are only loaded when they are needed.
    There is no I know of to load qml files outside the rendering thread. Maybe it's possible with lots of c++ code, but like I said I never done this
    Why do you want to load all qml files at once if I may ask.

    Ps, check out the stack view component. It's great!

  • Hi t3865,

    Because the content of qml files are defined by our user. It may be complicated and the loading time may take to average 500ms for a page in our hardware. If we can preload all pages, then it only takes a few time to switch to the preloaded one, giving the user a better user experience and the impression of good performance.

    We'll check out the stack view component. See how great it is. Thanks!

  • Hi,

    In that case, you are probably out of luck. The best option may be even to only show the first page when all other pages are loaded.

    Good luck!

Log in to reply