Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-86536

QML: First time loading of Text QML Component is VERY slow

    XMLWordPrintable

Details

    • Bug
    • Resolution: Incomplete
    • P2: Important
    • None
    • 5.15.0
    • None
    • Windows 10 2004
      Qt Creator 5.14.2
      Qt Quick 2.15
    • Windows

    Description

      I have a simple code inside my main.qml. Basically it's 3 timers set to load a QML file at 1 second intervals, and some console.logs to signal when the loading starts and ends.

       

      Timer {
          interval: 1000;
          running: true
          onTriggered: function() {
              console.log("loading started: " + Date.now().toString());
              loader1.setSource("qrc:/TestText.qml", {"y": 100, "text": "1" });
          }
      }
      
      Timer {
          interval: 2000
          running: true
          onTriggered: function() {
              console.log("loading started: " + Date.now().toString());
              loader2.setSource("qrc:/TestText.qml", {"y": 150, "text": "2" });
          }
      }
      
      Timer {
          interval: 3000
          running: true
          onTriggered: function() {
              console.log("loading started: " + Date.now().toString());
              loader3.setSource("qrc:/TestText.qml", {"y": 200, "text": "3" });
          }
      }
      
      
      Loader {
          id: loader1
          asynchronous: true
          onStatusChanged: status == Loader.Ready? console.log("loading ended: " + Date.now().toString()) : 0
      }
      
      Loader {
          id: loader2
          asynchronous: true
          onStatusChanged: status == Loader.Ready? console.log("loading ended: " + Date.now().toString()) : 0
      }
      
      Loader {
          id: loader3
          asynchronous: true
          onStatusChanged: status == Loader.Ready? console.log("loading ended: " + Date.now().toString()) : 0
      }
      
      
      
      Rectangle {
          id: testRect
          width: 100; height: 100
          Component.onCompleted: function () { x = 500; }
          Behavior on x { NumberAnimation { duration: 5000 } }
      }
      

      The TestText.qml file looks like this:

       

      import QtQuick 2.15
      
      Text {
              text:"Test"
      }
      

      When I run this: this is the output in the console (number aligned for easier reading):

      qml: loading started: 1599681687490
      qml: loading ended:   1599681687941
      qml: loading started: 1599681688871
      qml: loading ended:   1599681688888
      qml: loading started: 1599681689888
      qml: loading ended:   1599681689905
      

      The second and third operations each take 17 ms (= 1 frame update, which makes for a visible UI hiccup), but more troubling is that the first loading operation takes 451 ms, and during that the UI completely freezes, even though the loaders are set to asynchronous (I tested it with the testRect object, which starts animating at the beginning of the program, but then stops animating for the above mentioned interval.) I retested it twice with 2 different screen resolutions (with 1920*1080 and with 3200*1800), and the first loader completed in now 989 ms and 1500 ms ( ! ) respectively, completele freezing the screen.

      Some observations and test I've done:

      • For testing I replaced the Text object in TestText.qml with both a Rectangle and and Image (with a specified source and set to async), both of which loaded within 51 ms for the first time (which also puzzles me), and again 17 ms for the second and third time.
      • I have tried putting the following 3 objects individually into main.qml, to see if they make a difference:
      Text {}
      Text { text: "abc" }
      
      TestText {}
      

      The first one made no difference, but if I put the second or third one into the code, then after the build succeeds (the bar in the lower right turns green), the application window doesn't appear for about 1 second, but after it appears, all 3 loaders now run in 17ms. So it seems to me that only the first Text object (with a set "text" property) that is loaded in the application takes a long time, but after it maybe the Text component is cached or something?

      • I've created a new project to test if it's just my project that's broken somehow, but no. If the only thing I put in main.qml is "Text {}", then it loads fine, but if I put "Text { text: "Test" }, it again takes about 1 second more for the window to appear.

      Attachments

        Issue Links

          No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

              esabraha Eskil Abrahamsen Blomfeldt
              frustratedqtie N o
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Gerrit Reviews

                  There are no open Gerrit changes