<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qdeclarativeperformance.qdoc -->
<title>Qt 4.8: QML Performance</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>QML Performance</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#opaque-items">Opaque Items</a></li>
<li class="level1"><a href="#clipping">Clipping</a></li>
<li class="level1"><a href="#anchors-vs-binding">Anchors vs. Binding</a></li>
<li class="level1"><a href="#images">Images</a></li>
<li class="level1"><a href="#view-delegates">View Delegates</a></li>
<li class="level1"><a href="#image-resources-over-composition">Image resources over composition</a></li>
<li class="level1"><a href="#limit-javascript">Limit JavaScript</a></li>
<li class="level1"><a href="#rendering">Rendering</a></li>
</ul>
</div>
<h1 class="title">QML Performance</h1>
<span class="subtitle"></span>
<!-- $$$qdeclarativeperformance.html-description -->
<div class="descr"> <a name="details"></a>
<a name="opaque-items"></a>
<h2>Opaque Items</h2>
<p>Items hidden behind an opaque item incur a cost. If an item will be enitrely obscured by an opaque item, set its opacity to 0. One common example of this is when a "details" page is shown over the main application view.</p>
<a name="clipping"></a>
<h2>Clipping</h2>
<p><i>clip</i> is set to false by default. Enable clipping only when necessary.</p>
<a name="anchors-vs-binding"></a>
<h2>Anchors vs. Binding</h2>
<p>It is more efficient to use anchors rather than bindings to position items relative to each other. Consider this use of bindings to position rect2 relative to rect1:</p>
<pre class="cpp"> Rectangle {
id: rect1
x: <span class="number">20</span>
width: <span class="number">200</span>; height: <span class="number">200</span>
}
Rectangle {
id: rect2
x: rect1<span class="operator">.</span>x
y: rect1<span class="operator">.</span>y <span class="operator">+</span> rect1<span class="operator">.</span>height
width: rect1<span class="operator">.</span>width <span class="operator">-</span> <span class="number">20</span>
height: <span class="number">200</span>
}</pre>
<p>This is achieved more efficiently using anchors:</p>
<pre class="cpp"> Rectangle {
id: rect1
x: <span class="number">20</span>
width: <span class="number">200</span>; height: <span class="number">200</span>
}
Rectangle {
id: rect2
height: <span class="number">200</span>
anchors<span class="operator">.</span>left: rect1<span class="operator">.</span>left
anchors<span class="operator">.</span>top: rect1<span class="operator">.</span>bottom
anchors<span class="operator">.</span>right: rect1<span class="operator">.</span>right
anchors<span class="operator">.</span>rightMargin: <span class="number">20</span>
}</pre>
<a name="images"></a>
<h2>Images</h2>
<p>Images consume a great deal of memory and may also be costly to load. In order to deal with large images efficiently it is recommended that the <a href="qml-image.html#sourceSize-prop">Image::sourceSize</a> property be set to a size no greater than that necessary to render it. Beware that changing the sourceSize will cause the image to be reloaded.</p>
<p>Images on the local filesystem are usually loaded synchronously. This is usually the desired behavior for user interface elements, however for large images that do not necessarily need to be visible immediately, set the <a href="qml-image.html#asynchronous-prop">Image::asynchronous</a> property to true. This will load the image in a low priority thread.</p>
<a name="view-delegates"></a>
<h2>View Delegates</h2>
<p>Delegates must be created quickly as the view is flicked. There are two important aspects to maintaining a smooth view:</p>
<ul>
<li>Small delegates - keep the amount of QML to a minimum. Have just enough QML in the delegate to display the necessary information. Any additional functionality that is only needed when the delegate is clicked, for example, should be created by a Loader as needed.</li>
<li>Fast data access - ensure the data model is as fast as possible.</li>
</ul>
<a name="image-resources-over-composition"></a>
<h2>Image resources over composition</h2>
<p>If possible, provide a single image resource, rather than using composition of a number of elements. For example, a frame with a shadow could be created using a Rectangle placed over an Image providing the shadow. It is more efficient to provide an image that includes the frame and the shadow.</p>
<a name="limit-javascript"></a>
<h2>Limit JavaScript</h2>
<p>Avoid running JavaScript during animation. For example, running a complex JavaScript expression for each frame of an x property animation.</p>
<a name="rendering"></a>
<h2>Rendering</h2>
<p>Often using a different graphics system will give superior performance to the native graphics system (this is especially the case on X11). This can be configured using <a href="qapplication.html#setGraphicsSystem">QApplication::setGraphicsSystem</a>() or via the command line using the <tt>-graphicssystem</tt> switch.</p>
<p>You can enable OpenGL acceleration using the <tt>opengl</tt> graphics system, or by setting a <a href="qglwidget.html">QGLWidget</a> as the viewport of your <a href="qdeclarativeview.html">QDeclarativeView</a>.</p>
<p>You may need to try various options to find what works the best for your application. For embedded X11-based devices one recommended combination is to use the raster graphics system with a <a href="qglwidget.html">QGLWidget</a> for the viewport. While this doesn't guarantee the <b>fastest</b> performance for all use-cases, it typically has <b>consistently good</b> performance for all use-cases. In contrast, only using the raster paint engine may result in very good performance for parts of your application and very poor performance elsewhere.</p>
<p>The QML Viewer uses the raster graphics system by default for X11 and OS X. It also includes a <tt>-opengl</tt> command line option which sets a <a href="qglwidget.html">QGLWidget</a> as the viewport of the view. On OS X, a <a href="qglwidget.html">QGLWidget</a> is always used.</p>
<p>You can also prevent <a href="qdeclarativeview.html">QDeclarativeView</a> from painting its window background if you will provide the background of your application using QML, e.g.</p>
<pre class="cpp"> <span class="type"><a href="qdeclarativeview.html">QDeclarativeView</a></span> window;
window<span class="operator">.</span>setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_OpaquePaintEvent);
window<span class="operator">.</span>setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_NoSystemBackground);
window<span class="operator">.</span>viewport()<span class="operator">-</span><span class="operator">></span>setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_OpaquePaintEvent);
window<span class="operator">.</span>viewport()<span class="operator">-</span><span class="operator">></span>setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_NoSystemBackground);</pre>
</div>
<!-- @@@qdeclarativeperformance.html -->
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Qt and respective logos are trademarks of The Qt Company Ltd
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
