CN117891486A - 页面渲染方法、装置、设备及存储介质 - Google Patents

Abstract

本申请公开了一种页面渲染方法、装置、设备及存储介质。该页面渲染方法包括从目标代码中确定发生更新的差异代码片段所对应的第一目标组件；根据第一目标组件对应的代码对原语法树进行增量更新，得到更新后的语法树，原语法树为目标代码更新前所对应的语法树；根据更新后的语法树对原领域特定语言树进行增量更新，得到更新后的领域特定语言树，原领域特定语言树为目标代码更新前所对应的领域特定语言树；基于更新后的领域特定语言树进行页面渲染处理，得到与目标代码对应的可视化界面。根据本申请实施例，可以在节约计算资源的同时，解决代码可视化界面的加载延迟及卡顿问题。

Description

页面渲染方法、装置、设备及存储介质

技术领域

本申请属于代码开发技术领域，尤其涉及一种页面渲染方法、装置、设备及存储介质。

背景技术

前端低代码平台作为一种快速构建页面应用的解决方案，可以帮助前端研发人员快速创建前端工程，降低页面UI(user interface，用户界面)开发的成本，提高研发效率，在源码的一次性生成方面得到了较好的应用效果。随着业务的迭代更新，研发人员往往需要在低代码平台生成的源码基础上进行二次开发。

目前，业界低代码平台没有支持代码可视化的逆向工程产品，结合技术原理来看，若要实现代码可视化，需要针对代码进行全量解析渲染处理，也即，研发人员每次改动代码，都会重新解析渲染所有代码，从而导致在代码改动过程中大量数据重复解析渲染，不但浪费计算资源，而且极易引起代码可视化界面的加载延迟及卡顿问题。

发明内容

本申请实施例提供一种页面渲染方法、装置、设备及存储介质，能够在节约计算资源的同时，解决代码可视化界面的加载延迟及卡顿问题。

第一方面，本申请实施例提供一种页面渲染方法，该方法包括：

从目标代码中确定发生更新的差异代码片段所对应的第一目标组件；

根据所述第一目标组件对应的代码对原语法树进行增量更新，得到更新后的语法树，所述原语法树为所述目标代码更新前所对应的语法树；

根据所述更新后的语法树对原领域特定语言树进行增量更新，得到更新后的领域特定语言树，所述原领域特定语言树为所述目标代码更新前所对应的领域特定语言树；

基于所述更新后的领域特定语言树进行页面渲染处理，得到与所述目标代码对应的可视化界面。

第二方面，本申请实施例提供了一种页面渲染装置，该装置包括：

组件确定模块，用于从目标代码中确定发生更新的差异代码片段所对应的第一目标组件；

第一更新模块，用于根据所述第一目标组件对应的代码对原语法树进行增量更新，得到更新后的语法树，所述原语法树为所述目标代码更新前所对应的语法树；

第二更新模块，用于根据所述更新后的语法树对原领域特定语言树进行增量更新，得到更新后的领域特定语言树，所述原领域特定语言树为所述目标代码更新前所对应的领域特定语言树；

渲染处理模块，用于基于所述更新后的领域特定语言树进行页面渲染处理，得到与所述目标代码对应的可视化界面。

第三方面，本申请实施例提供了一种电子设备，该电子设备包括：处理器以及存储有计算机程序指令的存储器；

处理器执行所述计算机程序指令时实现如第一方面的任一项实施例中所述的页面渲染方法的步骤。

第四方面，本申请实施例提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序指令，计算机程序指令被处理器执行时实现如第一方面的任一项实施例中所述的页面渲染方法的步骤。

第五方面，本申请实施例提供了一种计算机程序产品，计算机程序产品中的指令由电子设备的处理器执行时，使得所述电子设备执行如第一方面的任一项实施例中所述的页面渲染方法的步骤。

本申请实施例中的页面渲染方法、装置、设备及存储介质，通过根据目标代码中发生更新的差异代码片段所对应的第一目标组件的组件级代码，对原语法树进行增量更新，并根据该更新后的语法树对原领域特定语言树进行增量更新，基于更新后的领域特定语言树进行页面渲染处理，得到目标代码所对应的可视化界面。这样，由于本申请实施例在对目标代码进行更新的过程中，只是对发生更新的差异代码片段所对应的组件级代码重新进行解析，也即对原语法树和原领域特定语言树进行增量更新，而非对整个目标代码重新进行解析，也即并非重新生成语法树和领域特定语言树，因此可以节约计算资源。同时，由于对原语法树和原领域特定语言树进行增量更新所需的时间，比重新生成语法树和领域特定语言树所需的时间要少很多，因此利用该最小化处理策略可提高代码改动与代码可视化界面之间更新过程的同步性，从而可有效解决代码可视化界面的加载延迟及卡顿问题。

附图说明

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

图1是本申请提供的一种全量解析渲染方式的流程示意图；

图2是本申请一个实施例提供的页面渲染方法的流程示意图；

图3是本申请提供的一种代码扩展方式的示意图；

图4是本申请提供的一种AST增量更新过程的示意图；

图5a是本申请提供的一种属性级AST子树的示意图；

图5b是本申请提供的一种组件级AST子树的示意图；

图6是本申请提供的一种DSL树增量更新过程的示意图；

图7a是本申请提供的渲染队列合并前的示意图；

图7b是本申请提供的渲染队列合并后的示意图；

图8是本申请一个实施例提供的页面渲染装置的结构示意图；

图9是本申请一个实施例提供的电子设备的结构示意图。

具体实施方式

下面将详细描述本申请的各个方面的特征和示例性实施例，为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及具体实施例，对本申请进行进一步详细描述。应理解，此处所描述的具体实施例仅意在解释本申请，而不是限定本申请。对于本领域技术人员来说，本申请可以在不需要这些具体细节中的一些细节的情况下实施。下面对实施例的描述仅仅是为了通过示出本申请的示例来提供对本申请更好的理解。

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

目前，业界低代码平台没有支持源码可视化的逆向工程产品，结合技术原理来看，源码的可视化可分为页面代码解析、低代码平台DSL(Domain-specific Language，领域特定语言)树生成和渲染可视化界面三个阶段。

例如，如图1所示，若需要在低代码平台中生成代码的可视化界面，则在将代码转化为AST(Abstract Syntax Tree，抽象语法树)的过程中需要对代码进行全量解析处理，而在DSL树的创建过程中需要进行AST的完整遍历和DSL树的全量更新，从而造成平台计算资源的浪费。另外，由于研发人员在改动代码的过程中会导致大量数据重复解析，因此极易引起代码可视化界面的加载延迟及平台卡顿的问题。

为了解决现有技术问题，本申请实施例提供了一种页面渲染方法、装置、设备及存储介质。该页面渲染方法可以应用于二次代码开发过程中代码可视化渲染场景，下面首先对本申请实施例所提供的页面渲染方法进行介绍。

图2是本申请一个实施例提供的页面渲染方法的流程示意图。该页面渲染方法可以由低代码平台等电子设备执行。

如图2所示，该页面渲染方法具体可以包括如下步骤：

S210、从目标代码中确定发生更新的差异代码片段所对应的第一目标组件；

S220、根据第一目标组件对应的代码对原语法树进行增量更新，得到更新后的语法树，原语法树为目标代码更新前所对应的语法树；

S230、根据更新后的语法树对原领域特定语言树进行增量更新，得到更新后的领域特定语言树，原领域特定语言树为目标代码更新前所对应的领域特定语言树；

S240、基于更新后的领域特定语言树进行页面渲染处理，得到与目标代码对应的可视化界面。

由此，通过根据目标代码中发生更新的差异代码片段所对应的第一目标组件的组件级代码，对原语法树进行增量更新，并根据该更新后的语法树对原领域特定语言树进行增量更新，基于更新后的领域特定语言树进行页面渲染处理，得到目标代码所对应的可视化界面。这样，由于本申请实施例在对目标代码进行更新的过程中，只是对发生更新的差异代码片段所对应的组件级代码重新进行解析，也即对原语法树和原领域特定语言树进行增量更新，而非对整个目标代码重新进行解析，也即并非重新生成语法树和领域特定语言树，因此可以节约计算资源。同时，由于对原语法树和原领域特定语言树进行增量更新所需的时间，比重新生成语法树和领域特定语言树所需的时间要少很多，因此利用该最小化处理策略可提高代码改动与代码可视化界面之间更新过程的同步性，从而可有效解决代码可视化界面的加载延迟及卡顿问题。

下面介绍上述各个步骤的具体实现方式。

在一些实施方式中，在S210中，目标代码可以是低代码平台中进行二次开发的代码。差异代码片段可以是目标代码中研发人员修改过的代码片段，也即发生更新的代码片段。第一目标组件可以是差异代码片段所属的组件。本申请实施例中所涉及的组件例如可以是按钮(button)、输入框(text)、标签(label)等组件。

示例性地，当研发人员在低代码平台上对目标代码进行二次开发时，目标代码会随着研发人员的改动而发生更新，此时，可从中确定发生更新的差异代码片段所对应的第一目标组件，以便根据该第一目标组件对应的组件级代码，对原语法树和原领域特定语言树进行更新。

基于此，在一些实施方式中，上述S210具体可以包括：

从目标代码中提取发生更新的差异代码片段；

在差异代码片段不是组件级的代码片段的情况下，将差异代码片段扩展为组件代码片段，确定得到与组件代码片段对应的第一目标组件。

示例性地，可将修改前后的目标代码进行比对，提取其中代码差异部分，也即差异代码片段，进而判断提取的差异代码片段是否达到组件级别，也即差异代码片段是否是组件级的代码片段。由于非组件级的代码片段无法在语法树中进行定位，也就无法对语法树进行增量更新，因此，可在差异代码片段不是组件级的代码片段时，将该差异代码片段扩展成一个完整的组件代码片段。

例如，如图3所示，若研发人员只修改了组件的一个属性“attr1”的值，由于语法树中并未对属性进行唯一标识，且很多组件都具有相同的属性，因此，仅根据更新后的属性无法在语法树中实现定位以及增量更新，此时可将该发生更新的属性级代码片段，扩展成一个完整的组件级代码片段，利用组件的唯一标识在语法树中实现组件级定位，以及组件级增量更新。

基于此，在一些实施方式中，上述将差异代码片段扩展为组件代码片段，具体可以包括：

在目标代码中，由差异代码片段向前查询距离最近的组件代码起始标识；

在目标代码中，由差异代码片段向后查询距离最近的组件代码结束标识；

从目标代码中获取从组件代码起始标识至组件代码结束标识之间的代码片段，得到与差异代码片段对应的组件代码片段。

这里，组件代码起始标识可以是用于标记一个组件的代码开始的标识，组件代码结束标识可以是用于标记一个组件的代码结束的标识。针对不同类型的组件，其组件代码起始标识和组件代码结束标识可以不同。

本申请实施例中可包括类型一和类型二的组件，其中，类型一的组件为没有其他组件引用的组件，也即在语法树中不存在组件级子节点的组件；类型二的组件为有其他组件引用的组件，也即在AST中存在组件级子节点的组件。

例如，对于类型一的组件，其对应的组件代码起始标识可以为“<变量名”，组件代码结束标识可以为“/>”；对于类型二的组件，其对应的组件代码起始标识可以为“<变量名”，组件代码结束标识可以为“</变量名>”。

基于此，若研发人员修改的是类型一的组件中的某个属性，则可在目标代码中向前查找组件代码起始标识“<变量名”，并向后查找组件代码结束标识“/>”，进而截取目标代码中“<变量名”与“/>”之间的代码，即为差异代码片段对应的组件代码片段。若研发人员修改的是类型二的组件中的某个属性，则可在目标代码中向前查找组件代码起始标识“<变量名”，并向后查找组件代码结束标识“</变量名>”，进而截取目标代码中“<变量名”与“</变量名>”之间的代码，即为差异代码片段对应的组件代码片段。如此，对于类型一和类型二的组件，截取得到的组件代码片段例如可以是如下表1所示。

表1、组件代码片段样例

在一些实施方式中，在S220中，在确定发生代码更新的第一目标组件后，可根据目标代码中与该第一目标组件对应的代码，对原语法树进行增量更新。其中，原语法树可以是目标代码在更新前所对应的语法树，该语法树例如可以是AST。

另外，增量更新可以是指在进行更新操作时，只更新需要改变的地方，不需要更新或已经更新过的地方则不会重复更新。

基于此，本申请实施例中可参考目标代码中与第一目标组件对应的组件代码片段，对AST进行增量更新，例如仅对AST中与第一目标组件对应的AST子树进行更新，对于AST中其他组件对应的AST子树则不进行更新。这样，无需按照目标代码全量更新语法树，可节省一部分计算资源，降低代码可视化界面的加载延迟，在一定程度上可缓解代码可视化界面显示过程中的卡顿问题。

另外，在一些实施方式中，上述S220具体可以包括：

对第一目标组件对应的代码进行解析，生成与第一目标组件对应的目标语法子树；

将原语法树中与第一目标组件对应的语法子树替换为目标语法子树，得到更新后的语法树。

示例性地，可对第一目标组件对应的代码进行词法、语法解析，生成目标语法子树，并在原语法树中找到与第一目标组件对应的语法子树，进而将原语法树中与第一目标组件对应的语法子树替换为目标语法子树，即可完成语法树的更新过程，得到更新后的语法树。

另外，在一些实施方式中，上述在原语法树中查找与第一目标组件对应的语法子树的方式包括但不限于，利用组件标识采用Hash索引的方式在原语法树中对与第一目标组件对应的语法子树进行定位，以便进行更新替换。基于此，在上述将原语法树中与第一目标组件对应的语法子树替换为目标语法子树，得到更新后的语法树之前，本申请实施例提供的页面渲染方法还可以包括：

获取第一目标组件的组件标识；

根据第一目标组件的组件标识，通过哈希索引在原语法树中查询与第一目标组件对应的语法子树。

这里，组件标识可以是能够唯一标识组件的信息，例如组件ID。

在一些具体的例子中，如图4所示，在页面源码解析阶段，首先将捕捉到的差异代码片段41按照“标签首尾匹配规则”进行拆分，获得差异代码片段所属组件的组件代码片段，例如组件a的组件代码片段，随后对该组件a的组件代码片段进行词法、语法源码解析生成AST子树42，接着提取组件a的组件ID，例如UUID(Universally Unique Identifier，通用唯一识别码)3，从代码更新之前对应的AST上利用Hash索引查找并替换与该组件a对应的AST子树43，生成AST差异树40，也即更新后的AST，实现对AST的增量更新替换。

在一些实施方式中，在S230中，在得到更新后的语法树后，可根据语法树中发生变动的子树，对原领域特定语言树进行增量更新。其中，原领域特定语言树可以是目标代码在更新前所对应的领域特定语言树，该领域特定语言树例如可以是DSL树。

基于此，本申请实施例中可参考AST中更新过的AST子树，对DSL树进行增量更新，例如仅对DSL树中与更新过的AST子树对应的组件DSL对象进行更新，对于DSL树中的其他组件DSL对象则不进行更新。这样，无需全量遍历解析语法树中的每个组件所对应的子树，可进一步节省计算资源，降低代码可视化界面的加载延迟，并进一步缓解代码可视化界面显示过程中的卡顿问题。

另外，在一些实施方式中，上述S230具体可以包括：

对原语法树和更新后的语法树进行比对，确定存在差异的第二目标组件；

根据更新后的语法树中与第二目标组件对应的语法子树，生成与第二目标组件对应的目标领域特定语言对象；

将原领域特定语言树中与第二目标组件对应的领域特定语言对象替换为目标领域特定语言对象，得到更新后的领域特定语言树。

示例性地，可将原语法树与更新后的语法树按照结构和节点信息进行差异比对，确定语法树中哪些节点发生更新，并确定发生更新的差异节点所对应的组件，也即第二目标组件。将更新后的语法树中与第二目标组件对应的语法子树映射生成对应的组件DSL对象，也即目标领域特定语言对象，并将DSL树中与第二目标组件对应的领域特定语言对象替换为该目标领域特定语言对象，即可完成DSL树的更新过程，得到更新后的DSL树。

另外，在对原语法树和更新后的语法树进行比对时，由于研发人员可能仅仅只修改了组件中的某个属性，因此，存在差异的节点可能并不是组件类型的节点，而是其他类型的节点，例如属性类型的节点。基于此，为了便于在DSL树中对需要更新的DSL对象进行定位，在一些实施方式中，上述对原语法树和更新后的语法树进行比对，确定存在差异的第二目标组件，具体可以包括：

对原语法树和更新后的语法树进行比对，确定差异节点；

在差异节点不是组件类型的节点的情况下，在更新后的语法树中由差异节点向上递归查询组件类型的父节点，得到目标节点；

将目标节点对应的组件确定为第二目标组件。

示例性地，可将更新前后的语法树按照结构和节点信息进行比对，确定其中发生更新的差异节点。对差异节点进行类型区分分类，如果该差异节点不是组件类型的节点，例如是属性类型的节点，则可对该节点进行级别提升处理，在更新后的语法树中向上递归查找第一个组件类型的父节点，得到目标节点，并将该目标节点对应的组件确定为第二目标组件，从更新后的语法树中提取与该第二目标组件对应的组件级语法子树。

例如，若研发人员修改的是Button组件中的属性“name”的值“buttonA”，则将更新前后的AST进行比对后可提取得到如图5a所示差异节点所属的AST子树，经类型区分后发现这是一个属性类型的AST子树，需要在AST上向上继续查找差异节点“buttonA”的父节点来提升级别，当找到组件类型的节点“Button”后可得到如图5b所示的组件AST子树，进而利用该组件AST子树对DSL树进行增量更新。

另外，在一些实施方式中，在上述将原领域特定语言树中与第二目标组件对应的领域特定语言对象替换为目标领域特定语言对象，得到更新后的领域特定语言树之前，本申请实施例提供的页面渲染方法还可以包括：

获取第二目标组件的组件标识；

根据第二目标组件的组件标识，通过哈希索引在原领域特定语言树中查询与第二目标组件对应的领域特定语言对象。

在一些具体的例子中，如图6所示，在DSL映射阶段，首先将更新前的原AST 60和更新后的AST 61按照结构和节点信息进行差异比对，得到差异节点611、差异节点612和差异节点613，并按照节点类型对这些差异节点进行分类。若差异节点612和差异节点613不是组件级节点，也即不是组件类型的节点，则沿AST 61向上递归查找，得到组件类型的父节点所对应的AST子树615和AST子树616。根据DSL语法映射规则，将差异节点611对应的AST子树614、AST子树615和AST子树616分别映射为新的组件DSL对象，也即DSL对象621、DSL对象622和DSL对象623。最后，可从各个组件DSL对象中提取组件ID，并根据该组件ID，利用Hash索引定位并替换该组件在DSL树62中对应的组件DSL对象。这样，实现了DSL树的增量更新，提升从AST到DSL树的映射性能。

在一些实施方式中，在S240中，在更新领域特定语言树后，可按照该更新后的领域特定语言树进行页面渲染处理，进而可显示与目标代码对应的更新后的可视化界面。

示例性地，可以组件为渲染单元，对DSL树中更新的组件所对应的DSL对象进行渲染，从而得到随着研发人员对目标代码的改动而不断更新的可视化界面。

基于此，为了进一步降低代码可视化界面的加载延迟，最大程度上解决可视化界面的卡顿问题，在一些实施例中，上述S240具体可以包括：

将更新后的领域特定语言树中发生更新的领域特定语言对象，按照更新顺序依次存储至渲染队列；

在预设渲染周期内，如果渲染队列中存在多个领域特定语言对象对应于同一目标组件，则对多个领域特定语言对象进行合并处理；

基于目标组件对应的合并处理后的领域特定语言对象，按照预设渲染周期内渲染队列中多个组件对应的领域特定语言对象的排列顺序，对多个组件对应的领域特定语言对象依次进行渲染，得到与目标代码对应的可视化界面，多个组件包括目标组件。

这里，可设置预设渲染周期内，以在预设渲染周期内将同一组件更新得到的DSL对象进行合并，也即，一个预设渲染周期内对同一组件仅进行一次渲染处理。

示例性地，在DSL渲染阶段，为了平衡解析和渲染性能，可根据前端交互通用处理方案和用户实时感知体验，设置一个较为合理的渲染周期，例如300毫秒，当研发人员进行代码修改时，可在一个预设渲染周期内执行一轮渲染任务，直至研发人员停止代码修改操作。例如，若一个预设渲染周期内，有组件A、组件B和组件C依次发生过更新，且其中组件B在该预设渲染周期内更新过多次，则渲染队列中，可将组件B在多次更新过程中产生的多个DSL对象进行合并，得到一个DSL对象，进而按照渲染队列中各个组件所对应的DSL对象的排列顺序，也即有组件A、组件B和组件C发生更新的顺序，对各个组件对应的DSL对象进行逐一渲染。

基于此，为了保证渲染得到的可视化界面是预设渲染周期内最新修改后的代码所对应的可视化界面，在一些实施例中，上述对多个领域特定语言对象进行合并处理，具体可以包括：

确定多个领域特定语言对象中最后更新的领域特定语言对象；

在渲染队列中，将最后更新的领域特定语言对象覆盖多个领域特定语言对象中的其他领域特定语言对象。

这里，在对预设渲染周期内同一组件对应的多个DSL对象进行合并处理时，可将渲染队列中最新的DSL对象覆盖其他相同组件的DSL对象。

示例性地，在一个预设渲染周期内可用一个渲染队列来收集渲染单元的信息，每个渲染单元中可包含待渲染组件的组件ID和DSL对象，对象中可包含一个或多个发生更新的属性。基于此，可按照组件ID对渲染队列中与同一组件对应的DSL对象进行合并，将队尾的DSL对象覆盖队列中相同ID的其他DSL对象，再按照渲染队列顺序对每个待渲染组件进行逐一渲染。

例如，如图7a所示，若在预设渲染周期内向渲染队列中存储了五个渲染单元，也即研发人员修改过五次代码，其中，“组件1”在渲染周期内被修改了三次，第一次是修改了“属性1”、“属性2”和“属性3”中的某个属性，得到DSL对象71，第二次是删除了“属性1”和“属性3”，得到DSL对象72，第三次是在第二次修改的基础上又增加了“属性1”，得到DSL对象73。经过对相同ID的组件DSL对象进行合并后最终可得到如图7b所示的精简的渲染队列，也即，将“组件1”在队尾的DSL对象覆盖其他的DSL对象，得到“组件1”对应的仅包含第三次修改得到的DSL对象73。其他的“组件1”和“组件2”对应的DSL对象则不作处理，按照渲染队列中的排列顺序，对各个组件的DSL对象进行逐一渲染。

在一个具体例子中，若有一个组件A，研发人员对该组件A中的属性进行了如下修改操作：

time1：组件A->change props a value to a1

change props b value to b1

time2：组件A->change props a value to a2

change props b value to b2

……

timeN：组件A->change props a value to aN

change props b value to bN

若上述time1-timeN的修改操作发生在一个预设渲染周期内，对同一组件的频繁操作，会在渲染队列中叠加多个DSL对象，在周期结束或确定渲染时，渲染队列可采用预设的队列合并算法，对该多个DSL对象进行合并，将该组件A最近一次存入渲染队列的DSL对象提交至低代码平台的渲染引擎，完成视图渲染。

这样，通过将预设渲染周期内与同一组件对应的多个DSL对象合并叠加到该组件最新的DSL对象中，取最后入列的DSL对象作为最终渲染的数据源，可避免多次无效的重复解析和渲染，从而可以进一步节省计算资源，进一步降低代码可视化界面的加载延迟，最大程度上解决可视化界面的卡顿问题。

需要说明的是，上述本申请实施例描述的应用场景是为了更加清楚的说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域普通技术人员可知，随着新应用场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

基于相同的发明构思，本申请还提供了一种页面渲染装置。具体结合图8进行详细说明。

图8是本申请一个实施例提供的页面渲染装置的结构示意图。

如图8所示，该页面渲染装置800可以包括：

组件确定模块801，用于从目标代码中确定发生更新的差异代码片段所对应的第一目标组件；

第一更新模块802，用于根据所述第一目标组件对应的代码对原语法树进行增量更新，得到更新后的语法树，所述原语法树为所述目标代码更新前所对应的语法树；

第二更新模块803，用于根据所述更新后的语法树对原领域特定语言树进行增量更新，得到更新后的领域特定语言树，所述原领域特定语言树为所述目标代码更新前所对应的领域特定语言树；

渲染处理模块804，用于基于所述更新后的领域特定语言树进行页面渲染处理，得到与所述目标代码对应的可视化界面。

下面对上述页面渲染装置800进行详细说明，具体如下所示：

在其中一些实施例中，所述第一更新模块802包括：

第一解析子模块，用于对所述第一目标组件对应的代码进行解析，生成与所述第一目标组件对应的目标语法子树；

第一替换子模块，用于将所述原语法树中与所述第一目标组件对应的语法子树替换为所述目标语法子树，得到更新后的语法树。

在其中一些实施例中，所述第一更新模块802还包括：

第一获取子模块，用于在将所述原语法树中与所述第一目标组件对应的语法子树替换为所述目标语法子树，得到更新后的语法树之前，获取所述第一目标组件的组件标识；

第一查询子模块，用于根据所述第一目标组件的组件标识，通过哈希索引在原语法树中查询与所述第一目标组件对应的语法子树。

在其中一些实施例中，所述第二更新模块803包括：

第一比对子模块，用于对所述原语法树和所述更新后的语法树进行比对，确定存在差异的第二目标组件；

第一生成子模块，用于根据所述更新后的语法树中与所述第二目标组件对应的语法子树，生成与所述第二目标组件对应的目标领域特定语言对象；

第二替换子模块，用于将所述原领域特定语言树中与所述第二目标组件对应的领域特定语言对象替换为所述目标领域特定语言对象，得到更新后的领域特定语言树。

在其中一些实施例中，所述第一比对子模块包括：

第一确定单元，用于对所述原语法树和所述更新后的语法树进行比对，确定差异节点；

递归查询单元，用于在所述差异节点不是组件类型的节点的情况下，在所述更新后的语法树中由所述差异节点向上递归查询组件类型的父节点，得到目标节点；

第二确定单元，用于将所述目标节点对应的组件确定为所述第二目标组件。

在其中一些实施例中，所述第二更新模块803还包括：

第二获取子模块，用于在将所述原领域特定语言树中与所述第二目标组件对应的领域特定语言对象替换为所述目标领域特定语言对象，得到更新后的领域特定语言树之前，获取所述第二目标组件的组件标识；

第二查询子模块，用于根据所述第二目标组件的组件标识，通过哈希索引在所述原领域特定语言树中查询与所述第二目标组件对应的领域特定语言对象。

在其中一些实施例中，所述渲染处理模块804包括：

第一存储子模块，用于将所述更新后的领域特定语言树中发生更新的领域特定语言对象，按照更新顺序依次存储至渲染队列；

合并处理子模块，用于在预设渲染周期内，如果所述渲染队列中存在多个领域特定语言对象对应于同一目标组件，则对所述多个领域特定语言对象进行合并处理；

对象渲染子模块，用于基于所述目标组件对应的合并处理后的领域特定语言对象，按照所述预设渲染周期内所述渲染队列中多个组件对应的领域特定语言对象的排列顺序，对所述多个组件对应的领域特定语言对象依次进行渲染，得到与所述目标代码对应的可视化界面，所述多个组件包括所述目标组件。

在其中一些实施例中，所述合并处理子模块包括：

第三确定单元，用于确定所述多个领域特定语言对象中最后更新的领域特定语言对象；

对象覆盖单元，用于在所述渲染队列中，将所述最后更新的领域特定语言对象覆盖所述多个领域特定语言对象中的其他领域特定语言对象。

在其中一些实施例中，所述组件确定模块801包括：

代码提取子模块，用于从目标代码中提取发生更新的差异代码片段；

代码扩展子模块，用于在所述差异代码片段不是组件级的代码片段的情况下，将所述差异代码片段扩展为组件代码片段，确定得到与所述组件代码片段对应的第一目标组件。

在其中一些实施例中，所述代码扩展子模块包括：

第一查询单元，用于在所述目标代码中，由所述差异代码片段向前查询距离最近的组件代码起始标识；

第二查询单元，用于在所述目标代码中，由所述差异代码片段向后查询距离最近的组件代码结束标识；

片段获取单元，用于从所述目标代码中获取从所述组件代码起始标识至所述组件代码结束标识之间的代码片段，得到与所述差异代码片段对应的组件代码片段。

由此，通过根据目标代码中发生更新的差异代码片段所对应的第一目标组件的组件级代码，对原语法树进行增量更新，并根据该更新后的语法树对原领域特定语言树进行增量更新，基于更新后的领域特定语言树进行页面渲染处理，得到目标代码所对应的可视化界面。这样，由于本申请实施例在对目标代码进行更新的过程中，只是对发生更新的差异代码片段所对应的组件级代码重新进行解析，也即对原语法树和原领域特定语言树进行增量更新，而非对整个目标代码重新进行解析，也即并非重新生成语法树和领域特定语言树，因此可以节约计算资源。同时，由于对原语法树和原领域特定语言树进行增量更新所需的时间，比重新生成语法树和领域特定语言树所需的时间要少很多，因此利用该最小化处理策略可提高代码改动与代码可视化界面之间更新过程的同步性，从而可有效解决代码可视化界面的加载延迟及卡顿问题。

图9是本申请一个实施例提供的电子设备的结构示意图。

电子设备900可以包括处理器901以及存储有计算机程序指令的存储器902。

具体地，上述处理器901可以包括中央处理器(CPU)，或者特定集成电路(Application Specific Integrated Circuit，ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

存储器902可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器902可包括硬盘驱动器(Hard Disk Drive，HDD)、软盘驱动器、闪存、光盘、磁光盘、磁带或通用串行总线(Universal Serial Bus，USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器902可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器902可在综合网关容灾设备的内部或外部。在特定实施例中，存储器902是非易失性固态存储器。

在特定实施例中，存储器可包括只读存储器(ROM)，随机存取存储器(RAM)，磁盘存储介质设备，光存储介质设备，闪存设备，电气、光学或其他物理/有形的存储器存储设备。因此，通常，存储器包括一个或多个编码有包括计算机可执行指令的软件的有形(非暂态)计算机可读存储介质(例如，存储器设备)，并且当该软件被执行(例如，由一个或多个处理器)时，其可操作来执行参考根据本申请的一方面的方法所描述的操作。

处理器901通过读取并执行存储器902中存储的计算机程序指令，以实现上述实施例中的任意一种页面渲染方法。

在一些示例中，电子设备900还可包括通信接口903和总线910。其中，如图9所示，处理器901、存储器902、通信接口903通过总线910连接并完成相互间的通信。

通信接口903主要用于实现本申请实施例中各模块、装置、单元和/或设备之间的通信。

总线910包括硬件、软件或两者，将在线数据流量计费设备的部件彼此耦接在一起。举例来说而非限制，总线910可包括加速图形端口(AGP)或其他图形总线、增强工业标准架构(EISA)总线、前端总线(FSB)、超传输(HT)互连、工业标准架构(ISA)总线、无限带宽互连、低引脚数(LPC)总线、存储器总线、微信道架构(MCA)总线、外围组件互连(PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(SATA)总线、视频电子标准协会局部(VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线910可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。

示例性的，电子设备900可以为手机、电脑、服务器等能够运行低代码平台的设备。

该电子设备900可以执行本申请实施例中的页面渲染方法，从而实现结合图2和图8描述的页面渲染方法和装置。

另外，结合上述实施例中的页面渲染方法，本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种页面渲染方法。计算机可读存储介质的示例包括非暂态计算机可读存储介质，如便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件等。

需要明确的是，本申请并不局限于上文所描述并在图中示出的特定配置和处理。为了简明起见，这里省略了对已知方法的详细描述。在上述实施例中，描述和示出了若干具体的步骤作为示例。但是，本申请的方法过程并不限于所描述和示出的具体步骤，本领域的技术人员可以在领会本申请的精神后，作出各种改变、修改和添加，或者改变步骤之间的顺序。

以上所述的结构框图中所示的功能块可以实现为硬件、软件、固件或者它们的组合。当以硬件方式实现时，其可以例如是电子电路、专用集成电路(ASIC)、适当的固件、插件、功能卡等等。当以软件方式实现时，本申请的元素是被用于执行所需任务的程序或者代码段。程序或者代码段可以存储在机器可读介质中，或者通过载波中携带的数据信号在传输介质或者通信链路上传送。“机器可读介质”可以包括能够存储或传输信息的任何介质。机器可读介质的例子包括电子电路、半导体存储器设备、ROM、闪存、可擦除ROM(EROM)、软盘、CD-ROM、光盘、硬盘、光纤介质、射频(RF)链路，等等。代码段可以经由诸如因特网、内联网等的计算机网络被下载。

还需要说明的是，本申请中提及的示例性实施例，基于一系列的步骤或者装置描述一些方法或系统。但是，本申请不局限于上述步骤的顺序，也就是说，可以按照实施例中提及的顺序执行步骤，也可以不同于实施例中的顺序，或者若干步骤同时执行。

上面参考根据本申请的实施例的方法、装置(系统)和计算机程序产品的流程图和/或框图描述了本申请的各方面。应当理解，流程图和/或框图中的每个方框以及流程图和/或框图中各方框的组合可以由计算机程序指令实现。这些计算机程序指令可被提供给通用计算机、专用计算机、或其它可编程数据处理装置的处理器，以产生一种机器，使得经由计算机或其它可编程数据处理装置的处理器执行的这些指令使能对流程图和/或框图的一个或多个方框中指定的功能/动作的实现。这种处理器可以是但不限于是通用处理器、专用处理器、特殊应用处理器或者现场可编程逻辑电路。还可理解，框图和/或流程图中的每个方框以及框图和/或流程图中的方框的组合，也可以由执行指定的功能或动作的专用硬件来实现，或可由专用硬件和计算机指令的组合来实现。

以上所述，仅为本申请的具体实施方式，所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的系统、模块和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。应理解，本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本申请的保护范围之内。

Claims (13)

1.一种页面渲染方法，其特征在于，包括：

从目标代码中确定发生更新的差异代码片段所对应的第一目标组件；

根据所述第一目标组件对应的代码对原语法树进行增量更新，得到更新后的语法树，所述原语法树为所述目标代码更新前所对应的语法树；

根据所述更新后的语法树对原领域特定语言树进行增量更新，得到更新后的领域特定语言树，所述原领域特定语言树为所述目标代码更新前所对应的领域特定语言树；

基于所述更新后的领域特定语言树进行页面渲染处理，得到与所述目标代码对应的可视化界面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述第一目标组件对应的代码对原语法树进行增量更新，得到更新后的语法树，包括：

对所述第一目标组件对应的代码进行解析，生成与所述第一目标组件对应的目标语法子树；

将所述原语法树中与所述第一目标组件对应的语法子树替换为所述目标语法子树，得到更新后的语法树。

3.根据权利要求2所述的方法，其特征在于，在将所述原语法树中与所述第一目标组件对应的语法子树替换为所述目标语法子树，得到更新后的语法树之前，所述方法还包括：

获取所述第一目标组件的组件标识；

根据所述第一目标组件的组件标识，通过哈希索引在原语法树中查询与所述第一目标组件对应的语法子树。

4.根据权利要求1所述的方法，其特征在于，所述根据所述更新后的语法树对原领域特定语言树进行更新，得到更新后的领域特定语言树，包括：

对所述原语法树和所述更新后的语法树进行比对，确定存在差异的第二目标组件；

根据所述更新后的语法树中与所述第二目标组件对应的语法子树，生成与所述第二目标组件对应的目标领域特定语言对象；

将所述原领域特定语言树中与所述第二目标组件对应的领域特定语言对象替换为所述目标领域特定语言对象，得到更新后的领域特定语言树。

5.根据权利要求4所述的方法，其特征在于，所述对所述原语法树和所述更新后的语法树进行比对，确定存在差异的第二目标组件，包括：

对所述原语法树和所述更新后的语法树进行比对，确定差异节点；

在所述差异节点不是组件类型的节点的情况下，在所述更新后的语法树中由所述差异节点向上递归查询组件类型的父节点，得到目标节点；

将所述目标节点对应的组件确定为所述第二目标组件。

6.根据权利要求4所述的方法，其特征在于，在将所述原领域特定语言树中与所述第二目标组件对应的领域特定语言对象替换为所述目标领域特定语言对象，得到更新后的领域特定语言树之前，所述方法还包括：

获取所述第二目标组件的组件标识；

根据所述第二目标组件的组件标识，通过哈希索引在所述原领域特定语言树中查询与所述第二目标组件对应的领域特定语言对象。

7.根据权利要求1所述的方法，其特征在于，所述基于所述更新后的领域特定语言树进行页面渲染处理，得到与所述目标代码对应的可视化界面，包括：

将所述更新后的领域特定语言树中发生更新的领域特定语言对象，按照更新顺序依次存储至渲染队列；

在预设渲染周期内，如果所述渲染队列中存在多个领域特定语言对象对应于同一目标组件，则对所述多个领域特定语言对象进行合并处理；

基于所述目标组件对应的合并处理后的领域特定语言对象，按照所述预设渲染周期内所述渲染队列中多个组件对应的领域特定语言对象的排列顺序，对所述多个组件对应的领域特定语言对象依次进行渲染，得到与所述目标代码对应的可视化界面，所述多个组件包括所述目标组件。

8.根据权利要求7所述的方法，其特征在于，所述对所述多个领域特定语言对象进行合并处理，包括：

确定所述多个领域特定语言对象中最后更新的领域特定语言对象；

在所述渲染队列中，将所述最后更新的领域特定语言对象覆盖所述多个领域特定语言对象中的其他领域特定语言对象。

9.根据权利要求1所述的方法，其特征在于，所述从目标代码中确定发生更新的差异代码片段所对应的第一目标组件，包括：

从目标代码中提取发生更新的差异代码片段；

在所述差异代码片段不是组件级的代码片段的情况下，将所述差异代码片段扩展为组件代码片段，确定得到与所述组件代码片段对应的第一目标组件。

10.根据权利要求9所述的方法，其特征在于，所述将所述差异代码片段扩展为组件代码片段，包括：

在所述目标代码中，由所述差异代码片段向前查询距离最近的组件代码起始标识；

在所述目标代码中，由所述差异代码片段向后查询距离最近的组件代码结束标识；

从所述目标代码中获取从所述组件代码起始标识至所述组件代码结束标识之间的代码片段，得到与所述差异代码片段对应的组件代码片段。

11.一种页面渲染装置，其特征在于，包括：

组件确定模块，用于从目标代码中确定发生更新的差异代码片段所对应的第一目标组件；

第一更新模块，用于根据所述第一目标组件对应的代码对原语法树进行增量更新，得到更新后的语法树，所述原语法树为所述目标代码更新前所对应的语法树；

第二更新模块，用于根据所述更新后的语法树对原领域特定语言树进行增量更新，得到更新后的领域特定语言树，所述原领域特定语言树为所述目标代码更新前所对应的领域特定语言树；

渲染处理模块，用于基于所述更新后的领域特定语言树进行页面渲染处理，得到与所述目标代码对应的可视化界面。

12.一种电子设备，其特征在于，所述设备包括：处理器以及存储有计算机程序指令的存储器；

所述处理器执行所述计算机程序指令时实现如权利要求1-10任意一项所述的页面渲染方法的步骤。

13.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现如权利要求1-10任意一项所述的页面渲染方法的步骤。