CN117234610A - 一种文档对象模型组件的渲染方法、装置、设备及介质 - Google Patents

Abstract

本发明公开了一种文档对象模型组件的渲染方法、装置、设备及介质，涉及页面渲染技术领域。包括：将待渲染的文档对象模型组件转换成虚拟文档对象模型树；在根据虚拟文档对象模型树获取各待渲染的文档对象模型组件在画布上的布局信息后，根据布局信息在画布上绘制文档对象模型组件。该方法中利用DOM树获取各待渲染的DOM组件在画布上的布局信息，然后在画布上结合布局信息绘制各DOM组件，即直接利用画布来绘制文档对象模型组件，充分利用了画布的性能优势，提高了渲染速度；由于不依赖浏览器本身进行渲染，故而，在绘制复杂图形时也不会消耗浏览器大量的性能，提高了用户的体验感。

Description

一种文档对象模型组件的渲染方法、装置、设备及介质

技术领域

本发明涉及页面渲染技术领域，特别是涉及一种文档对象模型组件的渲染方法、装置、设备及介质。

背景技术

在全球广域网(World Wide Web，Web)开发中，传统的文档对象模型(DocumentObject Model，DOM)组件渲染方式主要依赖于浏览器引擎对超文本标记语言(Hyper TextMarkup Language，HTML)、层叠样式表(Cascading Style Sheets，CSS)和JavaScript的解析和渲染。然而，随着网页应用越来越复杂，传统的DOM渲染方式在性能和兼容性上面临挑战。为了提高性能和兼容性，一些新的渲染技术应运而生，例如使用Canvas画布作为渲染载体。

在DOM组件渲染的相关技术中，使用HTML+CSS渲染DOM组件，然后将其作为图像绘制到Canvas画布上。该方法虽然实现了DOM组件在Canvas上的呈现，但是该方法是基于浏览器本身来进行渲染，而对于作为绘图工具的Canvas画布来说，不能充分发挥Canvas画布的渲染能力，即不能充分利用Canvas的性能优势；且若使用该方法绘制复杂的图形时，如3D图、曲线等，会导致HTML元素多，操作复杂，消耗浏览器大量的性能以及导致DOM组件渲染效率下降。

由此可见，提供一种DOM组件的渲染的方法，使得能够充分利用Canvas画布的性能优势，提高DOM组件渲染的效率。

发明内容

本发明的目的是提供一种文档对象模型组件的渲染方法、装置、设备及介质，以解决相关的DOM组件渲染的过程中不能充分利用Canvas画布的性能优势，DOM组件渲染的效率低的技术问题。

为解决上述技术问题，本发明提供一种文档对象模型组件的渲染方法，包括：

获取待渲染的文档对象模型组件；

将所述待渲染的文档对象模型组件转换成虚拟文档对象模型树；

根据所述虚拟文档对象模型树获取各所述待渲染的文档对象模型组件在画布上的布局信息；

根据所述布局信息在所述画布上渲染所述待渲染的文档对象模型组件。

优选地，所述将所述待渲染的文档对象模型组件转换成虚拟文档对象模型树包括：

通过解析器将所述待渲染的文档对象模型组件转换为JavaScript对象；其中，所述JavaScript对象中至少包含各所述待渲染的文档对象模型组件的类型、属性、子节点的信息；

根据所述JavaScript对象创建虚拟文档对象模型节点；

将所有的所述虚拟文档对象模型节点按照层级关系组织成所述虚拟文档对象模型树。

优选地，所述根据所述虚拟文档对象模型树获取各所述待渲染的文档对象模型组件在画布上的布局信息包括：

获取所述虚拟文档对象模型树的各所述虚拟文档对象模型节点的初始位置和尺寸；

根据所述初始位置、尺寸、所述虚拟文档对象模型节点的样式属性确定各所述虚拟文档对象模型节点相对于父节点的位置和尺寸，以作为各所述虚拟文档对象模型节点的相对布局；

遍历所述虚拟文档对象模型树，将各所述虚拟文档对象模型节点的相对布局转换为各所述虚拟文档对象模型节点在所述画布上的绝对位置和尺寸，以确定各所述待渲染的文档对象模型组件在所述画布上的所述布局信息。

优选地，所述根据所述虚拟文档对象模型树获取各所述待渲染的文档对象模型组件在画布上的布局信息包括：

从所述虚拟文档对象模型树的根节点开始，按照深度优先顺序遍历所述虚拟文档对象模型树；

根据所述虚拟文档对象模型树获取各所述待渲染的文档对象模型组件在所述画布上的所述布局信息。

优选地，所述根据所述布局信息在所述画布上渲染所述待渲染的文档对象模型组件包括：

根据所述布局信息生成画布绘制指令；

根据所述画布绘制指令将各所述待渲染的虚拟文档对象模型组件渲染在所述画布上。

优选地，在所述根据所述布局信息在所述画布上渲染所述待渲染的文档对象模型组件之后，还包括：

根据预先在所述画布上设置的事件监听器监控用户在所述画布上的操作事件；

根据当前操作事件的位置与各所述虚拟文档对象模型节点在所述画布上的绝对位置和尺寸确定所述当前操作事件的操作位置所对应的目标虚拟文档对象模型节点；

将所述当前操作事件传递至所述目标虚拟文档对象模型节点，并通过所述目标虚拟文档对象模型节点上的事件处理函数响应所述当前操作事件。

优选地，在所述通过所述目标虚拟文档对象模型节点上的事件处理函数响应所述当前操作事件之后，还包括：

获取各所述待渲染的文档对象模型组件在画布上的新的布局信息；

根据所述新的布局信息更新所述虚拟文档对象模型树以及更新所述待渲染的文档对象模型组件。

为了解决上述技术问题，本发明还提供一种文档对象模型组件的渲染装置，包括：

第一获取模块，用于获取待渲染的文档对象模型组件；

转换模块，用于将所述待渲染的文档对象模型组件转换成虚拟文档对象模型树；

第二获取模块，用于根据所述虚拟文档对象模型树获取各所述待渲染的文档对象模型组件在画布上的布局信息；

渲染模块，用于根据所述布局信息在所述画布上渲染所述待渲染的文档对象模型组件。

为了解决上述技术问题，本发明还提供一种文档对象模型组件的渲染设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现上述的文档对象模型组件的渲染方法的步骤。

为了解决上述技术问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述的文档对象模型组件的渲染方法的步骤。

本发明所提供的文档对象模型组件的渲染方法，包括：将待渲染的文档对象模型组件转换成虚拟文档对象模型树；在根据虚拟文档对象模型树获取各待渲染的文档对象模型组件在画布上的布局信息后，根据布局信息在画布上绘制文档对象模型组件。相比于之前的使用HTML+CSS渲染DOM组件，然后将其作为图像绘制到Canvas画布上的方式，本发明提供的方法中利用DOM树获取各待渲染的DOM组件在画布上的布局信息，然后在画布上结合布局信息绘制各DOM组件，即直接利用画布来绘制文档对象模型组件，充分利用了画布的性能优势，提高了渲染速度；由于不依赖浏览器本身进行渲染，故而，在绘制复杂图形时也不会消耗浏览器大量的性能，提高了用户使用浏览器时的体验感。

此外，本发明还提供一种文档对象模型组件的渲染装置、文档对象模型组件的渲染设备以及计算机可读存储介质，与上述提到的文档对象模型组件的渲染方法具有相同或相对应的技术特征，效果同上。

附图说明

为了更清楚地说明本发明实施例，下面将对实施例中所需要使用的附图做简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种基于Canvas画布绘制DOM组件的结构图；

图2为本发明实施例提供的一种文档对象模型组件的渲染方法的流程图；

图3为本发明实施例提供的一种基于Canvas画布绘制DOM组件的方法流程图；

图4为本发明的一实施例提供的文档对象模型组件的渲染装置的结构图；

图5为本发明另一实施例提供的文档对象模型组件的渲染设备的结构图；

图6为本发明实施例提供的一种基于虚拟文档对象模型树在画布上绘制选择下拉框组件的过程的示意图；

图7为本发明实施例提供的一种在基础画布图层上绘制下拉框组件的示意图；

图8为本发明实施例提供的一种点击事件触发后弹出文档对象模型组件层的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下，所获得的所有其他实施例，都属于本发明保护范围。

本发明的核心是提供一种文档对象模型组件的渲染方法、装置、设备及介质，以解决相关的DOM组件渲染的过程中不能充分利用Canvas画布的性能优势，DOM组件渲染的效率低的技术问题。

在Web开发中，传统的DOM组件渲染方式主要依赖于浏览器引擎对HTML、CSS和JavaScript的解析和渲染。然而，随着网页应用越来越复杂，传统的DOM渲染方式在性能和兼容性上面临挑战。为了提高性能和兼容性，一些新的渲染技术应运而生，例如使用Canvas作为渲染载体。

Canvas是一种基于位图的Web绘图技术，允许开发者通过JavaScript在网页上绘制图形。虽然Canvas具有较高的性能优势，但是它与DOM的交互有限，不适合用于构建复杂的Web应用。

在相关的COM组件渲染的技术中是使用HTML+CSS渲染DOM组件，然后将其作为图像绘制到Canvas画布上。这种方法虽然实现了DOM组件在Canvas画布上的呈现，但是仍然不能充分利用Canvas的性能优势，且操作复杂。故而，本发明实施例提供一种基于虚拟DOM树的Canvas渲染策略，如图所示，图1为本发明实施例提供的一种基于Canvas画布绘制DOM组件的结构图，该结构中包含文档对象模型组件1、虚拟文档对象模型树2、画布3，将文档对象模型组件1转换成虚拟文档对象模型树2，基于虚拟文档对象模型树2将文档对象模型组件1在画布3上渲染。本发明提供的方法实现了DOM组件在Canvas上的高效绘制，充分利用了Canvas的性能优势。

为了使本技术领域的人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。图2为本发明实施例提供的一种文档对象模型组件的渲染方法的流程图，如图2所示，该方法包括：

S10：获取待渲染的文档对象模型组件；

S11：将待渲染的文档对象模型组件转换成虚拟文档对象模型树；

S12：根据虚拟文档对象模型树获取各待渲染的文档对象模型组件在画布上的布局信息；

S13：根据布局信息在画布上渲染待渲染的文档对象模型组件。

对于待渲染的文档对象模型组件(即待渲染的DOM组件)不作限定，根据实际情况确定。开发者使用特定的API创建DOM组件，并通过解析器将其转换为虚拟文档对象模型树(即虚拟DOM树)，每个节点包含组件的类型、属性和子节点等信息。

具体地，将待渲染的文档对象模型组件转换成虚拟文档对象模型树包括：

通过解析器将待渲染的文档对象模型组件转换为JavaScript对象；其中，JavaScript对象中至少包含各待渲染的文档对象模型组件的类型、属性、子节点的信息；

根据JavaScript对象创建虚拟文档对象模型节点；

将所有的虚拟文档对象模型节点按照层级关系组织成虚拟文档对象模型树。

下面再次对生成虚拟DOM树的方法进行说明：

(1)解析输入的DOM组件：通过解析器将开发者使用特定API创建的DOM组件转换为JavaScript对象，包含组件的类型、属性和子节点等信息。

(2)构建虚拟DOM节点：根据解析得到的JavaScript对象，创建虚拟DOM节点。每个节点包括：类型(如div、span、img、input等)、属性(如style、src、type等)以及子节点列表。

(3)生成虚拟DOM树：递归处理子节点，将所有虚拟DOM节点按照层级关系组织成一棵虚拟DOM树。

为了将待渲染的DOM组件渲染在画布上，需要明确各待渲染的DOM组件在画布上的布局信息。待渲染的DOM组件在画布上的布局信息包括：各待渲染的DOM组件在画布上的位置信息、尺寸等。在得到布局信息后，通过布局信息可以在画布上绘制待渲染的DOM组件。以待渲染的DOM组件为矩形框为例，为了将矩形框渲染在画布上，在确定出矩形框在画布上的布局时的起始点(左上角)的位置坐标(x，y)、矩形的宽度和高度后，调用Canvas原生APIfillRect便可以根据起始点的位置、宽度和高度将待渲染的矩形框绘制在画布上。

本发明实施例所提供的文档对象模型组件的渲染方法，包括：将待渲染的文档对象模型组件转换成虚拟文档对象模型树；在根据虚拟文档对象模型树获取各待渲染的文档对象模型组件在画布上的布局信息后，根据布局信息在画布上绘制文档对象模型组件。相比于之前的使用HTML+CSS渲染DOM组件，然后将其作为图像绘制到Canvas画布上的方式，本发明实施例提供的方法中利用DOM树获取各待渲染的DOM组件在画布上的布局信息，然后在画布上结合布局信息绘制各DOM组件，即直接利用画布来绘制文档对象模型组件，充分利用了画布的性能优势，提高了渲染速度；由于不依赖浏览器本身进行渲染，故而，在绘制复杂图形时也不会消耗浏览器大量的性能，提高了用户使用浏览器时的体验感。

为了获取到各待渲染的DOM组件在画布上的布局信息，优选的实施方式是，根据虚拟文档对象模型树获取各待渲染的文档对象模型组件在画布上的布局信息包括：

获取虚拟文档对象模型树的各虚拟文档对象模型节点的初始位置和尺寸；

根据初始位置、尺寸、虚拟文档对象模型节点的样式属性确定各虚拟文档对象模型节点相对于父节点的位置和尺寸，以作为各虚拟文档对象模型节点的相对布局；

遍历虚拟文档对象模型树，将各虚拟文档对象模型节点的相对布局转换为各虚拟文档对象模型节点在画布上的绝对位置和尺寸，以确定各待渲染的文档对象模型组件在画布上的布局信息。

具体地，获取布局信息具体包括以下步骤：

(1)始化布局参数：为虚拟DOM树的每个节点设置初始位置和尺寸。

(2)计算相对布局：根据虚拟DOM节点的样式属性(如position、display等)，计算节点相对于父节点的位置和尺寸。

(3)计算绝对布局：通过遍历虚拟DOM树，将每个节点的相对布局转换为Canvas画布上的绝对位置和尺寸。

(4)处理特殊布局：针对一些特殊的布局属性(如float、flex等)，进行额外的计算和调整。

本实施例提供的获取各待渲染的DOM组件在画布上的布局信息时，根据DOM树中确定各子节点相对于父节点的位置信息和尺寸，即相对布局。在得到相对布局后，根据父节点在画布上的位置信息进而确定出各子节点在画布上的位置信息。本实施例中将各节点在画布上的位置称为绝对位置。如父节点在画布上的绝对位置坐标为(10，10)，子节点的高度为10，则子节点在画布上的绝对位置坐标为(10，20)。可见，该方法通过计算的方式实现了较准确地获取各待渲染的DOM组件在画布上的布局信息，适应了画布的特点，实现文档对象模型组件在画布上的位置和尺寸调整，使得文档对象模型组件在画布上的布局更加合理和高效。

在实施中，为了保证渲染的组件的完整性，根据虚拟文档对象模型树获取各待渲染的文档对象模型组件在画布上的布局信息包括：

从虚拟文档对象模型树的根节点开始，按照深度优先顺序遍历虚拟文档对象模型树；

根据虚拟文档对象模型树获取各待渲染的文档对象模型组件在画布上的布局信息。

在获取到布局信息后，有的布局信息是可以作为在画布上绘制时的绘制参数(如位置、尺寸)，有的布局信息是不能作为在画布上绘制时的绘制参数，故而，在实施中，优选的实施方式是，根据布局信息在画布上渲染待渲染的文档对象模型组件包括：

根据布局信息生成画布绘制指令；

根据画布绘制指令将各待渲染的虚拟文档对象模型组件渲染在画布上。

本实施例提供的方法中，在创建Canvas绘制指令时，根据虚拟DOM节点的类型和属性，生成对应的Canvas绘制指令(如fillRect、drawImage等)；在执行Canvas绘制指令时，按照遍历顺序，依次执行生成的Canvas绘制指令，将虚拟DOM节点绘制到Canvas画布上。该方法中，通过画布绘制指令，能够尽可能地保证在画布上完成待渲染的DOM组件的绘制。

为了提高用户使用画布时的体验感，在根据布局信息在画布上渲染待渲染的文档对象模型组件之后，还包括：

根据预先在画布上设置的事件监听器监控用户在画布上的操作事件；

根据当前操作事件的位置与各虚拟文档对象模型节点在画布上的绝对位置和尺寸确定当前操作事件的操作位置所对应的目标虚拟文档对象模型节点；

将当前操作事件传递至目标虚拟文档对象模型节点，并通过目标虚拟文档对象模型节点上的事件处理函数响应当前操作事件。

添加Canvas监听事件具体包括如下过程：

(1)注册事件监听器：为Canvas画布元素添加事件监听器，如drag、drop、click、mousemove、mouseover等。

(2)检测事件目标：当事件触发时，通过计算事件坐标与虚拟DOM节点的位置和尺寸，判断事件目标是哪个虚拟DOM节点。

(3)分发事件：将事件传递给对应的虚拟DOM节点，并触发节点的事件处理函数。

本实施例提供的方法中，通过为Canvas画布添加事件监听器，实现DOM组件在Canvas画布上的交互操作。

事件触发后，文档对象模型组件的布局信息会发生变化，在实施中，为了可以再次基于DOM树得到布局信息变化所对应的渲染效果，在通过目标虚拟文档对象模型节点上的事件处理函数响应当前操作事件之后，还包括：

获取各待渲染的文档对象模型组件在画布上的新的布局信息；

根据新的布局信息更新虚拟文档对象模型树以及更新待渲染的文档对象模型组件。

图3为本发明实施例提供的一种基于Canvas画布绘制DOM组件的方法流程图，如图3所示，该方法包括：

S14：获取文档对象模型组件；

S15：生成虚拟文档对象模型树；

S16：确定布局计算方法；

S17：获取文档对象模型组件在画布上布局信息；

S18：设定事件处理机制。

如图3所示，在获取到文档对象模型组件后，根据文档对象模型组件生成虚拟文档对象模型树；在得到虚拟文档对象模型组件后，确定布局计算方法并获取各文档对象模型组件在画布上的布局信息；然后根据布局信息在画布上绘制文档对象模型组件，在绘制时，通过事件处理机制监听画布上的操作，获取新的布局信息；根据新的布局信息更新虚拟文档对象模型树以及更新文档对象模型组件。

本发明实施例提供的方法中，基于虚拟文档对象模型树的Canvas画布渲染策略，实现了在Canvas画布上的高效绘制，充分发挥了Canvas画布的性能优势；引入布局计算方法，以适应Canvas画布的特点，实现文档对象模型组件在Canvas画布上的位置和尺寸调整，使得文档对象模型组件在Canvas画布上的布局更加合理和高效；提出了事件处理机制，实现了文档对象模型组件在Canvas画布上的交互操作，提高了用户使用Canvas画布时的体验感。

在上述实施例中，对于文档对象模型组件的渲染方法进行了详细描述，本发明还提供文档对象模型组件的渲染装置、文档对象模型组件的渲染设备对应的实施例。需要说明的是，本发明从两个角度对装置部分的实施例进行描述，一种是基于功能模块的角度，另一种是基于硬件的角度。

图4为本发明的一实施例提供的文档对象模型组件的渲染装置的结构图。本实施例基于功能模块的角度，包括：

第一获取模块10，用于获取待渲染的文档对象模型组件；

转换模块11，用于将待渲染的文档对象模型组件转换成虚拟文档对象模型树；

第二获取模块12，用于根据虚拟文档对象模型树获取各待渲染的文档对象模型组件在画布上的布局信息；

渲染模块13，用于根据布局信息在画布上渲染待渲染的文档对象模型组件。

由于装置部分的实施例与方法部分的实施例相互对应，因此装置部分的实施例请参见方法部分的实施例的描述，这里暂不赘述。并且具有与文档对象模型组件的渲染方法相同的有益效果。

图5为本发明另一实施例提供的文档对象模型组件的渲染设备的结构图。本实施例基于硬件角度，如图5所示，文档对象模型组件的渲染设备包括：

存储器20，用于存储计算机程序；

处理器21，用于执行计算机程序时实现如上述实施例中所提到的文档对象模型组件的渲染方法的步骤。

其中，处理器21可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器21可以采用数字信号处理器(Digital Signal Processor，DSP)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable LogicArray，PLA)中的至少一种硬件形式来实现。处理器21也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称中央处理器(CentralProcessing Unit，CPU)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器21可以集成有图形处理器(Graphics Processing Unit，GPU)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器21还可以包括人工智能(Artificial Intelligence，AI)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器20可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器20还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。本实施例中，存储器20至少用于存储以下计算机程序201，其中，该计算机程序被处理器21加载并执行之后，能够实现前述任一实施例公开的文档对象模型组件的渲染方法的相关步骤。另外，存储器20所存储的资源还可以包括操作系统202和数据203等，存储方式可以是短暂存储或者永久存储。其中，操作系统202可以包括Windows、Unix、Linux等。数据203可以包括但不限于上述所提到的文档对象模型组件的渲染方法所涉及到的数据等。

在一些实施例中，文档对象模型组件的渲染设备还可包括有显示屏22、输入输出接口23、通信接口24、电源25以及通信总线26。

本领域技术人员可以理解，图5中示出的结构并不构成对文档对象模型组件的渲染设备的限定，可以包括比图示更多或更少的组件。

本发明实施例提供的文档对象模型组件的渲染设备，包括存储器和处理器，处理器在执行存储器存储的程序时，能够实现如下方法：文档对象模型组件的渲染方法，效果同上。

本发明还提供一种计算机可读存储介质对应的实施例。计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现如上述方法实施例中记载的步骤。

可以理解的是，如果上述实施例中的方法以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

本发明提供的计算机可读存储介质包括上述提到的文档对象模型组件的渲染方法，效果同上。

为了使本技术领域的人员更好地理解本发明方案，以绘制一个选择下拉框组件为例，说明本发明实施例提供的基于虚拟文档对象模型树在画布上绘制选择下拉框组件的过程。下面结合附图6、附图7、附图8和具体实施方式对本发明作进一步的详细说明。图6为本发明实施例提供的一种基于虚拟文档对象模型树在画布上绘制选择下拉框组件的过程的示意图，如图6所示，该过程包括：

S19：将选择下拉框组件转换为虚拟文档对象模型树；

S20：根据虚拟文档对象模型树计算下拉框组件在画布上的布局信息；

S21：调用画布原生应用程序接口绘制下拉框组件；

S22：处理交互和数据更新。

步骤S19具体包括：将HTML中的选择下拉框组件转换为虚拟DOM树。一个简单的方法是将HTML标签解析为JSON对象，JSON对象中包含组件节点类型type(select、input、img等DOM原生节点类型)，组件属性props(id、name、style等)，以及子节点，子节点中包含下级节点，节点可嵌套循环。

步骤S20具体包括：通过遍历虚拟文档对象模型树并为每个元素计算其位置和尺寸来实现。在这个例子中，将简化布局计算并假设Select组件的尺寸和位置是固定的。指定布局配置为layout，包含x，y，width，height等参数存储每个组件的位置数据。

步骤S21具体包括：通过布局信息可以在Canvas画布上绘制组件。调用Canvas原生API fillRect绘制出组件框的区域，并通过lineTo绘制出线条等信息，根据情况做细节调整或绘制更加复杂的图形。图7为本发明实施例提供的一种在基础画布图层上绘制下拉框组件的示意图。

步骤S22具体包括：添加事件监听器来监听用户操作，例如点击Select组件。当发生交互时，可以更新虚拟文档对象模型树的状态，并重新绘制Canvas画布。此时，使用事件通知来实现数据更新。图8为本发明实施例提供的一种点击事件触发后弹出文档对象模型组件层的示意图。如图8所示，包含选项1、选项2、选项3共3层组件层。

a)检查点击位置是否在选择下拉框组件内，决定是否响应组件点击事件。

b)更新虚拟文档对象模型树的selectedIndex属性：从点击事件返回的数据中获取到当前的clientX，clientY坐标信息，再结合虚拟组件布局信息x，y，width，height计算：virtualDOM.selectedIndex＝(virtualDOM.selectedIndex+1)％virtualDOM.children.length；其中，virtualDOM.selectedIndex表示虚拟文档对象模型选项索引值，virtualDOM.children.length表示子节点的个数，用长度表示的。如图8中，选项1对应的虚拟文档对象模型选项索引值为0，选项2对应的虚拟文档对象模型选项索引值为1，选项3对应的虚拟文档对象模型选项索引值为2，对于virtualDOM.children.length的值根据具体的虚拟文档对象数的结构确定。

c)重新绘制Canvas画布：根据选中的变化值重新绘制界面显示内容。

d)触发自定义事件以通知数据更新：定义selectChange事件后通过canvas.dispatchEvent派发，通过canvas.addEventListener监听并处理数据变化。

本发明实施例提供的方法中，基于虚拟文档对象模型树的Canvas画布渲染策略，将虚拟文档对象组件转换为特定的数据结构，实现了在Canvas画布上的高效绘制，充分发挥了Canvas画布的性能优势；引入布局计算方法，以适应Canvas画布的特点，实现文档对象模型组件在Canvas画布上的位置和尺寸调整，使得文档对象模型组件在Canvas画布上的布局更加合理和高效；提出了事件处理机制，实现了文档对象模型组件在Canvas画布上的交互操作，提高了用户使用Canvas画布时的体验感。

以上对本发明所提供的一种文档对象模型组件的渲染方法、装置、设备及介质进行了详细介绍。说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。

还需要说明的是，在本说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

Claims (10)

1.一种文档对象模型组件的渲染方法，其特征在于，包括：

获取待渲染的文档对象模型组件；

将所述待渲染的文档对象模型组件转换成虚拟文档对象模型树；

根据所述虚拟文档对象模型树获取各所述待渲染的文档对象模型组件在画布上的布局信息；

根据所述布局信息在所述画布上渲染所述待渲染的文档对象模型组件。

2.根据权利要求1所述的文档对象模型组件的渲染方法，其特征在于，所述将所述待渲染的文档对象模型组件转换成虚拟文档对象模型树包括：

通过解析器将所述待渲染的文档对象模型组件转换为JavaScript对象；其中，所述JavaScript对象中至少包含各所述待渲染的文档对象模型组件的类型、属性、子节点的信息；

根据所述JavaScript对象创建虚拟文档对象模型节点；

将所有的所述虚拟文档对象模型节点按照层级关系组织成所述虚拟文档对象模型树。

3.根据权利要求2所述的文档对象模型组件的渲染方法，其特征在于，所述根据所述虚拟文档对象模型树获取各所述待渲染的文档对象模型组件在画布上的布局信息包括：

获取所述虚拟文档对象模型树的各所述虚拟文档对象模型节点的初始位置和尺寸；

根据所述初始位置、尺寸、所述虚拟文档对象模型节点的样式属性确定各所述虚拟文档对象模型节点相对于父节点的位置和尺寸，以作为各所述虚拟文档对象模型节点的相对布局；

遍历所述虚拟文档对象模型树，将各所述虚拟文档对象模型节点的相对布局转换为各所述虚拟文档对象模型节点在所述画布上的绝对位置和尺寸，以确定各所述待渲染的文档对象模型组件在所述画布上的所述布局信息。

4.根据权利要求1或2所述的文档对象模型组件的渲染方法，其特征在于，所述根据所述虚拟文档对象模型树获取各所述待渲染的文档对象模型组件在画布上的布局信息包括：

从所述虚拟文档对象模型树的根节点开始，按照深度优先顺序遍历所述虚拟文档对象模型树；

根据所述虚拟文档对象模型树获取各所述待渲染的文档对象模型组件在所述画布上的所述布局信息。

5.根据权利要求4所述的文档对象模型组件的渲染方法，其特征在于，所述根据所述布局信息在所述画布上渲染所述待渲染的文档对象模型组件包括：

根据所述布局信息生成画布绘制指令；

根据所述画布绘制指令将各所述待渲染的虚拟文档对象模型组件渲染在所述画布上。

6.根据权利要求3所述的文档对象模型组件的渲染方法，其特征在于，在所述根据所述布局信息在所述画布上渲染所述待渲染的文档对象模型组件之后，还包括：

根据预先在所述画布上设置的事件监听器监控用户在所述画布上的操作事件；

根据当前操作事件的位置与各所述虚拟文档对象模型节点在所述画布上的绝对位置和尺寸确定所述当前操作事件的操作位置所对应的目标虚拟文档对象模型节点；

将所述当前操作事件传递至所述目标虚拟文档对象模型节点，并通过所述目标虚拟文档对象模型节点上的事件处理函数响应所述当前操作事件。

7.根据权利要求6所述的文档对象模型组件的渲染方法，其特征在于，在所述通过所述目标虚拟文档对象模型节点上的事件处理函数响应所述当前操作事件之后，还包括：

获取各所述待渲染的文档对象模型组件在画布上的新的布局信息；

根据所述新的布局信息更新所述虚拟文档对象模型树以及更新所述待渲染的文档对象模型组件。

8.一种文档对象模型组件的渲染装置，其特征在于，包括：

第一获取模块，用于获取待渲染的文档对象模型组件；

转换模块，用于将所述待渲染的文档对象模型组件转换成虚拟文档对象模型树；

第二获取模块，用于根据所述虚拟文档对象模型树获取各所述待渲染的文档对象模型组件在画布上的布局信息；

渲染模块，用于根据所述布局信息在所述画布上渲染所述待渲染的文档对象模型组件。

9.一种文档对象模型组件的渲染设备，其特征在于，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如权利要求1至7任一项所述的文档对象模型组件的渲染方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的文档对象模型组件的渲染方法的步骤。