CN112650435A - 页面内容滚动处理方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本发明涉及数据处理技术领域，公开了一种页面内容滚动处理方法、装置、计算机设备及存储介质，所述页面内容滚动处理方法包括：获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构；对所述树结构进行逐层遍历，并监听树结构中遍历到的层对应的多个属性；响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较；根据比较得到的结果生成目标数组；触发渲染页面函数并根据所述目标数组对所述描述性文本进行渲染得到目标页面；调用循环遍历渲染样式并对所述目标页面进行滚动展示。本发明可以提高页面内容滚动的处理速率以及准确率。

Description

页面内容滚动处理方法、装置、计算机设备及存储介质

技术领域

本发明涉及数据处理技术领域，尤其涉及一种页面内容滚动处理方法、装置、计算机设备及存储介质。

背景技术

目前市场上的页面内容滚动组件大都是以图片的格式进行渲染，大小规格受限，延展性差，灵活度不高，改动困难，并且使用时，要求多，需要大量的传入属性，来控制其特性展示。而且经常出现页面内容滚动不能满足内容自动适应分辨率的问题。在其基础上更改页面内容滚动代码，不仅浪费人力和需要巨大的时间，增加修改的成本，还不能保证改造后的功能是否会出现其他问题，无法预测其风险。

因此，如何提高页面内容滚动的处理速率成为亟待解决的问题。

发明内容

鉴于以上内容，有必要提出一种页面内容滚动处理方法、装置、计算机设备及存储介质，能够提高页面内容滚动的处理速率以及准确率。

本发明的第一方面提供了一种页面内容滚动处理方法，所述页面内容滚动处理方法包括：

获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构；

对所述树结构进行逐层遍历，并监听所述树结构中遍历到的层对应的多个属性；

响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较；

根据比较得到的结果生成目标数组；

触发渲染页面函数并根据所述目标数组对所述描述性文本进行渲染得到目标页面；

调用循环遍历渲染样式并对所述目标页面进行滚动展示。

根据本发明的一个可选的实施例，所述生成所述描述性文本对应的树结构包括：

对所述描述性文本进行解析，得到多个属性和所述多个属性对应的属性标签；

确定每个所述属性对应的属性标签在预设的标签体系中对应的标签层级，并根据所述标签层级的高低确定每个所述属性的重要度；

根据所述重要度的大小确定每个所述属性在树结构中的节点层级；

根据每个所述属性对应的节点层级生成所述描述性文本对应的树结构。

根据本发明的一个可选的实施例，所述触发数据处理函数并对所述目标属性的新值与旧值进行比较包括：

获取所述目标属性的新值，及所述新值的第一存储参数；

获取所述目标属性的旧值，及所述旧值的第二存储参数；

确定所述第一存储参数对应的第一位数，及确定所述第二存储参数对应的第二位数；

触发所述数据处理函数根据所述第一位数和所述第二位数进行所述新值和所述旧值的比较。

根据本发明的一个可选的实施例，所述根据比较得到的结果生成目标数组包括：

当比较得到的结果为所述第一位数大于所述第二位数时，计算所述第一位数与所述第二位数的位数差；根据所述位数差对所述旧值进行补位处理；并根据补位处理后的旧值生成旧值数组；

当比较得到的结果为所述第一位数小于所述第二位数时，根据所述第一位数对所述旧值进行截取处理；并根据截取得到的旧值生成旧值数组；

将所述新值进行数据转换，得到新值数组；

将所述旧值数组和所述新值数组进行数据拼接得到目标数组。

根据本发明的一个可选的实施例，所述将所述旧值数组和所述新值数组进行数据拼接得到目标数组之后，所述方法还包括：

判断所述目标数组是否大于预设的长度阈值；

当所述目标数组大于所述预设的长度阈值时，按照预设的滑动步长对所述目标数组进行分区标记处理，得到分区标记后的目标数组。

根据本发明的一个可选的实施例，所述触发渲染页面函数根据所述目标数组对所述描述性文本进行渲染得到目标页面包括：

解析所述描述性文本对应的层叠样式表构建层叠树；

根据所述层叠树和所述描述性文本对应的树结构生成渲染树；

触发渲染页面函数根据所述目标数组对所述渲染树进行渲染得到目标页面。

根据本发明的一个可选的实施例，所述调用循环遍历渲染样式对所述目标页面进行滚动展示包括：

判断所述新值的位数是否大于预设位数阈值；

当所述新值的位数大于所述预设位数阈值时，对所述新值对应的新值数组进行分割，得到多个新值子数组；

调用循环遍历渲染样式遍历每个所述新值子数组中的每一个新值元素；

确定所述目标页面中与每个所述新值元素的位置相同的内容标签元素；

将每个所述内容标签元素进行拼接，并将拼接后的内容标签元素写入所述描述性文本中；

使用dom元素实例根据所述描述性文本对所述目标页面进行滚动显示。

本发明的第二方面提供了一种页面内容滚动处理装置，所述装置包括：

页面处理模块，用于获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构；

属性监听模块，用于对所述树结构进行逐层遍历，并监听所述树结构中遍历到的层对应的多个属性；

属性比较模块，用于响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较；

数组生成模块，用于根据所述比较得到的结果生成目标数组；

页面渲染模块，用于触发渲染页面函数并根据所述目标数组对所述描述性文本进行渲染得到目标页面；

页面展示模块，用于调用循环遍历渲染样式并对所述目标页面进行滚动展示。

本发明的第三方面提供了一种计算机设备，所述计算机设备包括存储器和处理器；所述存储器用于存储计算机程序；所述处理器，用于执行所述计算机程序并在执行所述计算机程序时实现如上述的页面内容滚动处理方法。

本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时使所述处理器实现如上述的页面内容滚动处理方法。

本发明实施例公开了一种页面内容滚动处理方法、装置、计算机设备及存储介质，通过获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构，使用树结构可以全面表现描述性文本的结构，方便对描述性文本的访问、修改、添加和删除等操作，从而加快了对页面内容进行滚动处理的处理效率，然后对所述树结构进行逐层遍历，并监听所述树结构中遍历到的层对应的多个属性，通过监听所述树结构中的属性值可及时获取所述树结构中属性的变化，从而加快数据滚动处理的速率，响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较，并根据比较得到的结果生成目标数组，通过对新值和旧值的比较可得到更准确的目标数组，从而提高渲染的准确性，接着触发渲染页面函数根据所述目标数组对所述描述性文本进行渲染得到目标页面，最后调用循环遍历渲染样式对所述目标页面进行滚动展示。本发明可以提高页面内容滚动的处理速率以及准确率。

附图说明

图1是本发明实施例提供的一种页面内容滚动处理方法的流程示意图；

图2是本发明实施例提供的一种页面内容滚动处理装置的示意性框图；

图3是本发明实施例提供的一种计算机设备的结构示意性框图。

具体实施方式

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

附图中所示的流程图仅是示例说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解、组合或部分合并，因此实际执行的顺序有可能根据实际情况改变。

本发明实施例提供一种页面内容滚动处理方法、装置、计算机设备及计算机可读存储介质。其中，该页面内容滚动处理方法可应用于终端设备或服务器中，该终端设备可以手机、平板电脑、笔记本电脑、台式电脑、个人数字助理和穿戴式设备等电子设备，该服务器可以为单台的服务器，也可以为由多台服务器组成的服务器集群。以下以该页面内容滚动处理方法应用于服务器为例进行解释说明。

下面结合附图，对本发明的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。

请参阅图1，图1是本发明实施例提供的一种页面内容滚动处理方法的示意流程图。

如图1所示，所述页面内容滚动处理方法具体包括步骤S11至S16，根据不同的需求，该流程图中步骤的顺序可以改变，某些可以省略。

S11、获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构。

获取需要进行滚动处理的页面的文本，如描述性文本(html文本)，并根据所述描述性文本生成该描述性文本对应的树结构。所述树结构可包括文档对象模型(DocumentObject Model，DOM)。树结构可以全面表现描述性文本的结构，方便对描述性文本的访问、修改、添加和删除等操作，从而加快了对页面内容进行滚动处理的处理效率。

在一些实施方式中，所述生成所述描述性文本对应的树结构包括：

对所述描述性文本进行解析，得到多个属性和所述多个属性对应的属性标签；

确定每个所述属性对应的属性标签在预设的标签体系中对应的标签层级，并根据所述标签层级的高低确定每个所述属性的重要度；

根据所述重要度的大小确定每个所述属性在树结构中的节点层级；

根据每个所述属性对应的节点层级生成所述描述性文本对应的树结构。

其中，所述多个属性可包括标题类(TITLE)、正文类(CONTENT)、视觉类(VISION)、分块类(BLOCK)、超链类(LINK)和其他类(OTHER)等，预先设置标签体系，所述标签体系中包括多个属性标签和各属性标签对应的标签层级，如一级标签、二级标签等，示例性的，所述标签层级高的属性对应的重要度也大，所述标签体系可由用户进行自定义。重要度大的属性对应的节点层级也越高。根据描述性文本中属性对应的属性标签生成描述性文本对应的树结构，可使得树结构更准确地表现描述性文本的结构。

S12、对所述树结构进行逐层遍历，并监听所述树结构中遍历到的层对应的多个属性。

示例性的，可采用事件(watch)监听的方式监听所述树结构中的属性值，例如可采用事件监听中深入(deep)监听的方式监听所述树结构中的属性值，也就是在所述树结构中层层遍历，并在所述树结构中的每个属性上都添加监听，深入监听可全面监听所述树结构，避免信息遗漏，从而提高数字滚动处理的准确率。

S13、响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较。

将任意一个状态发生改变的属性称之为目标属性。所述状态可以包括：属性的值，属性的属性标签。

当监听到所述树结构中的属性值发生变化时，响应于所述属性值变化，获取新的属性值，即新值，触发数据处理函数进行新值和旧值的比较。

在一些实施方式中，所述触发数据处理函数并对所述目标属性的新值与旧值进行比较包括：

获取所述目标属性的新值，及所述新值的第一存储参数；

获取所述目标属性的旧值，及所述旧值的第二存储参数；

确定所述第一存储参数对应的第一位数，及确定所述第二存储参数对应的第二位数；

触发所述数据处理函数根据所述第一位数和所述第二位数进行所述新值和所述旧值的比较。

示例性的，可根据值的存储参数确定值的位数。例如数据处理函数根据所述新值的存储参数确定所述新值的位数，根据所述旧值的存储参数确定进行所述旧值的位数，将所述新值的位数和所述旧值的位数进行比较得到比较结果。

其中，比较得到的结果包括：所述第一位数大于所述第二位数，所述第一位数等于所述第一位数或所述第一位数小于所述第二位数。

S14、根据比较得到的结果生成目标数组。

根据所述比较得到的结果对所述新值和所述旧值进行处理，得到目标数组，所述目标数组用于对所述描述性文本进行渲染。

在一些实施方式中，所述根据所述比较得到的结果生成目标数组包括：

当比较得到的结果为所述第一位数大于所述第二位数时，计算所述第一位数与所述第二位数的位数差；根据所述位数差对所述旧值进行补位处理；并根据补位处理后的旧值生成旧值数组；

当比较得到的结果为所述第一位数小于所述第二位数时，根据所述第一位数对所述旧值进行截取处理；并根据截取得到的旧值生成旧值数组；

将所述新值进行数据转换，得到新值数组；

将所述旧值数组和所述新值数组进行数据拼接得到目标数组。

示例性的，根据所述比较得到的结果确定所述新值的位数大于旧值的位数时，即所述第一位数大于所述第二位数时，根据位数差对所述旧值进行补位操作，例如位数差为1时，在所述旧值的最左边增加一个预设的***数字，如0，根据补位后的旧值得到旧值数组。例如，新值为1000，旧值为100，则补位后的旧值为0100，得到旧值数组为[0，1，0，0]。

示例性的，根据所述比较得到的结果确定所述新值的位数小于旧值的位数时，即所述第一位数小于所述第二位数时，根据新值的位数对所述旧值进行截取操作，例如新值的位数为3时，从所述旧值的最右边开始截取3位数作为处理后的旧值，根据处理后的旧值得到旧值数组。例如，新值为100，旧值为1000，则截取处理后的旧值为000，得到旧值数组为[0，0，0]。

示例性的，当所述比较得到的结果确定所述新值的位数等于旧值的位数时，即所述第一位数等于所述第二位数时，不对所述旧值进行处理，直接将所述旧值转换成数组形式，生成旧值数组。

示例性的，将所述新值转换成数组形式，如新值为1000，生成新值数组为[1，0，0，0]。

该可选的实施例中，根据所述比较得到的结果对所述旧值进行处理得到旧值数组；通过根据比较得到的结果对所述旧值进行处理，可以使得新值、旧值在格式上的统一，基于生成的旧值数组和生成的新值数组得到目标数组，便于后续根据目标数组对待滚动处理的页面进行渲染时，减少渲染时的错误率，从而加快数字滚动的处理效率。

示例性的，可根据预设的选取规则在所述旧值数组和所述新值数组中选取一数值作为目标数组。

通过将旧值数组中的数据和所述新值数组的数据进行拼接，可有效融合数据信息，使得目标数组中包含的信息量更全面，有利于提高渲染的成功率，从而加快数字滚动的处理效率。

在一些实施方式中，所述根据所述比较得到的结果得到目标数组之后，所述方法还包括：

判断所述目标数组是否大于预设的长度阈值；

当所述目标数组大于所述预设的长度阈值时，按照预设的滑动步长对所述目标数组进行分区标记处理，得到分区标记后的目标数组。

例如，预设的长度阈值为3，所述目标数组为[1，0，0，0，0，0]，所述目标数组大于预设的长度阈值，按照预设的滑动步长对所述目标数组进行分区标记处理，所述滑动步长可以与预设的长度阈值相同为3，当然也可以根据用户的需求进行自定义设置。示例性的，可在所述目标数组加入千位分隔符作为目标数组的分区标记。

通过对超过预设长度阈值的目标数组进行分区标记，可避免因目标数组过长导致渲染过程因意外中断时无法快速找到目标数组中中断的位置信息。

S15、触发渲染页面函数并根据所述目标数组对所述描述性文本进行渲染得到目标页面。

示例性的，所述渲染页面函数可以包括render函数。

在一些实施方式中，所述触发渲染页面函数根据所述目标数组对所述描述性文本进行渲染得到目标页面包括：

解析所述描述性文本对应的层叠样式表构建层叠树；

根据所述层叠树和所述描述性文本对应的树结构生成渲染树；

触发渲染页面函数根据所述目标数组对所述渲染树进行渲染得到目标页面。

示例性的，所述层叠样式表包括CSS，所述层叠树包括CSS树，当获取到CSS时，读取所述CSS中的节点(Token)，根据所述节点构建CSS树，其中CSS可以为ID或class。

通过构建渲染树对所述描述性文本进行渲染，可以提高遍历描述性文本的效率，从而加快对描述性文本的渲染效率。

S16、调用循环遍历渲染样式并对所述目标页面进行滚动展示。

示例性的，可以使用SASS的循环遍历渲染样式对渲染后的描述性文本进行滚动展示，如使用SASS中的for循环语法。使用SASS的循环遍历渲染样式可以减少数据滚动处理中代码的编写数量，加快数据滚动处理的速率。

在一个可选的实施例中，所述调用循环遍历渲染样式对所述目标页面进行滚动展示包括：

判断所述新值的位数是否大于预设位数阈值；

当所述新值的位数大于所述预设位数阈值时，对所述新值对应的新值数组进行分割，得到多个新值子数组；

调用循环遍历渲染样式遍历每个所述新值子数组中的每一个新值元素；

确定所述目标页面中与每个所述新值子数组的位数相同的内容标签元素；

将每个所述内容标签元素进行拼接，并将拼接后的内容标签元素写入所述描述性文本中；

使用dom元素实例根据所述描述性文本对所述目标页面进行滚动显示。

示例性的，预先设置新值的位数对应的位数阈值，当所述新值的位数大于所述预设位数阈值时，对所述新值对应的新值数组进行分割，得到多个新值子数组；根据预设位数阈值对新值数组进行分割，避免新值数组过长导致渲染失败的情况发生，提高了渲染的效率。例如预设的长度阈值为3，新值为10000，位数为5大于预设的长度阈值1，对所述新值对应的新值数组进行分割，得到两个新值子数组[1，0，0]，[0，0]。

调用循环遍历渲染样式遍历每个所述新值子数组中的每一个新值元素，如SASS的循环遍历渲染样式。并确定所述目标页面中与每个所述新值元素的位置相同的内容标签元素，并将确定的每个所述内容标签元素进行拼接后写入目标页面对应的描述性文本。使用dom元素实例根据所述描述性文本对所述目标页面进行滚动显示。例如可使用this.$refs.dom来获取dom元素实例。

需要说明的是，为了保证上述页面内容滚动处理过程中的数据的私密性和安全性，所述页面内容滚动处理过程中的数据，比如描述性文本、树结构、属性、目标数组等可存储于区块链中。

上述实施例提供的页面内容滚动处理方法，通过获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构，使用树结构可以全面表现描述性文本的结构，方便对描述性文本的访问、修改、添加和删除等操作，从而加快了对页面内容进行滚动处理的处理效率，然后对所述树结构进行逐层遍历，并监听所述树结构中遍历到的层对应的多个属性，通过监听所述树结构中的属性值可及时获取所述树结构中属性的变化，从而加快数据滚动处理的速率，响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较，并根据比较得到的结果生成目标数组，通过对新值和旧值的比较可得到更准确的目标数组，从而提高渲染的准确性，接着触发渲染页面函数根据所述目标数组对所述描述性文本进行渲染得到目标页面，最后调用循环遍历渲染样式对所述目标页面进行滚动展示。本发明可以提高页面内容滚动的处理速率以及准确率。

请参阅图2，图2是本发明的实施例提供的一种页面内容滚动处理装置的示意性框图。

在一些实施例中，页面内容滚动处理装置20可以包括多个由计算机程序段所组成的功能模块页面内容滚动处理装置20中的各个程序段的计算机程序可以存储于电子设备的存储器中，并由至少一个处理器所执行，以执行(详见图1描述)页面内容滚动处理的功能，该页面内容滚动处理装置可以配置于服务器或终端中。

其中，服务器可以为独立的服务器，也可以为服务器集群。该终端可以是手机、平板电脑、笔记本电脑、台式电脑、个人数字助理和穿戴式设备等电子设备。

本实施例中，页面内容滚动处理装置20根据其所执行的功能，可以被划分为多个功能模块。如图2所示，所述功能模块可以包括：页面处理模块201、属性监听模块202、属性比较模块203、数组生成模块204、页面渲染模块205和页面展示模块206。本发明所称的模块是指一种能够被至少一个处理器所执行并且能够完成固定功能的一系列计算机程序段，其存储在存储器中。在本实施例中，关于各模块的功能将在后续的实施例中详述。

页面处理模块201，用于获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构。

获取需要进行滚动处理的页面的文本，如描述性文本(html文本)，并根据所述描述性文本生成该描述性文本对应的树结构。所述树结构可包括文档对象模型(DocumentObject Model，DOM)。树结构可以全面表现描述性文本的结构，方便对描述性文本的访问、修改、添加和删除等操作，从而加快了对页面内容进行滚动处理的处理效率。

在一些实施方式中，所述页面处理模块201生成所述描述性文本对应的树结构包括：

对所述描述性文本进行解析，得到多个属性和所述多个属性对应的属性标签；

确定每个所述属性对应的属性标签在预设的标签体系中对应的标签层级，并根据所述标签层级的高低确定每个所述属性的重要度；

根据所述重要度的大小确定每个所述属性在树结构中的节点层级；

根据每个所述属性对应的节点层级生成所述描述性文本对应的树结构。

其中，所述多个属性可包括标题类(TITLE)、正文类(CONTENT)、视觉类(VISION)、分块类(BLOCK)、超链类(LINK)和其他类(OTHER)等，预先设置标签体系，所述标签体系中包括多个属性标签和各属性标签对应的标签层级，如一级标签、二级标签等，示例性的，所述标签层级高的属性对应的重要度也大，所述标签体系可由用户进行自定义。重要度大的属性对应的节点层级也越高。根据描述性文本中属性对应的属性标签生成描述性文本对应的树结构，可使得树结构更准确地表现描述性文本的结构。

属性监听模块202，用于对所述树结构进行逐层遍历，并监听所述树结构中遍历到的层对应的多个属性。

示例性的，可采用事件(watch)监听的方式监听所述树结构中的属性值，例如可采用事件监听中深入(deep)监听的方式监听所述树结构中的属性值，也就是在所述树结构中层层遍历，并在所述树结构中的每个属性上都添加监听，深入监听可全面监听所述树结构，避免信息遗漏，从而提高数字滚动处理的准确率。

属性比较模块203，用于响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较。

将任意一个状态发生改变的属性称之为目标属性。所述状态可以包括：属性的值，属性的属性标签。

当监听到所述树结构中的属性值发生变化时，响应于所述属性值变化，获取新的属性值，即新值，触发数据处理函数进行新值和旧值的比较。

在一些实施方式中，所述属性比较模块203触发数据处理函数并对所述目标属性的新值与旧值进行比较包括：

获取所述目标属性的新值，及所述新值的第一存储参数；

获取所述目标属性的旧值，及所述旧值的第二存储参数；

确定所述第一存储参数对应的第一位数，及确定所述第二存储参数对应的第二位数；

触发所述数据处理函数根据所述第一位数和所述第二位数进行所述新值和所述旧值的比较。

示例性的，可根据值的存储参数确定值的位数。例如数据处理函数根据所述新值的存储参数确定所述新值的位数，根据所述旧值的存储参数确定进行所述旧值的位数，将所述新值的位数和所述旧值的位数进行比较得到比较结果。

其中，比较得到的结果包括：所述第一位数大于所述第二位数，所述第一位数等于所述第一位数或所述第一位数小于所述第二位数。

数组生成模块204，用于根据比较得到的结果生成目标数组。

根据所述比较得到的结果对所述新值和所述旧值进行处理，得到目标数组，所述目标数组用于对所述描述性文本进行渲染。

在一些实施方式中，所述数组生成模块204根据所述比较得到的结果生成目标数组包括：

当比较得到的结果为所述第一位数大于所述第二位数时，计算所述第一位数与所述第二位数的位数差；根据所述位数差对所述旧值进行补位处理；并根据补位处理后的旧值生成旧值数组；

当比较得到的结果为所述第一位数小于所述第二位数时，根据所述第一位数对所述旧值进行截取处理；并根据截取得到的旧值生成旧值数组；

将所述新值进行数据转换，得到新值数组；

将所述旧值数组和所述新值数组进行数据拼接得到目标数组。

示例性的，根据所述比较得到的结果确定所述新值的位数大于旧值的位数时，即所述第一位数大于所述第二位数时，根据位数差对所述旧值进行补位操作，例如位数差为1时，在所述旧值的最左边增加一个预设的***数字，如0，根据补位后的旧值得到旧值数组。例如，新值为1000，旧值为100，则补位后的旧值为0100，得到旧值数组为[0，1，0，0]。

示例性的，根据所述比较得到的结果确定所述新值的位数小于旧值的位数时，即所述第一位数小于所述第二位数时，根据新值的位数对所述旧值进行截取操作，例如新值的位数为3时，从所述旧值的最右边开始截取3位数作为处理后的旧值，根据处理后的旧值得到旧值数组。例如，新值为100，旧值为1000，则截取处理后的旧值为000，得到旧值数组为[0，0，0]。

示例性的，当所述比较得到的结果确定所述新值的位数等于旧值的位数时，即所述第一位数等于所述第二位数时，不对所述旧值进行处理，直接将所述旧值转换成数组形式，生成旧值数组。

示例性的，将所述新值转换成数组形式，如新值为1000，生成新值数组为[1，0，0，0]。该可选的实施例中，根据所述比较得到的结果对所述旧值进行处理得到旧值数组；通过根据比较得到的结果对所述旧值进行处理，可以使得新值、旧值在格式上的统一，基于生成的旧值数组和生成的新值数组得到目标数组，便于后续根据目标数组对待滚动处理的页面进行渲染时，减少渲染时的错误率，从而加快数字滚动的处理效率。

示例性的，可根据预设的选取规则在所述旧值数组和所述新值数组中选取一数值作为目标数组。

通过将旧值数组中的数据和所述新值数组的数据进行拼接，可有效融合数据信息，使得目标数组中包含的信息量更全面，有利于提高渲染的成功率，从而加快数字滚动的处理效率。

在一些实施方式中，所述数组生成模块204根据所述比较得到的结果得到目标数组之后，所述数组生成模块204还用于：

判断所述目标数组是否大于预设的长度阈值；

当所述目标数组大于所述预设的长度阈值时，按照预设的滑动步长对所述目标数组进行分区标记处理，得到分区标记后的目标数组。

例如，预设的长度阈值为3，所述目标数组为[1，0，0，0，0，0]，所述目标数组大于预设的长度阈值，按照预设的滑动步长对所述目标数组进行分区标记处理，所述滑动步长可以与预设的长度阈值相同为3，当然也可以根据用户的需求进行自定义设置。示例性的，可在所述目标数组加入千位分隔符作为目标数组的分区标记。

通过对超过预设长度阈值的目标数组进行分区标记，可避免因目标数组过长导致渲染过程因意外中断时无法快速找到目标数组中中断的位置信息。

文本渲染模块205，用于触发渲染页面函数并根据所述目标数组对所述描述性文本进行渲染得到目标页面。

示例性的，所述渲染页面函数可以包括render函数。

在一些实施方式中，所述文本渲染模块205触发渲染页面函数根据所述目标数组对所述描述性文本进行渲染得到目标页面包括：

解析所述描述性文本对应的层叠样式表构建层叠树；

根据所述层叠树和所述描述性文本对应的树结构生成渲染树；

触发渲染页面函数根据所述目标数组对所述渲染树进行渲染得到目标页面。

示例性的，所述层叠样式表包括CSS，所述层叠树包括CSS树，当获取到CSS时，读取所述CSS中的节点(Token)，根据所述节点构建CSS树，其中CSS可以为ID或class。

通过构建渲染树对所述描述性文本进行渲染，可以提高遍历描述性文本的效率，从而加快对描述性文本的渲染效率。

页面展示模块206，用于调用循环遍历渲染样式并对所述目标页面进行滚动展示。示例性的，可以使用SASS的循环遍历渲染样式对渲染后的描述性文本进行滚动展示，如使用SASS中的for循环语法。使用SASS的循环遍历渲染样式可以减少数据滚动处理中代码的编写数量，加快数据滚动处理的速率。

在一个可选的实施例中，所述页面展示模块206调用循环遍历渲染样式对所述目标页面进行滚动展示包括：

判断所述新值的位数是否大于预设位数阈值；

当所述新值的位数大于所述预设位数阈值时，对所述新值对应的新值数组进行分割，得到多个新值子数组；

调用循环遍历渲染样式遍历每个所述新值子数组中的每一个新值元素；

确定所述目标页面中与每个所述新值子数组的位数相同的内容标签元素；

将每个所述内容标签元素进行拼接，并将拼接后的内容标签元素写入所述描述性文本中；

使用dom元素实例根据所述描述性文本对所述目标页面进行滚动显示。

示例性的，预先设置新值的位数对应的位数阈值，当所述新值的位数大于所述预设位数阈值时，对所述新值对应的新值数组进行分割，得到多个新值子数组；根据预设位数阈值对新值数组进行分割，避免新值数组过长导致渲染失败的情况发生，提高了渲染的效率。例如预设的长度阈值为3，新值为10000，位数为5大于预设的长度阈值1，对所述新值对应的新值数组进行分割，得到两个新值子数组[1，0，0]，[0，0]。

调用循环遍历渲染样式遍历每个所述新值子数组中的每一个新值元素，如SASS的循环遍历渲染样式。并确定所述目标页面中与每个所述新值元素的位置相同的内容标签元素，并将确定的每个所述内容标签元素进行拼接后写入目标页面对应的描述性文本。使用dom元素实例根据所述描述性文本对所述目标页面进行滚动显示。例如可使用this.$refs.dom来获取dom元素实例。

需要说明的是，为了保证上述页面内容滚动处理过程中的数据的私密性和安全性，所述页面内容滚动处理过程中的数据，比如描述性文本、树结构、属性、目标数组等可存储于区块链中。

上述实施例提供的页面内容滚动处理装置可以实现为一种计算机程序的形式，该计算机程序可以在如图3所示的计算机设备上运行。

请参阅图3，图3为本发明实施例提供的一种计算机设备的结构示意性框图。该计算机设备可以为服务器或终端设备。

如图3所示，该计算机设备30包括通过***总线连接的处理器301和存储器302，其中，存储器302可以包括非易失性存储介质和易失性存储介质。

存储器302可存储操作***和计算机程序。该计算机程序包括计算机可读指令，该计算机可读指令被执行时，可使得处理器301执行所述的页面内容滚动处理方法。

处理器301用于提供计算和控制能力，支撑整个计算机设备的运行。

在一可行实施例中，所述计算机设备还包括网络接口，所述网络接口用于进行网络通信，如发送分配的任务等。本领域技术人员可以理解，图3中示出的结构，仅仅是与本发明方案相关的部分结构的框图，并不构成对本发明方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

应当理解的是，处理器301是中央处理单元(Central Processing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。其中，通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

其中，在一个实施例中，所述处理器执行存储在存储器中的计算机程序，以实现如下步骤：

获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构；

对所述树结构进行逐层遍历，并监听所述树结构中遍历到的层对应的多个属性；

响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较；

根据比较得到的结果生成目标数组；

触发渲染页面函数并根据所述目标数组对所述描述性文本进行渲染得到目标页面；

调用循环遍历渲染样式并对所述目标页面进行滚动展示。

具体地，所述处理器对上述计算机程序的具体实现方法可参考前述页面内容滚动处理方法实施例中相关步骤的描述，在此不赘述。

本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序中包括计算机可读指令，所述计算机指令被执行时所实现的方法可参照本发明页面内容滚动处理方法的各个实施例。

其中，所述计算机可读存储介质可以是前述实施例所述的计算机设备的内部存储单元，例如所述计算机设备的硬盘或内存。所述计算机可读存储介质也可以是所述计算机设备的外部存储设备，例如所述计算机设备上配备的插接式硬盘，智能存储卡(SmartMedia Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。

进一步地，所述计算机可读存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

前述实施例提供的页面内容滚动处理装置、计算机设备及计算机可读存储介质，通过获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构，使用树结构可以全面表现描述性文本的结构，方便对描述性文本的访问、修改、添加和删除等操作，从而加快了对页面内容进行滚动处理的处理效率，然后对所述树结构进行逐层遍历，并监听所述树结构中遍历到的层对应的多个属性，通过监听所述树结构中的属性值可及时获取所述树结构中属性的变化，从而加快数据滚动处理的速率，响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较，并根据比较得到的结果生成目标数组，通过对新值和旧值的比较可得到更准确的目标数组，从而提高渲染的准确性，接着触发渲染页面函数根据所述目标数组对所述描述性文本进行渲染得到目标页面，最后调用循环遍历渲染样式对所述目标页面进行滚动展示。本发明可以提高页面内容滚动的处理速率以及准确率。

应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

还应当理解，在本发明说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者***不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者***所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者***中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种页面内容滚动处理方法，其特征在于，所述页面内容滚动处理方法包括：

获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构；

对所述树结构进行逐层遍历，并监听所述树结构中遍历到的层对应的多个属性；

响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较；

根据比较得到的结果生成目标数组；

触发渲染页面函数并根据所述目标数组对所述描述性文本进行渲染得到目标页面；

调用循环遍历渲染样式并对所述目标页面进行滚动展示。

2.根据权利要求1所述的页面内容滚动处理方法，其特征在于，所述生成所述描述性文本对应的树结构包括：

对所述描述性文本进行解析，得到多个属性和所述多个属性对应的属性标签；

确定每个所述属性对应的属性标签在预设的标签体系中对应的标签层级，并根据所述标签层级的高低确定每个所述属性的重要度；

根据所述重要度的大小确定每个所述属性在树结构中的节点层级；

根据每个所述属性对应的节点层级生成所述描述性文本对应的树结构。

3.根据权利要求1所述的页面内容滚动处理方法，其特征在于，所述触发数据处理函数并对所述目标属性的新值与旧值进行比较包括：

获取所述目标属性的新值，及所述新值的第一存储参数；

获取所述目标属性的旧值，及所述旧值的第二存储参数；

确定所述第一存储参数对应的第一位数，及确定所述第二存储参数对应的第二位数；

触发所述数据处理函数根据所述第一位数和所述第二位数进行所述新值和所述旧值的比较。

4.根据权利要求3所述的页面内容滚动处理方法，其特征在于，所述根据比较得到的结果生成目标数组包括：

当比较得到的结果为所述第一位数大于所述第二位数时，计算所述第一位数与所述第二位数的位数差；根据所述位数差对所述旧值进行补位处理；并根据补位处理后的旧值生成旧值数组；

当比较得到的结果为所述第一位数小于所述第二位数时，根据所述第一位数对所述旧值进行截取处理；并根据截取得到的旧值生成旧值数组；

将所述新值进行数据转换，得到新值数组；

将所述旧值数组和所述新值数组进行数据拼接得到目标数组。

5.根据权利要求4所述的页面内容滚动处理方法，其特征在于，所述将所述旧值数组和所述新值数组进行数据拼接得到目标数组之后，所述方法还包括：

判断所述目标数组是否大于预设的长度阈值；

当所述目标数组大于所述预设的长度阈值时，按照预设的滑动步长对所述目标数组进行分区标记处理，得到分区标记后的目标数组。

6.根据权利要求1所述的页面内容滚动处理方法，其特征在于，所述触发渲染页面函数并根据所述目标数组对所述描述性文本进行渲染得到目标页面包括：

解析所述描述性文本对应的层叠样式表构建层叠树；

根据所述层叠树和所述描述性文本对应的树结构生成渲染树；

触发渲染页面函数并根据所述目标数组对所述渲染树进行渲染得到目标页面。

7.根据权利要求1-6中任意一项所述的页面内容滚动处理方法，其特征在于，所述调用循环遍历渲染样式并对所述目标页面进行滚动展示包括：

判断所述新值的位数是否大于预设位数阈值；

当所述新值的位数大于所述预设位数阈值时，对所述新值对应的新值数组进行分割，得到多个新值子数组；

调用循环遍历渲染样式遍历每个所述新值子数组中的每一个新值元素；

确定所述目标页面中与每个所述新值元素的位置相同的内容标签元素；

将每个所述内容标签元素进行拼接，并将拼接后的内容标签元素写入所述描述性文本中；

使用dom元素实例根据所述描述性文本对所述目标页面进行滚动显示。

8.一种页面内容滚动处理装置，其特征在于，包括：

页面处理模块，用于获取需滚动处理的页面对应的描述性文本，并生成所述描述性文本对应的树结构；

属性监听模块，用于对所述树结构进行逐层遍历，并监听所述树结构中遍历到的层对应的多个属性；

属性比较模块，用于响应于监听到的目标属性的状态改变，触发数据处理函数并对所述目标属性的新值与旧值进行比较；

数组生成模块，用于根据比较得到的结果生成目标数组；

页面渲染模块，用于触发渲染页面函数并根据所述目标数组对所述描述性文本进行渲染得到目标页面；

页面展示模块，用于调用循环遍历渲染样式并对所述目标页面进行滚动展示。

9.一种计算机设备，其特征在于，所述计算机设备包括存储器和处理器；

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

所述处理器，用于执行所述计算机程序时实现如权利要求1至7中任一项所述的页面内容滚动处理方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的页面内容滚动处理方法。

Images