CN109542417B - 一种dom渲染网页的方法、装置、终端和存储介质 - Google Patents

Abstract

本公开是关于一种DOM渲染网页的方法、装置、终端和存储介质，属于终端技术领域。所述方法包括：在目标应用对应的模板中增加类型为逻辑虚拟类型的第一DOM节点；在所述模板的每个第一DOM节点中增加内部属性；当所述目标应用运行时，根据所述每个第一DOM的类型和内部属性，编译所述模板，得到JavaScript端的第一DOM树；当所述目标应用渲染网页时，根据所述第一DOM树，对所述目标应用的静态页面布局进行渲染。由于在JavaScript端生成了第一DOM树，且第一DOM树中包含用于渲染的节点和用于逻辑控制的节点，从而JavaScript端可以直接基于本端的第一DOM树即可完成网页渲染，降低了开发和维护成本，提高了渲染效率。

Description

一种DOM渲染网页的方法、装置、终端和存储介质

技术领域

本公开涉及终端技术领域，尤其涉及一种DOM渲染网页的方法、装置、终端和存储介质。

背景技术

当前终端中一般都安装浏览器，用户可以通过浏览器访问网页来浏览丰富多彩的内容。在用户通过浏览器访问网页时，终端从服务器中获取该网页的网页数据，根据该网页数据，通过DOM(Document Object Model，操作文档对象)树来渲染网页内容。

目前浏览器自身的DOM树中包括用于静态页面的布局与绘制的节点，网页渲染的逻辑控制代码在JavaScript端。JavaScript通过该逻辑控制代码操作该浏览器端的DOM树来驱动网页数据，以进行网页渲染。

发明内容

本公开提供一种DOM渲染网页的方法、装置、终端和存储介质，可以解决通过JavaScript操作目标应用端的DOM树，导致开发和维护成本较高，以及渲染效率低的问题。所述技术方案如下。

根据本公开实施例的第一方面，提供一种DOM渲染网页的方法，所述方法包括：

在目标应用对应的模板中增加类型为逻辑虚拟类型的第一DOM节点，所述模板基于传统DOM架构实现，所述逻辑虚拟类型的第一DOM节点用于存储逻辑控制信息；

在所述模板的每个第一DOM节点中增加内部属性，所述内部属性用于标识所述第一DOM节点是否参与布局和渲染；

当所述目标应用运行时，根据所述每个第一DOM的类型和内部属性，编译所述模板，得到JavaScript端的第一DOM树，所述第一DOM树包含用于渲染的节点和用于逻辑控制的节点；

当所述目标应用渲染网页时，根据所述第一DOM树，对所述目标应用的静态页面布局进行渲染。

在一种可能的实现方式中，所述根据所述每个第一DOM的类型和内部属性，编译所述模板，得到JavaScript端的第一DOM树，所述第一DOM树包含用于渲染的节点和用于逻辑控制的节点，包括：

根据所述每个第一DOM节点的类型，实例化所述每个第一DOM节点，得到每个第二DOM节点；

根据所述每个第一DOM节点的内部属性，将所述每个第二DOM节点插入所述模板中；

将所述模板的每个第二DOM节点进行初始化，得到所述JavaScript端的第一DOM树。

在另一种可能的实现方式中，所述根据所述每个第一DOM节点的类型，实例化所述每个第一DOM节点，得到每个第二DOM节点，包括：

对于每个第一DOM节点，当所述第一DOM节点的类型为渲染类型时，创建所述渲染类型的第二DOM节点，所述渲染类型的第二DOM为传统DOM架构中的原生节点，且用于参与渲染；

当所述第一DOM节点的类型为逻辑虚拟类型时，创建所述逻辑虚拟类型的第二DOM节点，所述逻辑虚拟类型的第二DOM节点用于进行逻辑控制。

在另一种可能的实现方式中，所述根据所述每个第一DOM节点的内部属性，将所述每个第二DOM节点插入所述模板中，包括：

对于每个第一DOM节点，根据所述第一DOM节点的第一内部属性，确定所述第一DOM节点是否参与布局；

当所述第一DOM节点参与布局时，将所述第一DOM节点对应的第二DOM节点插入到模板中。

在另一种可能的实现方式中，所述方法还包括：

当所述第一DOM节点参与布局时，根据所述第一DOM节点的第二内部属性，确定所述第一DOM节点是否参与渲染；

当所述第一DOM节点参与渲染时，将所述第一DOM节点对应的第二DOM节点的节点标识存储到缓存消息队列中；

根据所述缓存消息队列，构建本地应用端的第二DOM树，所述第二DOM树用于构建所述静态页面布局。

在另一种可能的实现方式中，所述方法还包括：

当所述第一DOM节点不参与渲染时，根据所述第一DOM节点的子节点的控制逻辑，确定所述第一DOM节点的子节点是否满足逻辑控制条件；

当所述第一DOM节点的子节点满足逻辑控制条件时，将所述第一DOM节点的子节点插入所述模板。

在另一种可能的实现方式中，所述将所述模板的每个第二DOM节点进行初始化，得到所述JavaScript端的第一DOM树，包括：

对于所述每个第二DOM节点，当所述第二DOM节点的类型为渲染类型时，建立包括所述第二DOM节点的组件与组件信息的绑定关系；

当所述第二DOM节点的类型为逻辑虚拟类型时，根据所述第二DOM节点的控制逻辑，建立逻辑控制机制；

根据所述每个第二DOM节点、所述绑定关系和所述逻辑控制机制，生成所述第一DOM树。

根据本公开实施例的第二方面，提供一种DOM渲染网页装置，所述装置包括：

第一添加模块，被配置为在目标应用对应的模板中增加类型为逻辑虚拟类型的第一DOM节点，所述模板基于传统DOM架构实现，所述逻辑虚拟类型的第一DOM节点用于存储逻辑控制信息；

第二添加模块，被配置为在所述模板的每个第一DOM节点中增加内部属性，所述内部属性用于标识所述第一DOM节点是否参与布局和渲染；

编译模块，被配置为当所述目标应用运行时，根据所述每个第一DOM的类型和内部属性，编译所述模板，得到JavaScript端的第一DOM树，所述第一DOM树包含用于渲染的节点和用于逻辑控制的节点；

渲染模块，被配置为当所述目标应用渲染网页时，根据所述第一DOM树，对所述目标应用的静态页面布局进行渲染。

在一种可能的实现方式中，所述编译模块，还被配置为根据所述每个第一DOM节点的类型，实例化所述每个第一DOM节点，得到每个第二DOM节点；根据所述每个第一DOM节点的内部属性，将所述每个第二DOM节点插入所述模板中；将所述模板的每个第二DOM节点进行初始化，得到所述JavaScript端的第一DOM树。

在另一种可能的实现方式中，所述编译模块，还被配置为对于每个第一DOM节点，当所述第一DOM节点的类型为渲染类型时，创建所述渲染类型的第二DOM节点，所述渲染类型的第二DOM为传统DOM架构中的原生节点，且用于参与渲染；当所述第一DOM节点的类型为逻辑虚拟类型时，创建所述逻辑虚拟类型的第二DOM节点，所述逻辑虚拟类型的第二DOM节点用于进行逻辑控制。

在另一种可能的实现方式中，所述编译模块，还被配置为对于每个第一DOM节点，根据所述第一DOM节点的第一内部属性，确定所述第一DOM节点是否参与布局；当所述第一DOM节点参与布局时，将所述第一DOM节点对应的第二DOM节点插入到模板中。

在另一种可能的实现方式中，所述装置还包括：

第一确定模块，被配置为当所述第一DOM节点参与布局时，根据所述第一DOM节点的第二内部属性，确定所述第一DOM节点是否参与渲染；

第二确定模块，被配置为当所述第一DOM节点参与渲染时，将所述第一DOM节点对应的第二DOM节点的节点标识存储到缓存消息队列中；

构建模块，被配置为根据所述缓存消息队列，构建本地应用端的第二DOM树，所述第二DOM树用于构建所述静态页面布局。

在另一种可能的实现方式中，所述装置还包括：

第三确定模块，被配置为当所述第一DOM节点不参与渲染时，根据所述第一DOM节点的子节点的控制逻辑，确定所述第一DOM节点的子节点是否满足逻辑控制条件；

插入模块，被配置为当所述第一DOM节点的子节点满足逻辑控制条件时，将所述第一DOM节点的子节点插入所述模板。

在另一种可能的实现方式中，所述编译模块，还被配置为对于所述每个第二DOM节点，当所述第二DOM节点的类型为渲染类型时，建立包括所述第二DOM节点的组件与组件信息的绑定关系；当所述第二DOM节点的类型为逻辑虚拟类型时，根据所述第二DOM节点的控制逻辑，建立逻辑控制机制；根据所述每个第二DOM节点、所述绑定关系和所述逻辑控制机制，生成所述第一DOM树。

根据本公开实施例的第三方面，提供一种终端，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

在目标应用对应的模板中增加类型为逻辑虚拟类型的第一DOM节点，所述模板基于传统DOM架构实现，所述逻辑虚拟类型的第一DOM节点用于存储逻辑控制信息；

在所述模板的每个第一DOM节点中增加内部属性，所述内部属性用于标识所述第一DOM节点是否参与布局和渲染；

当所述目标应用运行时，根据所述每个第一DOM的类型和内部属性，编译所述模板，得到JavaScript端的第一DOM树，所述第一DOM树包含用于渲染的节点和用于逻辑控制的节点；

当所述目标应用渲染网页时，根据所述第一DOM树，对所述目标应用的静态页面布局进行渲染。

根据本公开实施例的第四方面，提供一种存储介质，所述存储介质上存储有指令，所述指令被处理器执行以完成第一方面任一可能实现方式所述的DOM渲染网页的方法。

本公开的实施例提供的技术方案可以包括以下有益效果：

通过在模板中增加类型为逻辑虚拟类型的第一DOM节点并且在该第一DOM节点中增加用于标识该第一DOM节点是否参与布局和渲染，在目标应用运行时，编译上述模板生成包含用于渲染的节点和用于逻辑控制的节点的JavaScript端的第一DOM树，对目标应用的静态页面布局进行渲染。由于在JavaScript端生成了第一DOM树，且第一DOM树中包含用于渲染的节点和用于逻辑控制的节点，从而JavaScript端可以直接基于本端的第一DOM树即可完成网页渲染，降低了开发和维护成本，提高了渲染效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是根据一示例性实施例示出的一种DOM渲染网页的方法的流程图；

图2是根据一示例性实施例示出的另一种DOM渲染网页的方法的流程图；

图3是根据一示例性实施例示出的一种DOM渲染网页的装置框图；

图4是根据一示例性实施例示出的一种用于DOM渲染网页的终端400的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种DOM渲染网页的方法的流程图，如图1所示，包括以下步骤。

在步骤S101中，终端在目标应用对应的模板中增加类型为逻辑虚拟类型的第一DOM节点，上述模板基于传统DOM架构实现，上述逻辑虚拟类型的第一DOM节点用于存储逻辑控制信息。

在步骤S102中，终端在上述模板的每个第一DOM节点中增加内部属性，上述内部属性用于标识上述第一DOM节点是否参与布局和渲染。

在步骤S103中，当上述目标应用运行时，终端根据上述每个第一DOM的类型和内部属性，编译上述模板，得到JavaScript端的第一DOM树，上述第一DOM树包含用于渲染的节点和用于逻辑控制的节点。

在步骤S104中，当上述目标应用渲染网页时，终端根据上述第一DOM树，对上述目标应用的静态页面布局进行渲染。

通过在模板中增加类型为逻辑虚拟类型的第一DOM节点并且在该第一DOM节点中增加用于标识该第一DOM节点是否参与布局和渲染，在应用运行时，编译上述模板生成包含用于渲染的节点和用于逻辑控制的节点的JavaScript端的第一DOM树，对目标应用的静态页面布局进行渲染。由于在JavaScript端生成了第一DOM树，且第一DOM树中包含用于渲染的节点和用于逻辑控制的节点，从而JavaScript端可以直接基于本端的第一DOM树即可完成网页渲染，降低了开发和维护成本，提高了渲染效率。

图2是根据一示例性实施例示出的一种DOM渲染网页的方法的流程图，如图2所示，包括以下步骤。

在步骤S201中，终端在目标应用对应的模板中增加类型为逻辑虚拟类型的第一DOM节点，上述模板基于传统DOM架构实现，上述逻辑虚拟类型的第一DOM节点用于存储逻辑控制信息。

上述目标应用可以为快应用，也可以为其他应用，目标应用对应的模板为目标应用对应的任一模板，本公开实施例对此不进行具体限制。

在本实施例中，以上述目标应用为快应用为例进行说明。开发人员在使用快应用的模板进行开发的过程中，使用<template>标签来定义模板片段，该<template>标签中为类似HTML(HyperText Markup Language，超级文本标记语言)的标签语言。终端在在模板中增加类型为逻辑虚拟类型的第一DOM节点用于存储逻辑控制信息，以实现逻辑控制，将该类第一DOM节点命名为DomFigment。

逻辑虚拟类型的第一DOM节点包括用于列表渲染的节点、用于条件渲染的节点、逻辑控制块以及插槽中的至少一个。相应的，第一DOM节点用于存储控制循环逻辑信息、控制条件逻辑信息、逻辑控制块信息以及占位符对应的逻辑控制信息中的至少一项。

当逻辑虚拟类型的第一DOM节点包括用于列表渲染的节点时，使用for指令实现列表渲染时的循环控制逻辑，在for指令所在的第一DOM节点中保存用于控制循环逻辑信息。当逻辑虚拟类型的第一DOM节点包括用于条件渲染的节点时，使用if和/或elif和/或else的组合指令或show指令实现条件渲染时的条件逻辑，在上述条件逻辑指令所在的第一DOM节点中保存用于条件判断的逻辑信息。当逻辑虚拟类型的第一DOM节点包括逻辑控制块时，使用block指令实现逻辑控制块的控制，该逻辑控制块可以与上述循环指令和条件逻辑指令进行组合实现更为复杂的逻辑控制，在上述逻辑控制块所在的第一DOM节点中保存逻辑控制块对应的逻辑控制信息。当逻辑虚拟类型的第一DOM节点包括插槽时，使用slot指令实现插槽作为占位符，实现灵活的组件复用，在上述占位符所在的第一DOM节点保存占位符对应的逻辑控制信息。

例如，当上述逻辑虚拟类型的第一DOM节点包括用于列表渲染的节点时，列表渲染使用for指令来实现，for指令根据目标应用的源数据数组来渲染列表，终端根据上述for指令将上述源数据数组循环遍历，该数组的元素为上述列表中填充的元素，例如网页中表格的实现或者下拉菜单的实现均可以使用上述for元素来实现。

列表渲染可以参考以下代码实例：

在上述代码实例中，代码for＝"{{list}}"中list表示源数据数组，该源数据数据用于承载需要展示的所有数据，$item表示默认的数组元素名称，通过该数组元素名称可以获取该数组元素名称对应的数组元素，$idx表示默认的数组索引名，根据该数组索引名可以获取该数组索引名对应的数组。

再如，当上述逻辑虚拟类型的第一DOM节点包括用于条件渲染的节点时，条件渲染使用条件逻辑指令来实现，条件逻辑指令可以使用if、elif以及else的组合指令，或使用show指令。上述两种条件渲染指令的区别在于，当该条件逻辑指令为if、elif以及else的组合指令时，该条件逻辑指令的条件值为FALSE，用于指示在渲染网页页面时，将该条件逻辑指令对应的条件渲染组件不参与页面的渲染，该条件渲染组件包括的数据元素不渲染在页面上；该条件逻辑指令的条件的值为TRUE，用于指示在渲染网页页面时，将该条件渲染组件包括的数据元素渲染在页面上。当该条件逻辑指令为show指令时，该条件逻辑指令的条件的值为FALSE，用于指示上述条件对应的值在渲染网页时不可见，该条件渲染组件仍存在于生成的DOM树中，若该条件逻辑指令的条件值为TRUE，则将上述条件渲染组件包括的数据元素渲染在页面上。

条件渲染可以参考以下代码实例：

在上述代码实例中，display表示条件值，当display的值为FALSE时，Hello-1以及Hello-2对应的条件渲染组件不参与渲染，Hello-3对应的条件渲染组件不变，正常参与网页渲染；当display的值为TRUE时，Hello-1和Hello-2对应的条件渲染组件不变，正常参与渲染，Hello-3对应的条件渲染组件不参与渲染。

再如，当上述逻辑虚拟类型的第一DOM节点包括逻辑控制块时，block指令可以和条件逻辑指令if或者循环逻辑指令for一起使用，来进行逻辑控制，从而实现更加灵活的列表渲染和条件渲染。

block指令和for指令共同使用参考以下代码实例：

在上述代码实例中，block指令所在的第一DOM节点引入了列表循环for指令。当上述block没有指定类型时，即没有和上述条件逻辑指令或循环逻辑指令等共同使用时，该block指令所在的第一DOM节点在编译时被当做透明节点来对待，即将该block指令所在的第一DOM节点的子节点添加到该block指令所在的第一DOM节点的父节点上，即该block指令所在的第一DOM节点的位置。

再如，当上述逻辑虚拟类型的第一DOM节点包括插槽时，使用插槽slot指令来表示占位符，占位符的作用是将需要插入的组件插入到该slot所在的位置反映在页面上是将其他组件的内容显示在该占位符所在的位置。

以组件comp-a为例进行说明，该组件comp-a在上述模板中，该组件comp-a使用slot作为占位符，代码如下所示：

组件comp-a的定义如下所示：

<comp-a>

<text>body</text>

</comp-a>

最终comp-a使用产生的结果如下：

在上述代码实例中，上述组件comp-a的内容被添加到上述模板下的内容中，插入的位置为上述插槽slot所在的位置。

在步骤S202中，终端在上述模板的每个第一DOM节点中增加内部属性，上述内部属性用于标识上述第一DOM节点是否参与布局和渲染。

终端在上述模板的每个节点中增加内部属性，该内部属性包括第一内部属性和第二内部属性。该第一内部属性可以为layout，该layout属性用于标识上述第一DOM节点是否参与布局，当该layout属性的属性值为true时，上述第一DOM节点参与布局；当该layout属性的属性值为false时，上述第一DOM节点不参与布局。该第二内部属性可以为render，该render属性用于标识上述第一DOM节点是否参与渲染，当该render的属性的属性值为true时，上述第一DOM节点参与渲染；当该render属性的属性值为false时，上述第一DOM节点不参与渲染，为逻辑虚拟类型的节点，用于逻辑控制。

在步骤S203中，终端根据每个第一DOM节点的类型，实例化上述每个第一DOM节点，得到每个第二DOM节点。

对于每个第一DOM节点，当该第一DOM节点的类型为渲染类型时，终端创建该渲染类型的第二DOM节点，该渲染类型的第二DOM为传统DOM架构中的原生节点，且用于参与渲染。即当上述第一DOM节点是传统DOM的原生节点时，将该原生节点实例化。

当该第一DOM节点的类型为逻辑虚拟类型时，终端创建该逻辑虚拟类型的第二DOM节点，该逻辑虚拟类型的第二DOM节点用于进行逻辑控制。即当上述第一DOM节点是上述在template模板中添加的逻辑虚拟类型的第一DOM节点，如逻辑控制块(block)、插槽(slot)或者包含条件渲染(if、elif以及else)和列表渲染(for)，将该逻辑虚拟类型的节点实例化。

在表1中，DomElement表示上述渲染类型的第二DOM节点构成的原生组件所在的Class(类)的Class名称(类名称)，该DomElement类的实例为渲染类型的节点实例化得到的，参与页面的渲染，该DomElement类的实例包含layout和render两个内部属性，该DomElement类的实例中layout属性的属性值为true，render属性的属性值为true；DomFigment表示上述逻辑虚拟类型的第二DOM节点所在的Class的Class名称，该DomElement类的实例为逻辑虚拟类型的节点实例化得到的，用于存储逻辑控制信息，处理上述逻辑控制指令，该DomFigment类的实例包含layout和render两个内部属性，该DomElement类的实例中layout属性的属性值为true，render属性的属性值为false。

表1

在步骤S204中，终端根据每个第一DOM节点的内部属性，将该每个第二DOM节点插入上述模板中。

对于每个第一DOM节点，终端根据该第一DOM节点的第一内部属性，确定该第一DOM节点是否参与布局。根据上述步骤S202中添加的layout属性，当该第一DOM节点的layout属性值为TRUE时，上述第一DOM节点参与布局；当上述第一DOM节点的layout属性值为FALSE时，上述第一DOM节点不参与布局。当上述第一DOM节点参与布局时，终端将该第一DOM节点对应的第二DOM节点插入到上述模板中；当上述第一DOM节点不参与布局时，终端跳过该第一DOM节点，继续遍历下一个第一DOM节点，直到遍历完所有第一DOM节点为止。

在一种可能的实现方式中，当上述第一DOM节点参与布局时，终端根据上述第一DOM节点的第二内部属性，确定上述第一DOM节点是否参与渲染。根据上述步骤S202中添加的render属性，当该第一DOM节点的render属性值为TRUE时，上述第一DOM节点参与渲染，将该第一DOM节点对应的第二DOM节点的节点标识存储到缓存消息队列中。终端根据上述缓存消息队列，构建本地应用端的第二DOM树，该第二DOM树仅包含实际参与渲染的节点，该第二DOM树用于构建上述静态页面布局。

在步骤S205中，终端将上述模板的每个第二DOM节点进行初始化，得到第一DOM树。

对于上述每个第二DOM节点，本步骤可以通过以下步骤(1)至(3)实现，包括：

(1)：当上述第二DOM节点的类型为渲染类型时，终端建立包括上述第二DOM节点的组件与组件信息的绑定关系，执行步骤(3)。

当上述第二DOM节点的类型为渲染类型时，终端获取该第二DOM节点的组件信息，该组件信息定义在上述模板中，该组件信息包括该组件的Id、该组件的属性、该组件的Class、该组件的内联样式以及该组件的事件等。将上述第二DOM节点的组件信息与该第二DOM节点的组件进行绑定，建立该第二DOM节点的组件与组件信息的绑定关系。

(2)：当上述第二DOM节点的类型为逻辑虚拟类型时，终端根据上述第二DOM节点的控制逻辑，建立逻辑控制机制。

当上述第二DOM节点的类型为逻辑虚拟节点类型时，获取该第二DOM节点的控制逻辑，根据上述步骤S201中的内容，该第二DOM节点的控制逻辑包含列表渲染中、条件渲染、逻辑控制块和插槽。根据上述第二DOM节点的控制逻辑，建立对应的逻辑控制机制。以条件渲染中的if为例，上述模板的代码为<div if＝”{{value}}”>...</div>。

(3)：终端根据上述每个第二DOM节点、上述绑定关系和上述逻辑控制机制，生成上述第一DOM树。

终端根据上述每个第二DOM节点、上述每个第二DOM节点组件与组件信息的绑定关系和上述第二DOM节点对应的逻辑控制机制，生成上述第一DOM树，该第一DOM树包含渲染类型的第二DOM节点和逻辑虚拟控制类型的第二DOM节点。

在步骤S206中，当上述目标应用渲染网页时，终端根据上述第一DOM树，对上述目标应用的静态页面布局进行渲染。

当上述目标应用即快应用渲染网页时，终端获取上述第二DOM树构建的静态页面布局，该布局包含了页面显示的元素但是没有实际的数据；终端根据上述第一DOM树对该静态页面布局进行渲染，该第一DOM树中，包含了逻辑控制来进行数据驱动，将上述第一DOM树中的节点与上述第二DOM树中的节点建立映射关系，即要展示的数据与静态页面布局进行映射，完成页面的渲染操作，得到完整的网页。

通过在模板中增加类型为逻辑虚拟类型的第一DOM节点并且在该第一DOM节点中增加用于标识该第一DOM节点是否参与布局和渲染，在模板中使用列表渲染、条件渲染、逻辑控制块和插槽等用于逻辑控制的逻辑虚拟节点，将数据控制与模板相结合，在应用运行时，编译上述模板生成包含用于渲染的节点和用于逻辑控制的节点的JavaScript端的第一DOM树，对目标应用的静态页面布局进行渲染，生成仅用于渲染的本地应用端第二DOM树。由于在JavaScript端生成了第一DOM树，且第一DOM树中包含用于渲染的节点和用于逻辑控制的节点，在本地应用端生成第二DOM树，且第二DOM树中仅包含用于渲染的节点，避免了在JavaScript端直接操作DOM，降低了代码的复杂程度，使代码的逻辑更加清晰，降低了开发和维护成本，提高了渲染效率且便于模板的升级与优化。

图3是根据一示例性实施例示出的一种DOM渲染网页的装置框图。参照图3，该装置包括第一添加模块301，第二添加模块302、编译模块303和渲染模块304。

第一添加模块301，被配置为在目标应用对应的模板中增加类型为逻辑虚拟类型的第一DOM节点，上述模板基于传统DOM架构实现，上述逻辑虚拟类型的第一DOM节点用于存储逻辑控制信息；

第二添加模块302，被配置为在上述模板的每个第一DOM节点中增加内部属性，上述内部属性用于标识上述第一DOM节点是否参与布局和渲染；

编译模块303，被配置为当上述目标应用运行时，根据上述每个第一DOM的类型和内部属性，编译上述模板，得到JavaScript端的第一DOM树，上述第一DOM树包含用于渲染的节点和用于逻辑控制的节点；

渲染模块304，被配置为当上述目标应用渲染网页时，根据上述第一DOM树，对上述目标应用的静态页面布局进行渲染。

在一个可能的实现方式中，上述编译模块303，还被配置为根据上述每个第一DOM节点的类型，实例化上述每个第一DOM节点，得到每个第二DOM节点；根据上述每个第一DOM节点的内部属性，将上述每个第二DOM节点插入上述模板中；将上述模板的每个第二DOM节点进行初始化，得到上述JavaScript端的第一DOM树.

在另一种可能的实现方式中，上述编译模块303，还被配置为对于每个第一DOM节点，当上述第一DOM节点的类型为渲染类型时，创建上述渲染类型的第二DOM节点，上述渲染类型的第二DOM为传统DOM架构中的原生节点，且用于参与渲染；当上述第一DOM节点的类型为逻辑虚拟类型时，创建上述逻辑虚拟类型的第二DOM节点，上述逻辑虚拟类型的第二DOM节点用于进行逻辑控制。

在另一种可能的实现方式中，上述编译模块303，还被配置为对于每个第一DOM节点，根据上述第一DOM节点的第一内部属性，确定上述第一DOM节点是否参与布局；当上述第一DOM节点参与布局时，将上述第一DOM节点对应的第二DOM节点插入到模板中。

在另一种可能的实现方式中，上述装置还包括：

第一确定模块，被配置为当上述第一DOM节点参与布局时，根据上述第一DOM节点的第二内部属性，确定上述第一DOM节点是否参与渲染；

第二确定模块，被配置为当上述第一DOM节点参与渲染时，将上述第一DOM节点对应的第二DOM节点的节点标识存储到缓存消息队列中；

构建模块，被配置为根据上述缓存消息队列，构建本地应用端的第二DOM树，所述第二DOM树用于构建所述静态页面布局。

在另一种可能的实现方式中，上述装置还包括：

第三确定模块，被配置为当上述第一DOM节点不参与渲染时，根据上述第一DOM节点的子节点的控制逻辑，确定上述第一DOM节点的子节点是否满足逻辑控制条件；

插入模块，被配置为当上述第一DOM节点的子节点满足逻辑控制条件时，将上述第一DOM节点的子节点插入上述模板。

在另一种可能的实现方式中，上述编译模块303，还被配置为对于上述每个第二DOM节点，当上述第二DOM节点的类型为渲染类型时，建立包括上述第二DOM节点的组件与组件信息的绑定关系；当上述第二DOM节点的类型为逻辑虚拟类型时，根据上述第二DOM节点的控制逻辑，建立逻辑控制机制；根据上述每个第二DOM节点、上述绑定关系和上述逻辑控制机制，生成上述第一DOM树。

通过在模板中增加类型为逻辑虚拟类型的第一DOM节点并且在该第一DOM节点中增加用于标识该第一DOM节点是否参与布局和渲染，在模板中使用列表渲染、条件渲染、逻辑控制块和插槽等用于逻辑控制的逻辑虚拟节点，将数据控制与模板相结合，在应用运行时，编译上述模板生成包含用于渲染的节点和用于逻辑控制的节点的JavaScript端的第一DOM树，对目标应用的静态页面布局进行渲染，生成仅用于渲染的本地应用端第二DOM树。由于在JavaScript端生成了第一DOM树，且第一DOM树中包含用于渲染的节点和用于逻辑控制的节点，在本地应用端生成第二DOM树，且第二DOM树中仅包含用于渲染的节点，避免了在JavaScript端直接操作DOM，降低了代码的复杂程度，使代码的逻辑更加清晰，降低了开发和维护成本，提高了渲染效率且便于模板的升级与优化。

图4是根据一示例性实施例示出的一种用于DOM渲染网页的终端400的框图。例如，终端400可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图4，终端400可以包括以下一个或多个组件：处理组件402，存储器404，电源组件406，多媒体组件408，音频组件410，输入/输出(I/O)的接口412，传感器组件414，以及通信组件416。

处理组件402通常控制终端400的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件402可以包括一个或多个处理器420来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件402可以包括一个或多个模块，便于处理组件402和其他组件之间的交互。例如，处理部件402可以包括多媒体模块，以方便多媒体组件408和处理组件402之间的交互。

存储器404被配置为存储各种类型的数据以支持在设备400的操作。这些数据的示例包括用于在终端400上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器404可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电力组件406为终端400的各种组件提供电力。电力组件406可以包括电源管理系统，一个或多个电源，及其他与为终端400生成、管理和分配电力相关联的组件。

多媒体组件408包括在上述终端400和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。上述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与上述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件408包括一个前置摄像头和/或后置摄像头。当设备400处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件410被配置为输出和/或输入音频信号。例如，音频组件410包括一个麦克风(MIC)，当终端400处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器404或经由通信组件416发送。在一些实施例中，音频组件410还包括一个扬声器，用于输出音频信号。

I/O接口412为处理组件402和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件414包括一个或多个传感器，用于为终端400提供各个方面的状态评估。例如，传感器组件414可以检测到设备400的打开/关闭状态，组件的相对定位，例如上述组件为终端400的显示器和小键盘，传感器组件414还可以检测终端400或终端400一个组件的位置改变，用户与终端400接触的存在或不存在，终端400方位或加速/减速和终端400的温度变化。传感器组件414可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件414还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件414还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件416被配置为便于终端400和其他设备之间有线或无线方式的通信。终端400可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信部件416经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，上述通信部件416还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，终端400可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器404，上述指令可由终端400的处理器420执行以完成上述方法。例如，上述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本公开实施例还提供了一种存储介质，该存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，该指令、该程序、该代码集或该指令集由处理器加载并执行以实现上述实施例的一种DOM渲染网页的方法中终端所执行的操作。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (14)

1.一种DOM渲染网页的方法，其特征在于，所述方法包括：

在目标应用对应的模板中增加类型为逻辑虚拟类型的第一DOM节点，所述模板基于传统DOM架构实现，所述逻辑虚拟类型的第一DOM节点用于存储逻辑控制信息；

在所述模板的每个第一DOM节点中增加内部属性，所述内部属性用于标识所述第一DOM节点是否参与布局和渲染；

当所述目标应用运行时，根据所述每个第一DOM节点的类型，实例化所述每个第一DOM节点，得到每个第二DOM节点；

根据所述每个第一DOM节点的内部属性，将所述每个第二DOM节点插入所述模板中；

将所述模板的每个第二DOM节点进行初始化，得到JavaScript端的第一DOM树，所述第一DOM树包含用于渲染的节点和用于逻辑控制的节点；

当所述目标应用渲染网页时，根据所述第一DOM树，对所述目标应用的静态页面布局进行渲染。

2.根据权利要求1所述的方法，其特征在于，所述根据所述每个第一DOM节点的类型，实例化所述每个第一DOM节点，得到每个第二DOM节点，包括：

对于每个第一DOM节点，当所述第一DOM节点的类型为渲染类型时，创建所述渲染类型的第二DOM节点，所述渲染类型的第二DOM为传统DOM架构中的原生节点，且用于参与渲染；

当所述第一DOM节点的类型为逻辑虚拟类型时，创建所述逻辑虚拟类型的第二DOM节点，所述逻辑虚拟类型的第二DOM节点用于进行逻辑控制。

3.根据权利要求1所述的方法，其特征在于，所述根据所述每个第一DOM节点的内部属性，将所述每个第二DOM节点插入所述模板中，包括：

对于每个第一DOM节点，根据所述第一DOM节点的第一内部属性，确定所述第一DOM节点是否参与布局；

当所述第一DOM节点参与布局时，将所述第一DOM节点对应的第二DOM节点插入到模板中。

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：

当所述第一DOM节点参与布局时，根据所述第一DOM节点的第二内部属性，确定所述第一DOM节点是否参与渲染；

当所述第一DOM节点参与渲染时，将所述第一DOM节点对应的第二DOM节点的节点标识存储到缓存消息队列中；

根据所述缓存消息队列，构建本地应用端的第二DOM树，所述第二DOM树用于构建所述静态页面布局。

5.根据权利要求4所述的方法，其特征在于，所述方法还包括：

当所述第一DOM节点不参与渲染时，根据所述第一DOM节点的子节点的控制逻辑，确定所述第一DOM节点的子节点是否满足逻辑控制条件；

当所述第一DOM节点的子节点满足逻辑控制条件时，将所述第一DOM节点的子节点插入所述模板。

6.根据权利要求1所述的方法，其特征在于，所述将所述模板的每个第二DOM节点进行初始化，得到所述JavaScript端的第一DOM树，包括：

对于所述每个第二DOM节点，当所述第二DOM节点的类型为渲染类型时，建立包括所述第二DOM节点的组件与组件信息的绑定关系；

当所述第二DOM节点的类型为逻辑虚拟类型时，根据所述第二DOM节点的控制逻辑，建立逻辑控制机制；

根据所述每个第二DOM节点、所述绑定关系和所述逻辑控制机制，生成所述第一DOM树。

7.一种DOM渲染网页的装置，其特征在于，所述装置包括：

第一添加模块，被配置为在目标应用对应的模板中增加类型为逻辑虚拟类型的第一DOM节点，所述模板基于传统DOM架构实现，所述逻辑虚拟类型的第一DOM节点用于存储逻辑控制信息；

第二添加模块，被配置为在所述模板的每个第一DOM节点中增加内部属性，所述内部属性用于标识所述第一DOM节点是否参与布局和渲染；

编译模块，被配置为当所述目标应用运行时，为根据所述每个第一DOM节点的类型，实例化所述每个第一DOM节点，得到每个第二DOM节点；根据所述每个第一DOM节点的内部属性，将所述每个第二DOM节点插入所述模板中；将所述模板的每个第二DOM节点进行初始化，得到JavaScript端的第一DOM树，所述第一DOM树包含用于渲染的节点和用于逻辑控制的节点；

渲染模块，被配置为当所述目标应用渲染网页时，根据所述第一DOM树，对所述目标应用的静态页面布局进行渲染。

8.根据权利要求7所述的装置，其特征在于，所述编译模块，还被配置为对于每个第一DOM节点，当所述第一DOM节点的类型为渲染类型时，创建所述渲染类型的第二DOM节点，所述渲染类型的第二DOM为传统DOM架构中的原生节点，且用于参与渲染；当所述第一DOM节点的类型为逻辑虚拟类型时，创建所述逻辑虚拟类型的第二DOM节点，所述逻辑虚拟类型的第二DOM节点用于进行逻辑控制。

9.根据权利要求7所述的装置，其特征在于，所述编译模块，还被配置为对于每个第一DOM节点，根据所述第一DOM节点的第一内部属性，确定所述第一DOM节点是否参与布局；当所述第一DOM节点参与布局时，将所述第一DOM节点对应的第二DOM节点插入到模板中。

10.根据权利要求9所述的装置，其特征在于，所述装置还包括：

第一确定模块，被配置为当所述第一DOM节点参与布局时，根据所述第一DOM节点的第二内部属性，确定所述第一DOM节点是否参与渲染；

第二确定模块，被配置为当所述第一DOM节点参与渲染时，将所述第一DOM节点对应的第二DOM节点的节点标识存储到缓存消息队列中；

构建模块，被配置为根据所述缓存消息队列，构建本地应用端的第二DOM树，所述第二DOM树用于构建所述静态页面布局。

11.根据权利要求10所述的装置，其特征在于，所述装置还包括：

第三确定模块，被配置为当所述第一DOM节点不参与渲染时，根据所述第一DOM节点的子节点的控制逻辑，确定所述第一DOM节点的子节点是否满足逻辑控制条件；

插入模块，被配置为当所述第一DOM节点的子节点满足逻辑控制条件时，将所述第一DOM节点的子节点插入所述模板。

12.根据权利要求7所述的装置，其特征在于，所述编译模块，还被配置为对于所述每个第二DOM节点，当所述第二DOM节点的类型为渲染类型时，建立包括所述第二DOM节点的组件与组件信息的绑定关系；当所述第二DOM节点的类型为逻辑虚拟类型时，根据所述第二DOM节点的控制逻辑，建立逻辑控制机制；根据所述每个第二DOM节点、所述绑定关系和所述逻辑控制机制，生成所述第一DOM树。

13.一种终端，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

在目标应用对应的模板中增加类型为逻辑虚拟类型的第一DOM节点，所述模板基于传统DOM架构实现，所述逻辑虚拟类型的第一DOM节点用于存储逻辑控制信息；

在所述模板的每个第一DOM节点中增加内部属性，所述内部属性用于标识所述第一DOM节点是否参与布局和渲染；

当所述目标应用运行时，根据所述每个第一DOM节点的类型，实例化所述每个第一DOM节点，得到每个第二DOM节点；

根据所述每个第一DOM节点的内部属性，将所述每个第二DOM节点插入所述模板中；

将所述模板的每个第二DOM节点进行初始化，得到JavaScript端的第一DOM树，所述第一DOM树包含用于渲染的节点和用于逻辑控制的节点；

当所述目标应用渲染网页时，根据所述第一DOM树，对所述目标应用的静态页面布局进行渲染。

14.一种存储介质，其特征在于，所述存储介质上存储有指令，所述指令被处理器执行以完成权利要求1-6任一项所述的DOM渲染网页的方法。

Images