在QML應(yīng)用開發(fā)過程中，可以使用QML Profiler來查找應(yīng)用程序中典型性能問題的原因，例如啟動(dòng)慢、響應(yīng)慢、用戶界面不流暢等。

本文主要以QML Profiler工具本身出發(fā)，描述如何使用QML Profiler來分析QML應(yīng)用，記錄其常規(guī)使用方法。

設(shè)置QML Profiler

在QtCreator中，依次打開編輯->Preferences->分析器->QML Profiler：

可以選中“Flush data while profiling”復(fù)選框，用于在分析停止時(shí)定期刷新數(shù)據(jù)，這將節(jié)省目標(biāo)設(shè)備上的內(nèi)存，縮短了停止分析和顯示數(shù)據(jù)之間的等待時(shí)間。

在“Flush interval”字段中，以毫秒為單位設(shè)置刷新間隔。間隔時(shí)間越短，刷新數(shù)據(jù)的頻率就越高。間隔越長(zhǎng)，目標(biāo)應(yīng)用程序中需要緩沖的數(shù)據(jù)就越多，可能會(huì)浪費(fèi)內(nèi)存。但是，刷新本身是需要時(shí)間的，這可能會(huì)影響分析結(jié)果的顯示。

如果有多個(gè)QML引擎，并且希望將所有引擎產(chǎn)生的數(shù)據(jù)聚合到一個(gè)跟蹤視圖中，那么就選中“ Process data only when process ends”復(fù)選框。如果不選中，當(dāng)一個(gè)引擎停止時(shí)，分析就停止了。

注：在QtCreator中，一般不用設(shè)置QML Profiler，我們直接使用就可以了

使用QML Profiler

在QtCreator中使用QML Profiler分析應(yīng)用軟件，按照以下步驟即可：在已經(jīng)創(chuàng)建了一個(gè)項(xiàng)目工程的前提下，依次點(diǎn)擊Analyze -> QML Profiler：

然后會(huì)自動(dòng)編譯運(yùn)行對(duì)應(yīng)的項(xiàng)目工程，QML Profiler在我們的應(yīng)用軟件運(yùn)行過程中，會(huì)出現(xiàn)下圖所示的類似信息：

（當(dāng)程序開始運(yùn)行后，會(huì)自動(dòng)進(jìn)行時(shí)間計(jì)數(shù)。如果有輸入事件，還會(huì)顯示對(duì)應(yīng)的事件捕獲信息）

分析收集的數(shù)據(jù)

在QML應(yīng)用程序退出后，則會(huì)在QML Profiler視圖中自動(dòng)顯示數(shù)據(jù)，如下圖所示：

上圖中，水平為時(shí)間軸，該時(shí)間軸是監(jiān)聽QML應(yīng)用軟件開始到結(jié)束的時(shí)間。上方有對(duì)應(yīng)的時(shí)刻顯示；中間位置則是統(tǒng)計(jì)的數(shù)據(jù)，我們可以用鼠標(biāo)點(diǎn)擊對(duì)應(yīng)的數(shù)據(jù)區(qū)塊（可以在信息顯示欄中看到對(duì)應(yīng)時(shí)間內(nèi)區(qū)塊的數(shù)據(jù)情況）。左側(cè)是事件分類，事件在時(shí)間軸視圖的以一行或多行顯示。可用的事件類型取決于應(yīng)用程序編譯時(shí)所使用的Qt版本以及使用的Qt Quick版本。在顯示數(shù)據(jù)時(shí)，有如下表所示的事件分類：

注：由于QML應(yīng)用程序在啟動(dòng)創(chuàng)建過程中，組件的創(chuàng)建時(shí)間極短（一般都是在微秒級(jí)別），然而在時(shí)間線視圖中所呈現(xiàn)的是所有監(jiān)聽時(shí)間內(nèi)的數(shù)據(jù)，如下圖所示：

所以需要縮小時(shí)間軸（按住Ctrl，向上滾動(dòng)鼠標(biāo)中鍵或者用鼠標(biāo)拖動(dòng)時(shí)間軸）去查看組件創(chuàng)建相關(guān)的數(shù)據(jù)信息。例如下圖所示：

（由上圖可見，大約需要2.41ms創(chuàng)建完QML的小組件）

從Flame Graph視圖分析數(shù)據(jù)

『Flame Graph』視圖顯示了關(guān)于QML和JavaScript執(zhí)行情況的更簡(jiǎn)明的統(tǒng)計(jì)信息。在Total Time視圖中，水平條顯示了相對(duì)于所有JavaScript和QML事件的總的運(yùn)行時(shí)間，還顯示調(diào)用某個(gè)函數(shù)所花費(fèi)的總時(shí)間，而且嵌套顯示了函數(shù)調(diào)用情況。

在下拉菜單中選擇Memory，可以查看各函數(shù)分配的內(nèi)存總量

如果要查看函數(shù)分配的內(nèi)存數(shù)量，就需要選中下拉菜單中的Allocations一欄。如下圖所示：

（這張圖可以“從下往上”看，越往上就是QML中的最小元素了。點(diǎn)擊視圖中的某一項(xiàng)同時(shí)會(huì)跳轉(zhuǎn)到在代碼中的對(duì)應(yīng)行上。）

注：使用鼠標(biāo)左鍵雙擊視圖中的項(xiàng)目可以放大對(duì)應(yīng)視圖。雙擊視圖中的空白區(qū)域可以再次縮小。

與『Timeline』視圖不同，在沒有QML或JavaScript運(yùn)行的時(shí)候，『Flame Graph』視圖不顯示時(shí)間跨度，因此，『Flame Graph』不適合分析QML應(yīng)用中每幀的執(zhí)行時(shí)間（『Timeline』視圖更適合）。但是，該視圖可以很清晰的看到在QML應(yīng)用程序運(yùn)行過程中，各種QML和JavaScript事件的總體情況。

從Statistics視圖分析數(shù)據(jù)

『Statistics』視圖顯示了QML應(yīng)用中binding、create、compile、JavaScript或信號(hào)事件被觸發(fā)的次數(shù)，以及花費(fèi)的平均時(shí)間，如下圖所示：



這可以讓我們檢查需要優(yōu)化的事件，如果某事件大量出現(xiàn)可能表明觸發(fā)了不必要的事件。要查看事件發(fā)生的中位數(shù)、最長(zhǎng)時(shí)間和最短時(shí)間，可以在上下文菜單中選擇擴(kuò)展事件統(tǒng)計(jì)。

接著數(shù)據(jù)顯示將如下圖所示：

Caller和Callee一欄顯示了事件之間的依賴關(guān)系，用于檢查應(yīng)用程序的內(nèi)部功能。Caller一欄表示觸發(fā)綁定的QML事件，通過Caller我們可以知道是什么觸發(fā)了綁定中的更改。Callee表示綁定觸發(fā)的QML事件，從Callee我們可以知道如果更改綁定，哪些QML事件將會(huì)受到影響。

結(jié)尾

在QML應(yīng)用程序中，出現(xiàn)啟動(dòng)慢、響應(yīng)慢、用戶界面不流暢等性能方面的問題時(shí)。典型的原因可能是：在太少的幀中執(zhí)行了太多的JavaScript。這意味著所有的JavaScript都必須在GUI線程繼續(xù)運(yùn)行之前返回（執(zhí)行完成）。

導(dǎo)致類似性能問題的另一個(gè)典型原因是：創(chuàng)建、繪制或更新了不可見項(xiàng)，該操作在GUI線程中需要花費(fèi)許多的時(shí)間。

在QML Profiler分析視圖中，為了發(fā)現(xiàn)過度使用JavaScript，應(yīng)檢查Animations和Scene Graph事件中的幀率，尋找間隙，并檢查應(yīng)用程序是否如預(yù)期的那樣運(yùn)行。對(duì)于JavaScript類別顯示函數(shù)的運(yùn)行時(shí)間，應(yīng)該盡量將其控制在每幀16毫秒以下（注：官方文檔給出的參數(shù)）。

要發(fā)現(xiàn)如果是不可見項(xiàng)引起的性能問題，需要查找丟失的幀，并檢查是否在應(yīng)用程序代碼中使用了太多的短綁定或每幀都要更新的信號(hào)處理程序。除此之外，我們還可以可視化場(chǎng)景圖，并找到不可見的項(xiàng)目，因?yàn)檫@些項(xiàng)目往往位于屏幕外或隱藏在其他可見元素之下，稍不留神就溜了。

本文主要描述了如何使用QML Profiler來分析應(yīng)用程序，更多的內(nèi)容是從工具本身出發(fā)的。如果后續(xù)遇著QML應(yīng)用軟件設(shè)計(jì)上的嚴(yán)重性能問題時(shí)，在寫寫啦。

審核編輯：劉清