CN111506380A

CN111506380A - 一种渲染方法、装置、设备及存储介质

Info

Publication number: CN111506380A
Application number: CN202010322653.7A
Authority: CN
Inventors: 周哲
Original assignee: Shanghai Jilian Network Technology Co ltd
Current assignee: Shanghai Jilian Network Technology Co ltd
Priority date: 2020-04-22
Filing date: 2020-04-22
Publication date: 2020-08-07

Abstract

本发明实施例公开了一种渲染方法、装置、设备及存储介质，其中，渲染方法包括：获取针对图文元素的目标操作数据；根据预设操作数据处理规则，将目标操作数据配置到前端用于缓存的初始树形数据结构中，得到目标树形数据结构；根据目标树形数据结构，对目标操作数据对应的目标图文元素进行渲染，并显示渲染后的目标图文元素。本发明实施例的技术方案能够在不依赖后台的前提下，达到快速渲染，提高用户交互体验的效果。

Description

一种渲染方法、装置、设备及存储介质

技术领域

本发明实施例涉及数据处理技术领域，尤其涉及一种渲染方法、装置、设备及存储介质。

背景技术

对于图文交互的客户端产品而言，每个可交互的元素会与交互后生成的元素产生父子元素的关联关系，在使用时会根据需要以思维导图的形式在某个元素下新建子节点，并对此子元素进行增删改查等内容拓展。

通常用户在使用图文交互产品时，每进行一步操作，都需要后台调用数据库来记录用户相应的交互操作数据，并根据数据库记录的操作数据执行相应的渲染操作，该过程对后台依赖性较大，与此同时产生的大量I/O请求也会影响渲染操作的速度，进而影响用户的交互体验。

发明内容

本发明实施例提供一种渲染方法、装置、设备及存储介质，能够在不依赖后台的前提下，达到快速渲染，提高用户交互体验的效果。

第一方面，本发明实施例提供了一种渲染方法，所述渲染方法包括：

获取针对图文元素的目标操作数据；

根据预设操作数据处理规则，将所述目标操作数据配置到前端用于缓存的初始树形数据结构中，得到目标树形数据结构；

根据所述目标树形数据结构，对所述目标操作数据对应的目标图文元素进行渲染，并显示渲染后的目标图文元素。

第二方面，本发明实施例还提供了一种渲染装置，所述渲染装置包括：

目标操作数据获取模块，用于获取针对图文元素的目标操作数据；

目标树形数据结构确定模块，用于根据预设操作数据处理规则，将所述目标操作数据配置到前端用于缓存的初始树形数据结构中，得到目标树形数据结构；

渲染显示模块，用于根据所述目标树形数据结构，对所述目标操作数据对应的目标图文元素进行渲染，并显示渲染后的目标图文元素。

第三方面，本发明实施例还提供了一种计算机设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述的渲染方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上所述的渲染方法。

本发明实施例通过获取针对图文元素的目标操作数据；根据预设操作数据处理规则，将目标操作数据配置到前端用于缓存的初始树形数据结构中，得到目标树形数据结构；根据目标树形数据结构，对目标操作数据对应的目标图文元素进行渲染，并显示渲染后的目标图文元素，能够在不依赖后台的前提下，达到快速渲染，提高用户交互体验的效果。

附图说明

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

图1a是本发明实施例一中的一种渲染方法的流程图；

图1b是本发明实施例一中的一种图文元素关联关系示意图；

图2是本发明实施例二中的一种渲染装置的结构示意图；

图3是本发明实施例三中的一种计算机设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1a为本发明实施例一提供的一种渲染方法的流程图，本实施例可适用于需要对针对图文元素的用户操作数据进行渲染的情况，该方法可以由渲染装置来执行，该装置可以采用软件和/或硬件的方式实现，该装置可以配置于计算机设备中。如图1a所示，该方法可以包括如下步骤：

S110、获取针对图文元素的目标操作数据。

图文元素即图形元素和文本元素，在每个可以实现图文交互的客户端应用和web服务器当中，都可以存在图文元素，并且由于图文元素与图文元素之间可以产生交互行为(例如，交互行为可以是从当前图文元素跳转到下一个图文元素，为当前图文元素添加一个图文元素，该添加的图文元素可以是当前图文元素的子元素，也可以是当前图文元素的并列元素等)，因此，图文元素与图文元素之间会存在父子元素的关联关系，在所有父子元素中还可以定义一个根元素。图1b为本发明实施例一提供的一种图文元素关联关系示意图，如图1b所示，1为图文元素的根元素，2为根元素1的第一子元素，3为根元素1的第二子元素，其中，第二子元素3为第一子元素2的子元素。

示例性的，客户端应用为工作日程记录应用，其中可以包括年、周、日、上午、中午、下午和晚上等节点，针对每个节点都可以设置相应的图文元素，例如，用户需要记录2020年第9周周三上午的日程，客户端应用可以根据用户的实际操作，创建2020年对应的图文元素(即根元素)，之后创建2020年的子元素第9周对应的图文元素(即第一子元素)，再创建第9周的子元素周三对应的图文元素(即第二子元素)，最后创建周三的子元素上午对应的图文元素(即第三子元素)。可以理解的是，当用户首次进入客户端应用时，客户端应用中不存在根元素和相应的子元素，用户可以通过执行相应的操作来创建根元素和子元素。

本实施例中的目标操作数据可以是用户针对图文元素执行的目标操作所对应的数据，目标操作数据中可以包括目标操作所针对的当前图文元素、目标操作所对应的动作以及系统执行完目标操作得到的图文元素或其他结果中的至少一种数据。其中，目标操作所对应的动作包括点击、添加、删除、修改以及查找中的至少一种。

仍以上述用户需要记录2020年第9周周三上午的日程为例，在生成2020年对应的图文元素之后，用户可以通过客户端应用执行为2020年的图文元素添加第9周的图文元素，此过程对应的目标操作数据包括2020年的图文元素、添加操作以及第9周的图文元素。

S120、根据预设操作数据处理规则，将目标操作数据配置到前端用于缓存的初始树形数据结构中，得到目标树形数据结构。

预设操作数据处理规则与初始树形数据结构中的数据对象相匹配，预设操作数据处理规则可以根据目标操作数据对应的目标操作确定，即预设操作数据处理规则与目标操作相对应。

预选的，预设操作数据处理规则包括insert、delete、Find、nextStack以及goBack，其中，insert用于在预设树形数据结构中第一位置处添加图文元素，delete用于删除预设树形数据结构中第二位置处的图文元素、Find用于查找图文元素，并将查找到的图文元素存储至预设树形数据结构中的第三位置处、nextStack方法用于在预设树形数据结构中的第四位置处，存储从当前图文元素进入下一层图文元素的进入路径，goBack方法用于在预设树形数据结构中的第五位置处，存储从当前图文元素返回上一层图文元素的返回路径。

示例性的，如果目标操作为在第一图文元素后面添加第二图文元素，则可以采用预设插入方法(即insert)，根据目标操作数据，将第二图文元素添加到初始树形数据结构中的第一图文元素后面(即上述第一位置)。如果目标操作为删除第三图文元素，则可以采用预设删除方法(即delete)，根据目标操作数据，将第三图文元素从初始树形数据结构中的相应位置(即上述第二位置)处删除，如果目标操作为查找图文元素，则可以采用预设查找方法(即Find)，根据目标操作数据，在相应的位置利用检索关键字进行相应的图文元素查找，并将查找到的图文元素添加到初始树形数据结构的第三位置处。如果目标操作为从当前图文元素进入下一层图文元素，则可以采用nextStack方法用于在预设树形数据结构中的第四位置处，存储从当前图文元素进入下一层图文元素的进入路径。如果目标操作为从当前图文元素返回上一层图文元素，则可以采用goBack方法用于在预设树形数据结构中的第五位置处，存储从当前图文元素返回上一层图文元素的返回路径。

优选的，初始树形数据结构可以是设置于系统前端的树形数据结构，其作用是用于缓存用户针对图文元素执行的操作行为，利用该初始树形数据结构在前端存储用户的操作行为，无需与后台进行交互，能够提高系统的响应速度，进而提高用户体验。优选的，预设树形数据结构可以包括DOM树形数据结构。

S130、根据目标树形数据结构，对目标操作数据对应的目标图文元素进行渲染，并显示渲染后的目标图文元素。

本实施例中，在目标树形数据结构中存储有用户的所有操作行为数据，因此，可以根据目标树形数据结构，对目标操作数据对应的目标图文元素进行渲染。其中，渲染方法可以包括createElementNS、setAttribute，API封装图形等方法。

优选的，对目标操作数据对应的目标图文元素进行渲染，可以是仅对目标图文元素进行渲染，页面上的其他图文元素保持不变，也可以是对页面上包括目标图文元素在内的所有图文元素进行渲染。

本实施例提供的一种渲染方法，通过获取针对图文元素的目标操作数据；根据预设操作数据处理规则，将目标操作数据配置到前端用于缓存的初始树形数据结构中，得到目标树形数据结构；根据目标树形数据结构，对目标操作数据对应的目标图文元素进行渲染，并显示渲染后的目标图文元素，能够在不依赖后台的前提下，达到快速渲染，提高用户交互体验的效果。

在上述各实施例的基础上，进一步的，目标操作数据对应的目标操作包括添加图文元素、删除图文元素、修改图文元素、查找图文元素、从当前图文元素进入下一层图文元素以及从当前图文元素返回上一层图文元素。

在上述各实施例的基础上，进一步的，在根据预设操作数据处理规则，将目标操作数据配置到前端用于缓存的初始树形数据结构中之前，还包括：

在前端创建与图文对象相对应的预设树形数据结构，若不存在与用户的历史操作行为对应的历史图文对象，则将预设树形数据结构作为初始树形数据结构，其中，预设树形数据结构包括图文对象对应的属性和预设操作数据处理规则。

预设树形数据结构为在用户首次进入客户端应用之前，对应的没有缓存数据的树形数据结构。当用户首次进入客户端后，由于不存在用户的历史操作行为，因此，初始树形数据结构即为预设树形数据结构。

图文对象可以包括各个图文元素。优选的，图文对象对应的属性可以包括root、currentRoot、stackQueue、stackSearch以及searchArr，其中，root表示图文对象的结构，currentRoot表示当前图文元素的属性，stackQueue表示进入当前图文元素的路径，stackSearch表示查找图文元素对应的搜索栈，searchArr表示与搜索栈对应的图文元素。

在使用insert方法时，当不存在根节点时，可以在root插入根节点。当存在根节点时，可以在currentRoot插入子节点。在使用Find方法时，可以将查找到的图文元素插入到searchArr数组中。在使用nextStack方法时，可以将从当前图文元素进入下一层图文元素的进入路径插入到stackQueue中，并将currentRoot设置为进入的图文元素。在使用goBack方法时，可以将从当前图文元素返回上一层图文元素的返回路径插入到stackQueue中，并将currentRoot设置为父元素。在使用delete方法时：可以在root中通过查找的方法删除对应位置处的图文元素。

若存在与用户的历史操作行为对应的历史图文对象，则加载历史图文对象，并将历史图文对象配置到预设树形数据结构中，得到初始树形数据结构。

实施例二

图2是本发明实施例二中的一种渲染装置的结构示意图。如图2所示，渲染装置包括：

目标操作数据获取模块210，用于获取针对图文元素的目标操作数据；

目标树形数据结构确定模块220，用于根据预设操作数据处理规则，将目标操作数据配置到前端用于缓存的初始树形数据结构中，得到目标树形数据结构；

渲染显示模块230，用于根据目标树形数据结构，对目标操作数据对应的目标图文元素进行渲染，并显示渲染后的目标图文元素。

本实施例提供的一种渲染装置，通过利用目标操作数据获取模块获取针对图文元素的目标操作数据；利用目标树形数据结构确定模块根据预设操作数据处理规则，将目标操作数据配置到前端用于缓存的初始树形数据结构中，得到目标树形数据结构；利用渲染显示模块根据目标树形数据结构，对目标操作数据对应的目标图文元素进行渲染，并显示渲染后的目标图文元素，能够在不依赖后台的前提下，达到快速渲染，提高用户交互体验的效果。

在上述技术方案的基础上，进一步的，目标操作数据对应的目标操作包括添加图文元素、删除图文元素、修改图文元素、查找图文元素、从当前图文元素进入下一层图文元素以及从当前图文元素返回上一层图文元素。

在上述技术方案的基础上，进一步的，渲染装置还可以包括第一初始树形数据结构确定模块，用于在根据预设操作数据处理规则，将目标操作数据配置到前端用于缓存的初始树形数据结构中之前，在前端创建与图文对象相对应的预设树形数据结构，若不存在与用户的历史操作行为对应的历史图文对象，则将预设树形数据结构作为初始树形数据结构，其中，预设树形数据结构包括图文对象对应的属性和预设操作数据处理规则。

在上述技术方案的基础上，进一步的，渲染装置还可以包括第二初始树形数据结构确定模块，用于在根据预设操作数据处理规则，将目标操作数据配置到前端用于缓存的初始树形数据结构中之前，若存在与用户的历史操作行为对应的历史图文对象，则加载历史图文对象，并将历史图文对象配置到预设树形数据结构中，得到初始树形数据结构。

在上述技术方案的基础上，进一步的，图文对象对应的属性包括root、currentRoot、stackQueue、stackSearch以及searchArr，其中，root表示图文对象的结构，currentRoot表示当前图文元素的属性，stackQueue表示进入当前图文元素的路径，stackSearch表示查找图文元素对应的搜索栈，searchArr表示与搜索栈对应的图文元素。

在上述技术方案的基础上，进一步的，预设操作数据处理规则包括insert、delete、Find、nextStack以及goBack，其中，insert用于在预设树形数据结构中第一位置处添加图文元素，delete用于删除预设树形数据结构中第二位置处的图文元素、Find用于查找图文元素，并将查找到的图文元素存储至预设树形数据结构中的第三位置处、nextStack方法用于在预设树形数据结构中的第四位置处，存储从当前图文元素进入下一层图文元素的进入路径，goBack方法用于在预设树形数据结构中的第五位置处，存储从当前图文元素返回上一层图文元素的返回路径。

在上述技术方案的基础上，进一步的，预设树形数据结构包括DOM树形数据结构。

本发明实施例所提供的渲染装置可执行本发明任意实施例所提供的渲染方法，具备执行方法相应的功能模块和有益效果。

实施例三

图3为本发明实施例三提供的一种计算机设备的结构示意图。图3示出了适于用来实现本发明实施方式的示例性计算机设备312的框图。图3显示的计算机设备312仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图3所示，计算机设备312以通用计算设备的形式表现。计算机设备312的组件可以包括但不限于：一个或者多个处理器316，存储器328，连接不同系统组件(包括存储器328和处理器316)的总线318。除此之外，计算机设备312还包括激光发射器(图3中未示出)，激光发射器设置于参考坐标系内的参考点处，用于发射出射激光。

总线318表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

计算机设备312典型地包括多种计算机系统可读介质。这些介质可以是任何能够被计算机设备312访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

存储器328可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)330和/或高速缓存存储器332。计算机设备312可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储装置334可以用于读写不可移动的、非易失性磁介质(图3未显示，通常称为“硬盘驱动器”)。尽管图3中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线318相连。存储器328可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块342的程序/实用工具340，可以存储在例如存储器328中，这样的程序模块342包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块342通常执行本发明所描述的实施例中的功能和/或方法。

计算机设备312也可以与一个或多个外部设备314(例如键盘、指向设备、显示器324等，其中，显示器324可根据实际需要决定是否配置)通信，还可与一个或者多个使得用户能与该计算机设备312交互的设备通信，和/或与使得该计算机设备312能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口322进行。并且，计算机设备312还可以通过网络适配器320与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器320通过总线318与计算机设备312的其它模块通信。应当明白，尽管图3中未示出，可以结合计算机设备312使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储装置等。

处理器316通过运行存储在存储器328中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的渲染方法。

实施例四

本发明实施例四提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例所提供的渲染方法，包括：

获取针对图文元素的目标操作数据；

根据预设操作数据处理规则，将目标操作数据配置到前端用于缓存的初始树形数据结构中，得到目标树形数据结构；

根据目标树形数据结构，对目标操作数据对应的目标图文元素进行渲染，并显示渲染后的目标图文元素。

当然，本发明实施例所提供的计算机可读存储介质，其上存储的计算机程序不限于执行如上所述的方法操作，还可以执行本发明任意实施例所提供的基于计算机设备的渲染方法中的相关操作。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如”C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims

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

获取针对图文元素的目标操作数据；

2.根据权利要求1所述的方法，其特征在于，所述目标操作数据对应的目标操作包括添加图文元素、删除图文元素、修改图文元素、查找图文元素、从当前图文元素进入下一层图文元素以及从所述当前图文元素返回上一层图文元素。

3.根据权利要求1或2所述的方法，其特征在于，在根据预设操作数据处理规则，将所述目标操作数据配置到前端用于缓存的初始树形数据结构中之前，还包括：

在所述前端创建与图文对象相对应的预设树形数据结构，若不存在与用户的历史操作行为对应的历史图文对象，则将所述预设树形数据结构作为所述初始树形数据结构，其中，所述预设树形数据结构包括所述图文对象对应的属性和预设操作数据处理规则。

4.根据权利要求3所述的方法，其特征在于，在根据预设操作数据处理规则，将所述目标操作数据配置到前端用于缓存的初始树形数据结构中之前，还包括：

若存在与用户的历史操作行为对应的历史图文对象，则加载所述历史图文对象，并将所述历史图文对象配置到所述预设树形数据结构中，得到所述初始树形数据结构。

5.根据权利要求3所述的方法，其特征在于，所述图文对象对应的属性包括root、currentRoot、stackQueue、stackSearch以及searchArr，其中，所述root表示所述图文对象的结构，所述currentRoot表示当前图文元素的属性，所述stackQueue表示进入当前图文元素的路径，所述stackSearch表示查找图文元素对应的搜索栈，所述searchArr表示与所述搜索栈对应的图文元素。

6.根据权利要求3所述的方法，其特征在于，所述预设操作数据处理规则包括insert、delete、Find、nextStack以及goBack，其中，所述insert用于在所述预设树形数据结构中第一位置处添加图文元素，所述delete用于删除所述预设树形数据结构中第二位置处的图文元素、所述Find用于查找图文元素，并将查找到的图文元素存储至所述预设树形数据结构中的第三位置处、所述nextStack方法用于在所述预设树形数据结构中的第四位置处，存储从当前图文元素进入下一层图文元素的进入路径，所述goBack方法用于在所述预设树形数据结构中的第五位置处，存储从当前图文元素返回上一层图文元素的返回路径。

7.根据权利要求1所述的方法，其特征在于，所述预设树形数据结构包括DOM树形数据结构。

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

9.一种计算机设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一所述的渲染方法。

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