显示数据的渲染方法、电子设备、移动终端及存储介质技术

本申请公开了一种浏览器显示数据的渲染方法、电子设备、移动终端及存储介质，该方法获取待渲染数据，待渲染数据为树形结构数据，树形结构数据包括多个节点；将待渲染数据划分为多个子数据，每个子数据包括部分节点；将多个子数据分批次添加到渲染数据集中，并在每次添加后对渲染数据集中的数据进行渲染。通过上述方式，本申请能够减缓浏览器一次性渲染大量树形结构数据的压力，从而避免浏览器卡顿，进而提升页面性能和改善用户体验。

【技术实现步骤摘要】
显示数据的渲染方法、电子设备、移动终端及存储介质
本申请涉及浏览器显示领域，特别是涉及一种显示数据的渲染方法、电子设备、移动终端及存储介质。
技术介绍
通常，随着人们对信息查看的便捷性以及快速性需求，在打开浏览器时，用户往往希望能够快速查看到需要的页面，从而使得浏览器页面的数据显示的渲染速度的快慢尤为重要。一般，将浏览器转化为树形结构数据，先将树形结构的数据进行扁平化处理，通过将所有节点放入一个一维数组中，同时记录每个节点和各自父节点、子节点的依赖关系，通过对不同层级的节点设置不同的样式和布局，然后通过虚拟列表的形式，比如：监听页面滚动事件并计算需要渲染的数据。目前，现有的渲染方案若通过虚拟列表的形式，在处理树形数据的筛选等复杂操作时处理较为繁琐以及换行进行高度计算很困难，往往在一次性渲染中，需要处理大量树形结构数据，涉及到的节点成千上万个甚至更多，这导致内存处理浏览器页面渲染的开销非常大，使得浏览器卡顿，进而降低页面性能并影响用户体验。
技术实现思路
本申请实施例的第一方面提供了浏览器显示数据的渲染方法，该方法获取待渲染数据，待渲染数据为树形结构数据，树形结构数据包括多个节点；将待渲染数据划分为多个子数据，每个子数据包括部分节点；将多个子数据分批次添加到渲染数据集中，并在每次添加后对渲染数据集中的数据进行渲染。本申请实施例的第二方面提供了一种电子设备，包括：获取模块，用于获取待渲染数据，待渲染数据为树形结构数据，树形结构数据包括多个节点；划分模块，用于将待渲染数据划分为多个子数据，每个子数据包括部分节点；添加模块，用于将多个子数据分批次添加到渲染数据集中，以及渲染模块，用于在每次添加后对渲染数据集中的数据进行渲染。本申请实施例的第三方面提供了一种移动终端，包括：处理器和存储器，存储器中存储有计算机程序，处理器用于执行计算机程序以实现本申请实施例第一方面提供的方法。本申请实施例的第四方面提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，计算机程序能够被处理器执行时实现本申请实施例第一方面提供的方法。本申请的有益效果是：区别于现有技术的情况，本申请针对目前浏览器显示数据的渲染技术，通过将待渲染数据划分为多个子数据，而每个子数据包括部分节点，将多个子数据分批次添加到渲染数据集中进行渲染，使得本申请能够分批处理部分节点，节省内存处理浏览器页面渲染的开销，能够减缓浏览器一次性渲染大量树形结构数据的压力，从而避免浏览器卡顿，进而提升页面性能和改善用户体验。附图说明为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是本申请浏览器显示数据的渲染方法第一实施例的流程示意图；图2是本申请浏览器显示数据的渲染方法第二实施例的流程示意图；图3是本申请图2中步骤S24的一具体流程示意图；图4是本申请图3中步骤S32的一具体流程示意图；图5是本申请图4中步骤S42之后的一具体流程示意图；图6是本申请图1中步骤S12的一具体流程示意图；图7是本申请浏览器显示数据的渲染方法一具体实施例的流程示意图；图8是本申请的电子设备一实施例的示意框图；图9是本申请的移动终端一实施例的示意框图；图10是本申请的计算机可读存储介质一实施例的示意框图；图11是本申请智能手机的硬件架构的示意框图。具体实施方式以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。还应当理解，在此本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本申请。如在本申请说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。还应当进一步理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。如在本说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。为了说明本申请的技术方案，下面通过具体实施例来进行说明。本申请提供一种浏览器显示数据的渲染方法，本申请的技术方案主要适用于浏览器渲染树形结构的数据，特别是存在大量节点(Node)的树形结构数据，如超过2000个节点。请参阅图1，图1是本申请浏览器显示数据的渲染方法第一实施例的流程示意图，该渲染方法具体包括以下步骤：S11：获取待渲染数据；通常，浏览器对应的服务端设置有应用程序接口(ApplicationProgrammingInterface，API)。API是一些预先定义的接口(如函数、HTTP接口)，或指软件系统不同组成部分衔接的约定，用于获取所需要的数据。通过该API可以从服务端获取待渲染数据，通常，待渲染数据为树形结构数据，树形结构数据包括多个节点，节点指的是树中的数据元素，由数据项和数据元素之间的关系组成。其中，树形结构指的是数据元素之间“一对多”的树形关系的嵌套的非线性数据结构，其中包含多个节点，其中多个节点包括至少有父节点以及子节点中的一种。S12：将待渲染数据划分为多个子数据，每个子数据包括部分节点；通常，浏览器设置有Web应用，Web应用通过深度优先的递归遍历的方法，可以计算该数据中节点及各自子节点数量，也就是说父节点以及父节点下对应的子节点数。为了能将带渲染数据划分成多个子数据，可以在计数过程中记录每次新增渲染数据个数倍数的节点位置，例如，每次渲染200个数据，则记录200、400、600...处的节点位置，节点位置实际上指的是该节点在屏幕中的路径位置或在树状结构处的路径位置，使得再追加渲染时，可以依据这个路径位置来进行渲染。其中，每次新增待渲染数据个数倍数的节点位置可以根据业务需求结合浏览器所需性能进行设置，比如用户设置的最佳性能进行设置。S13：将多个子数据分批次添加到渲染数据集中，并在本文档来自技高网...

【技术保护点】
1.一种浏览器显示数据的渲染方法，其特征在于，所述方法包括：/n获取待渲染数据，所述待渲染数据为树形结构数据，所述树形结构数据包括多个节点；/n将所述待渲染数据划分为多个子数据，每个子数据包括部分所述节点；/n将所述多个子数据分批次添加到渲染数据集中，并在每次添加后对所述渲染数据集中的数据进行渲染。/n

【技术特征摘要】
1.一种浏览器显示数据的渲染方法，其特征在于，所述方法包括：
获取待渲染数据，所述待渲染数据为树形结构数据，所述树形结构数据包括多个节点；
将所述待渲染数据划分为多个子数据，每个子数据包括部分所述节点；
将所述多个子数据分批次添加到渲染数据集中，并在每次添加后对所述渲染数据集中的数据进行渲染。


2.根据权利要求1所述的方法，其特征在于，
所述将所述多个子数据分批次添加到渲染数据集中，并在每次添加后对所述渲染数据集中的数据进行渲染之前，所述渲染方法还包括：
创建空对象，所述空对象用于存放所述渲染数据集；
其中，所述渲染数据集用于按前一次已渲染子数据的节点位置对下一次待渲染子数据的节点进行安插复制。


3.根据权利要求2所述的方法，其特征在于，
所述将所述多个子数据分批次添加到渲染数据集中，并在每次添加后对所述渲染数据集中的数据进行渲染，包括：
将第N个待渲染子数据按照第N-1个已渲染子数据对应的节点位置安插复制到所述渲染数据集中，其中所述N为正整数；
对所述第N个待渲染子数据进行虚拟文档对象模型异步渲染。


4.根据权利要求3所述的方法，其特征在于，
所述对所述第N个待渲染子数据进行虚拟文档对象模型异步渲染，包括：
基于虚拟文档对象模型，使用遍历的方式对所述第N个待渲染子数据与所述第N-1个已渲染子数据进行比较，得到所述第N个待渲染子数据与所述第N-1个已渲染子数据之间的数据结构补丁；
将所述数据结构补丁替换到所述第N个待渲染子数据上，得到第N个已渲染子数据，以对所述待渲染数据进行渲染。


5.根据权利要求4所述的方法，其特征在于，
所述将所述数据结构补丁替换到所述第N个待渲染子数据上，以对所述待渲染数据进行渲染之...

【专利技术属性】
技术研发人员：范文中，
申请(专利权)人：OPPO广东移动通信有限公司，
类型：发明
国别省市：广东;44