Qml performance optimization summary

Author: Lin Bin
-mail: [email protected]

Qt Quick performance optimization

• Use event driven
  • Avoid timed polling
  • Use signals and slots
• Use multi-threaded development
  • C++ multithreading, QThread, or C++11 thread
  • Qml WorkerScript component
• Use QtQuickCompiler
  • Add a line to the project management file .pro file
  • CONFIG+=qtquickcompiler
  • Note: The function of qtquickcompiler is to compile the qml file into binary qmlc format when the program is started for the first time. It is opened by default in the qt5.10 version.
  • Note: Qt5.12 will have a new qml code generator with better performance than QuickCompiler.
• Avoid using CPU-rendered components
  • Canvas
  • Qt Charts
• Use asynchronous loading
  • Asynchronous loading of pictures
  • The Image component of qml has the asynchronous loading property asynchronous, the default is false, and setting it to true means asynchronous loading.
  • Use C++ to handle big data loading.

JavaScript Code Regarding the optimized use of JavaScript

• Property binding

  • QML optimizes the engine. Simple expressions will not activate JavaScript, such as x: 10 + 2 * 5, which can be calculated on the fly, and the QML engine will directly calculate the result x: 20.

  • Avoid declaring JavaScript intermediate variables

  • Avoid accessing attributes outside the scope of instant evaluation (immeediate evaluation scope: the attributes of the object where the binding expression is located, the id in the component, the root element id in the component)

  • Avoid direct write operations when you need to use attributes for calculations.

• Attribute resolution

  • Avoid frequent access to attributes (in the part of the QML Profiler that is more frequently called, pay special attention not to access attributes)

Qt Quick picture and layout optimization

• Reduce image loading time and memory overhead

  • Asynchronous loading
  • Set image size

• Anchor layout

  • In the element layout, using anchors anchor layout is more efficient than attribute binding.
  • Coordinates>Anchor>Binding>JavaScript function.

Element life cycle design

• Use Loader to dynamically load and unload components
• Use the active attribute to delay instantiation
• Use the source attribute to provide the initial attribute value
• The asynchronous property is set to true to improve fluency when the component is instantiated.

Rendering considerations

• Avoid using the Clip attribute (disabled by default), cutting loss performance
• The overridden invisible element sets the visible attribute to false to notify the engine not to draw
• Transparent and opaque, opaque is more efficient, and set to invisible when fully transparent.

Use Animation instead of Timer

• Qt optimizes the realization of animation, and the performance is higher than the timer trigger property. The way Timer triggers animation is low in performance and consumes more power.