深入解析QML引擎，第1部分:QML文件加載

譯者注：這個解析QML引擎的文章共4篇，分析非常透徹，在國內幾乎沒有找到類似的分析，為了便於國內的QT/QML愛好者和工作者也能更好的學習和理解QML引擎，故將這個系列的4篇文章翻譯過來。翻譯並不是完全直譯，有不足之處，請指正，謝謝！

———————————————————————————————————————————

下一篇 綁定（bounding)

在這個系列的博文中，我們將深入探尋隱藏在QML引擎背后的那些不為人知的玄機，一步步揭曉它內部實現的原理。這些博文都是基於Qt5版本的QtQuick，QtQuick 2.0來深入分析的。

眾所周知，QML文件中每個元素都對應於一個C++類。QML引擎在加載QML文件時，會為文件中的所有元素以某種方式創建相應的C++對象。在這篇博文中，我們將探尋QML引擎從解析QML文件開始，到形成一棵完整的C++對象樹的整個過程。Qt官方文檔已經大篇幅地闡述了QML和C++是如何協同工作的，這些內容值得你花上一些時間評鑒一番。在這個系列的博文中，我假設你已經對該官方文檔有所了解。

例子

首先我們將使用一個不怎么有用，也不怎么令人感到興奮，但卻能體現QML有趣的地方的例子：

 

圖1 QML例子

上面這個QML文件包含三個元素：Rectangle（矩形）、Text（文本）和MouseArea（鼠標區域）。這些元素分別對應於C++類：QQuickRectangle、 QQuickText和QQuickMouseArea。這些類只被導出到QML中，在C++版本中它們是私有的，不能被Qt用戶使用。這些元素將被繪制在一個OpenGL scenegraph中，繪制及事件處理都是由QQuickView控制的。我們可以利用KDAB的Qt自檢工具GammaRay來驗證QML文件對應的C++對象樹：

 

圖2 例子程序在GammaRay工具中顯示的對象圖

和我們預想的一樣，QQuickMouseArea和QQuickText類顯示在對象樹中。但QQuickRectangle_QML_0又是什么呢？在Qt的源代碼中壓根沒有同名的C++類！ 這個問題我們會在后續的博文中解答，你可以暫時假設它就是QQuickRectangle類型的一個對象。

讓我們更進一步，用QML分析器（QML profiler）來運行並分析這個例子程序：

 

圖3 例子程序在QML分析器中的輸出結果圖

如上圖所示，在場景設置過程中，執行了少許的繪制，這和我們預想的一樣。后續的創建階段花費了大量的時間。但還有一個編譯階段，編譯階段是個啥啊？ 都干些什么事？是在創建機器碼嗎？看來是時候更深入一點地分析加載QML文件的代碼了。

QML文件加載步驟

當加載QML文件時，會執行三個不同的步驟，接下來我們將深入研究這些步驟：

1.解析

2.編譯

3.創建

解析

首先，QML文件是由QQmlScript::Parser這個解析器來解析的。該解析器內部的絕大多數內容都是由��語法文件自動生成的。我們這個例子的抽象語法樹（AST）看起來是這樣的：

 

圖4 AST 

這個AST是比較底層的東西，緊接着，它將被轉換成更高層級結構的對象，屬性和值。這是通過使用一個訪問器遍歷AST來完成的。這一步的對象就和QML中的元素一一對應上了，且對象的屬性/值和QML元素的屬性/值也一一對應上。我們的例子中Rectangle元素的屬性“color”，其對應的值是“lightsteelblue”，它們就是屬性/值的關系。即使像onClicked這樣的信號處理程序也被看作只是屬性/值的關系，屬性是onClicked，值就是JavaScript函數體。

編譯

在理論上，對象，屬性和值已經足夠用於創建對應的C++對象，並給屬性賦上對應的值。但這些對象，屬性和值依然過於原始，在創建C++對象之前，還需要進行一些后置處理。這些后置處理是由QQmlCompiler來完成的，這對應於QML分析器（QML profiler）輸出中看到的編譯階段。該編譯器會為QML文件創建了一個QQmlCompiledData對象。 用QQmlCompiledData創建C++對象比直接使用對象、屬性和值來創建C++對象快了很多。當多次使用同一個QML文件，該文件也只會編譯一次。比如在一個工程中，其他所有的QML文件都會用到的Button.qml，編譯時Button.qml只會被編譯一次。Button.qml的QQmlCompiledData會一直保存，每次使用該按鈕組件時，都會根據這個Button.qml的QQmlCompiledData來創建C++對象。在編譯之后，就是創建階段，這在QML分析器（QML profiler）的輸出中可以看到。

綜上所述：解析和編譯QML文件都只會做一次，在此之后，都是直接使用QQmlCompiledData對象來快速創建C++對象。

創建

我不會深入研究QQmlCompiledData的細節，但有一個東西可能會引起你的注意：“QByteArray bytecode”成員變量。實際上，創建C++對象並給它的屬性賦值的指令會被編譯為了字節碼，之后由字節碼解析器解析！字節碼包含了一堆指令，當這些指令執行時，QQmlCompiledData的其余部分僅是輔助數據。

在創建階段，字節碼是由QQmlVME類解析的。閱讀QQmlVME::run（）這個函數的代碼，里面有一個循環用於遍歷字節碼包含的所有指令，在循環體內部，有一個很大的判定不同指令類型的switch語句。運行帶有QML_COMPILER_DUMP=1的例子程序，我們可以看到字節碼所包含的每個指令：

 

圖6 例子程序對應指令圖

CREATE_SIMPLE 指令是最重要的，它會創建一個C++對象，然后注冊到QQmlMetaType中的一個用於注冊對象的數據庫。

STORE_INTEGER 指令為屬性賦一個整數類型值。

STORE_SIGNAL 指令用於創建信號的處理器。

STORE_ * _BINDING 指令用於創建一個屬性的綁定。更多關於綁定的內容會在這個系列的下一篇博文中說明。

SETID 指令設置一個對象的標識（id），它不是一個普通的屬性。

VME有一個對象棧，STORE_*的所有指令都操作棧頂對象，FETCH指令在堆頂放置一個特定對象，POP指令會移除頂部對象。所有指令都大量使用整數索引，例如STORE_COLOR指令寫入屬性41，41就是目標對象的元對象的屬性索引。

綜上所述：一旦一個QML文件編譯完成，創建它的實例就只和編譯后的字節碼的執行有關。

結論

在這篇博文的最后，我們已經揭示了一個QML文件是如何進行解析、處理、編譯的，以及VME是如何創建對象的。我希望你已經更加深入地理解了QML引擎。

下一篇的博文將進一步探討屬性綁定是如何進行的，敬請關注！

下一篇 綁定（bounding)

作者：猿基地
鏈接：https://www.jianshu.com/p/3e959cbaff3a
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。