1 文件加载过程

每一个qml基本类型都对应了一个C++类，当你写的qml文件被加载时，qml引擎最终会为文件中的每个基本类型创建一个C++类对象，这些对象被按照树的结构组织起来。关于qt qml的基本用法，qt官网上有说明http://doc.qt.io/qt-5/qtqml-index.html，不熟悉的人可以参照学习。

以下面的例子作为说明：

import QtQuick 2.0
 
Rectangle {
    
    
    id: root
    width: 360
    height: width + 50
    color: "lightsteelblue"
    property alias myWidth: root.width
    property int counter: 1
 
    function reactToClick() {
    
    
        root.counter++
    }
 
    Text {
    
    
        id: text
        text: qsTr("Hello World: " + counter)
        anchors.centerIn: parent
    }
 
    MouseArea {
    
    
        id: mouseArea
        anchors.fill: parent
        onClicked: {
    
    
            reactToClick()
        }
    }
}

该文件包含了三个基本的qml基本元素， Rectangle, Text and MouseArea. 分别对应C++类： QQuickRectangle, QQuickText and QQuickMouseArea. 这些类对qt用户来说是不可见的。这些元素最终会被qt的内部机制通过调用Opengl来绘制出来，绘制和事件处理的都是由QQuickWindow类来进行管理的，例如，如果系统由专门的渲染线程的话，该类负责与该线程进行交互。

可以借助 KDAB’s Qt introspection tool, Gammaray，来查看针对qml文件生成的c++对象树，例如上面的qml文件对应的对象树如下所示：
在这里插入图片描述

上图中类QQuickMouseArea 和QQuickText 按照预期出现在了树中，但是，类QQuickRectangle_QML_0是什么呢？在qt中没有这个c++类，在后续的文章中会给出解释的，这里暂且将其看作是类QQuickRectangle 。

用QML profiler来分析加载该qml文件的程序，得到：
在这里插入图片描述

从上图可以看出，场景绘制的过程中，Creating 和 painting阶段花费了一些时间。其中的compiling阶段具体是在干什么呢，这就需要仔细研究qml文件被qml引擎加载的过程了。

2 加载QML文件的步骤：

** 1 Parsing 2 Compiling 3 Creating**

下面分别进行介绍：

2.1 Parsing阶段：

First of all, the QML file is parsed, which is handled by QQmlScript::Parser. Most of the parser internals are auto-generated from a grammar file. The abstract syntax tree (AST) of our example looks like this:

首先，qml文件被 QQmlScript::Parser解析，通过语法解析后，会建立一个abstract syntax tree（AST），即抽象语法树，对于上面的qml文件，对应的语法树如下：
在这里插入图片描述
这个AST是相当底层的，了解一下即可。然后，该语法树会被一个visitor进行遍历，将其转换成一个较为高层的数据结构，该数据结构包含 Objects, Properties ，Values，其中Objects对应QML元素，property/value对应的是 QML中的属性/值，例如color属性的取值为lightblue，另外，信号和信号对应的槽函数亦可以看作是属性/值，例如 onClicked信号及其对应的槽函数（Javascript function）。

2.2 Compiling 阶段：

至此，得到 Objects, Properties ，Values 结构之后，这些信息对于创建相应的C++类对象并为对象的属性赋值已经足够了，但是，为了提高效利，qml引擎并不会直接用这些数据来建立c++对象，而是先用对这些数据进行处理，并生成 QQmlCompiledData object ，这个过程就是compiling阶段，对应QML profiler中的compiling阶段！！之所以有这个过程，是因为使用 QQmlCompiledData 来建立c++对象更快。例如，有一个Button.qml文件，该文件会经常被其他的qml文件使用，这个文件会仅仅被compile一次，生成的QQmlCompiledData会被保存，每当Button被使用的时候，只需读取这份被保存的数据来创建一个c++对象即可。

To sum up: Parsing a QML file and compiling it is only done once, after that the QQmlCompiledData object is used to quickly create the C++ objects. The next step is creating.

2.3 Creating阶段：

这里不对QQmlCompiledData进行分析，但是QQmlCompiledData中的一个成员是值得提到的： “QByteArray bytecode” 。bytecode中包含了关键的信息：建立c++对象的说明，为对象的属性附上什么值。bytecode之外的其他成员仅仅起到辅助作用。

在creating阶段，class QQmlVME负责解析包含了大量关键信息的bytecode，其作用相当于一个interpreter。阅读QQmlVME::run(), 函数可以发现该interpreter遍历bytecode中包含的所有instructions，对每一种instructions都会有像一个的处理分支。在运行app是令QML_COMPILER_DUMP=1，我们可以bytecode中包含的instructions:

在这里插入图片描述

CREATE_SIMPLE 是最重要的一个instruction，它创建一个c++对象（using a database of registered objects in QQmlMetaType.）

STORE_INTEGER 对应的是将一个整数值赋给一个property。
STORE_SIGNAL 对应 create a bound signal handler.
STORE__BINDING* 对应 create a property binding. 更多关于binding的介绍在后续的博客中。
SETID obviously sets the identifier of an object, which is not an ordinary property.

对bytecode进行解释的VME解释器维护一个存放 objects的栈，STORE_* 这种指令操作的是位于栈顶的object。 FETCH 指令将一个特定的QObject放在栈顶，POP指令用来移除栈顶的object。所有的instructions都大量使用了integer indices，“例如， the STORE_COLOR instruction writes to property 41, which is the property index of the target QObject’s meta object.”

To sum up: Once a QML file is compiled, creating an instance of it is just a matter of executing the bytecode of the compiled data.

总结：

这篇文章讲了加载qml文件过程中的parse, compile, creating阶段。下一文章将会介绍property binding的过程。

（转载）深度解析qml引擎---（1）Qml文件加载

1 文件加载过程

2 加载QML文件的步骤：

2.1 Parsing阶段：

2.2 Compiling 阶段：

2.3 Creating阶段：

猜你喜欢