Qml應(yīng)用性能優(yōu)化教學(xué)課件

1、Qml應(yīng)用性能優(yōu)化第1頁，共23頁。QML的執(zhí)行QML的編譯QML的執(zhí)行、實(shí)例化QML的渲染QML的編譯QML的執(zhí)行、實(shí)例化QML的顯示setSourceApp.exec第2頁，共23頁。QML的設(shè)計思想QML應(yīng)用在啟動時，會對qml進(jìn)行編譯，并且對所有元素進(jìn)行實(shí)例化比如顯示一個Button ： id.visiable=trueQML不是一個傳統(tǒng)的解釋型語言，運(yùn)行時將所有代碼編譯將所有代碼實(shí)例化目的：犧牲啟動性能，保證應(yīng)用的運(yùn)行性能QML的這種設(shè)計，導(dǎo)致了。第3頁，共23頁。QML性能分析ListMyListItem.qmlMyListItem.qmlMyListItem.qmlMyListI

2、tem.qmlMyListItem.qmlMyListItem.qmlMyListItem.qmlTextButtonCMOS_BasicDialogCMOS_BasicDialog應(yīng)用在啟動的時候，會創(chuàng)建14個CMOS_BasicDialog,每個CMOS_BasicDialog用時20ms，總共花費(fèi)280ms第4頁，共23頁。qmlprofiler需要在應(yīng)用的.pro開啟qml debug：CONFIG += qml_debug編輯appconfig.xml，修改應(yīng)用的啟動項(xiàng) /usr/bin/cmoscalculator -qmljsdebugger=port:3768,block重啟機(jī)

3、器點(diǎn)擊運(yùn)行應(yīng)用在PC端運(yùn)行QtCreator第5頁，共23頁。QML的編譯所有通過import方式引入進(jìn)來的qml代碼都將會被編譯一個qml文件只會被編譯一次Qml文件會被編譯成為特定的字節(jié)碼第6頁，共23頁。控制QML的編譯將QML文件分到多個不同的QML文件采用動態(tài)創(chuàng)建QML組件的方式第7頁，共23頁。QML實(shí)例化所有元素在運(yùn)行前都會被實(shí)例化內(nèi)存占用很高應(yīng)用的啟動速度很慢優(yōu)化策略：用到的時候才需要實(shí)例化采用Qt.createComponent()的方式，動態(tài)創(chuàng)建qml組件第8頁，共23頁。三種不同的寫法不編譯、不實(shí)例化Qt.createComponent(“qrc:/qml/Alarm/A

4、larmMain.qml”)只編譯，不實(shí)例化Component Item CMOS_PageStackWindow CMOS_BasicDialog CMOS_LineEdit 編譯且實(shí)例化 Tab id ：alarm 第9頁，共23頁。異步Loader本身并不節(jié)省時間可以增加并行效果可以在總時間不變的情況下，提高用戶體驗(yàn)第10頁，共23頁。性能優(yōu)化Do it fasterDo it in parallelDo it laterDont do it at allDo it before第11頁，共23頁。QML的優(yōu)化技巧Text ElementImageControlling Element

5、LifetimeR/doc/qt-5/qtquick-performance.html第12頁，共23頁。Text ElementPlainTextStyledText AutoText RichText 第13頁，共23頁。ImagesAsynchronous LoadingImages are often quite large, and so it is wise to ensure that loading an image doesnt block the UI thread. Set the asynchronous property of t

6、he QML Image element totrueto enable asynchronous loading of images from the local file systemExplicit Source SizeIf your application loads a large image but displays it in a small-sized element, set the sourceSize property to the size of the element being rendered to ensure that the smaller-scaled

7、version of the image is kept in memory, rather than the large one.第14頁，共23頁。Controlling Element LifetimeLazy Initializationthere is no better way to reduce startup time than to avoid doing work you dont need to do, and delaying the work until it is necessary.Using LoaderUsing the active property of

8、a Loader, initialization can be delayed until required.Using the overloaded version of the setSource() function, initial property values can be supplied.Setting the Loaderasynchronousproperty to true may also improve fluidity while a component is instantiated.第15頁，共23頁。Controlling Element LifetimeUs

9、ing Dynamic CreationDevelopers can use the Qt.createComponent() function to create a component dynamically at runtime from within JavaScript, and then call createObject() to instantiate it.Destroy Unused ElementsElements which are invisible because they are a child of a non-visible element (for exam

10、ple, the second tab in a tab-widget, while the first tab is shown) should be initialized lazily in most cases, and deleted when no longer in use, to avoid the ongoing cost of leaving them active (for example, rendering, animations, property binding evaluation, etc).An item loaded with a Loader eleme

11、nt may be released by resetting the source or sourceComponent property of the Loader, while other items may be explicitly released by calling destroy() on them. In some cases, it may be necessary to leave the item active, in which case it should be made invisible at the very least.第16頁，共23頁。RenderOv

12、er-drawing and Invisible ElementsIf you have elements which are totally covered by other (opaque) elements, it is best to set their visible property tofalseor they will be drawn needlessly.Translucent vs OpaqueOpaque content is generally a lot faster to draw than translucent. The reason being that t

13、ranslucent content needs blending and that the renderer can potentially optimize opaque content better.ShaderWhen deploying to low-end hardware and the shader is covering a large amount of pixels, one should keep the fragment shader to a few instructions to avoid poor performance.第17頁，共23頁。文件管理器的優(yōu)化F

14、ileEditBar.qml CMOS_BasicDialog id:deleteConfirmDialog CMOS_BasicDialog id:renameDialog CMOS_BasicDialog id:progressDialog 兩種優(yōu)化方法動態(tài)創(chuàng)建 Re-use existing components第18頁，共23頁。應(yīng)用啟動的優(yōu)化生成Image時，運(yùn)行prelink使用Booster機(jī)制進(jìn)行CPU調(diào)頻調(diào)整應(yīng)用的啟動效果發(fā)布Release版本第19頁，共23頁。Booster的機(jī)制mapplauncherBoosterinvokerFork一個進(jìn)程Preload preload.qml啟動進(jìn)程命令Booster加載進(jìn)程重命名進(jìn)程，繼續(xù)加載對應(yīng)QML第20頁，共23頁。對Booster的優(yōu)化優(yōu)化前CMOS_PageStackWindow CMOS_BasicDialog CMOS_LineEdit CMOS_ListView CMOS_TabView CMOS_Page 優(yōu)化后Item Component Item CMOS_PageStackWindow CMOS_BasicDialog CMOS_LineEdit CMOS_ListView