CN114840785A - 数据处理方法和装置、电子设备及存储介质 - Google Patents

Abstract

本公开实施例公开了一种数据处理方法和装置、电子设备及存储介质，所述方法包括：响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据；将所述目标数据渲染至所述第一页面。

Description

数据处理方法和装置、电子设备及存储介质

技术领域

本公开涉及但不限于计算机技术领域，尤其涉及一种数据处理方法和装置、电子设备及存储介质。

背景技术

相关技术中，渐进式框架(例如，Vue.js)提供自底向上的增量开发，用户可以根据实际需求选择目标组件，从而使得该框架已经广泛应用于页面的开发。将后端返回的数据展示在前端时，需要对返回的数据进行渲染。然而，在返回的数据量较大的情况下，前端直接对返回的所有数据进行全量渲染，容易造成卡顿、延迟等，从而影响用户的操作体验。

发明内容

本公开实施例至少提供一种数据处理方法和装置、电子设备及存储介质。

本公开实施例的技术方案是这样实现的：

本公开实施例提供一种数据处理方法，所述方法包括：

响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；

基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据；

将所述目标数据渲染至所述第一页面。

在一些实施方式中，所述基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，包括：确定所述第一页面中已显示的第一页面子数据在所述第一页面数据中的第一位置；基于所述第一位置和所述操作指令，从所述数据存储器中确定所述目标数据。

在本公开实施方式中，一方面，基于已显示的第一页面子数据在第一页面数据中的第一位置和操作指令，可以准确从第一页面数据中得到待渲染的目标数据；另一方面，直接从前端的数据存储器中获取待渲染的目标数据，可以缩短与后端的交互时间，使得交互更加流畅，从而可以改善用户的操作体验。

在一些实施方式中，所述基于所述第一位置和所述操作指令，从所述数据存储器中确定所述目标数据，包括：基于所述操作指令和所述第一位置，确定第二位置；基于所述第二位置，从所述数据存储器中确定所述目标数据。

在本公开实施方式中，基于操作指令和第一位置，可以得到待渲染的目标数据在第一页面数据中的第二位置。这样，一方面，基于该第二位置，便可以准确得到待渲染的目标数据；另一方面，直接从前端的数据存储器中获取待渲染的目标数据，可以缩短与后端的交互时间，使得交互更加流畅，从而可以改善用户的操作体验。

在一些实施方式中，所述基于所述操作指令和所述第一位置，确定第二位置，包括：基于所述操作指令，确定偏移量；基于所述第一位置和所述偏移量，确定第二位置。

在本公开实施方式中，不同的操作指令对应不同的偏移量，可以使得第二位置更加准确，从而得到更加准确的目标数据。

在一些实施方式中，所述基于所述操作指令，确定偏移量，包括以下之一：在所述操作指令包括加载指令的情况下，基于预设的加载长度，确定所述偏移量；在所述操作指令包括翻页指令的情况下，基于所述翻页的页数和每一页的页面数据的长度，确定所述偏移量。

在本公开实施方式中，不同的操作指令对应不同的偏移量，基于该偏移量，使得前端每次渲染等量的少量数据。这样，通过减小渲染的数据量，可以减少渲染时长，从而可以减小页面卡顿、延迟的可能性，进而可以改善用户的操作体验。

在一些实施方式中，所述第一位置包括第一起始位置和第一结束位置，所述第二位置包括第二起始位置和第二结束位置，所述基于所述第一位置和所述偏移量，确定第二位置，包括：基于所述第一起始位置和所述偏移量，确定所述第二起始位置；基于所述第一结束位置和所述偏移量，确定所述第二结束位置。

在一些实施方式中，所述基于所述第二位置，从所述数据存储器中确定所述目标数据，包括：利用所述数据存储器的第一数据接口，基于所述第二位置，从所述数据存储器中确定所述目标数据。

在本公开实施方式中，数据存储器提供第一数据接口，通过该第一数据接口来快速得到待渲染的目标数据。这样，可以缩短获取目标数据的时间。

在一些实施方式中，所述方法还包括：获取所述第一页面的第二页面数据；对所述第二页面数据进行预处理，得到所述第一页面数据，并将所述第一页面数据存储至所述数据存储器中。

在本公开实施方式中，通过优化第二页面数据的结构，一方面，可以便于后期对数据的操作；另一方面，可以降低数据内存的消耗。

本公开实施例提供一种数据处理装置，包括：

第一确定模块，用于响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；

第二确定模块，用于基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据；

第一显示模块，用于将所述目标数据渲染至所述第一页面。

本公开实施例提供一种电子设备，包括处理器和存储器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述数据处理方法。

本公开实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述数据处理方法。

本公开实施例提供一种计算机程序产品，所述计算机程序产品包括存储了计算机程序的非瞬时性计算机可读存储介质，所述计算机程序被计算机读取并执行时，实现上述数据处理方法。

本公开实施例中，通过响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据；将所述目标数据渲染至所述第一页面。这样，一方面，从第一页面数据中确定待渲染的目标数据，通过减小渲染的数据量，可以减少渲染时长，从而可以减小页面卡顿、延迟的可能性，进而可以改善用户的操作体验；另一方面，直接从前端的数据存储器中获取待渲染的目标数据，可以缩短与后端的交互时间，使得交互更加流畅，从而可以进一步改善用户的操作体验。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，而非限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。

图1为本公开实施例提供的一种数据处理方法的实现流程示意图；

图2为本公开实施例提供的一种数据处理方法的实现流程示意图；

图3为本公开实施例提供的一种数据处理方法的实现流程示意图；

图4A为本公开实施例提供的一种数据处理系统的组成结构示意图；

图4B为本公开实施例提供的一种第一页面的示意图；

图4C为本公开实施例提供的一种数据处理系统的执行流程的示意图；

图5为本公开实施例提供的一种数据处理装置的组成结构示意图；

图6为本公开实施例中电子设备的一种硬件实体示意图。

具体实施方式

为了使本公开的目的、技术方案和优点更加清楚，下面将结合附图对本公开作进一步地详细描述，所描述的实施例不应视为对本公开的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本公开保护的范围。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。

在以下的描述中，所涉及的术语“第一\第二\第三”仅仅是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本公开实施例能够以除了在这里图示或描述的以外的顺序实施。

除非另有定义，本文所使用的所有的技术和科学术语与属于本公开的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本公开实施例的目的，不是旨在限制本公开。

相关技术中，渐进式框架(例如，Vue.js)提供自底向上的增量开发，用户可以根据实际需求选择目标组件，从而使得该框架已经广泛应用于页面的开发。通常情况下，将后端返回的数据展示在前端时，需要对数据进行渲染。然而，在有些业务场景中，经常会出现数据量比较大的情况下，此时前端并不会对数据进行处理，而是直接对返回的所有数据进行全量渲染，这样会使得内存占用较多，容易带来页面卡顿、延迟、内存泄漏等问题，从而影响用户的操作体验。

本公开实施例提供一种数据处理方法，一方面，从第一页面数据中确定待渲染的目标数据，通过减小渲染的数据量，可以减少渲染时长，从而可以减小页面卡顿、延迟的可能性，进而可以改善用户的操作体验；另一方面，直接从前端的数据存储器中获取待渲染的目标数据，可以缩短与后端的交互时间，使得交互更加流畅，从而可以进一步改善用户的操作体验。本公开实施例提供的数据处理方法可以由电子设备执行，其中电子设备可以是笔记本电脑，平板电脑，台式计算机，机顶盒，移动设备(例如，移动电话，便携式音乐播放器，个人数字助理，专用消息设备，便携式游戏设备)等各种类型的终端，也可以实施为服务器。服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

下面，将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述。

图1为本公开实施例提供的一种数据处理方法的实现流程示意图，如图1所示，该方法包括步骤S11至步骤S13，其中：

步骤S11、响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令。

这里，第一页面至少包括内容控件和操作控件等的交互界面。其中，内容控件用于展示第一页面的页面数据，操作控件表征可以让用户操作的控件。该操作控件可以包括但不限于关闭控件、返回控件、加载控件、翻页控件、跳转控件、搜索控件、浏览组件等。

在一些实施方式中，第一页面可以显示在任意合适的具有界面交互功能的电子设备上。在实施时，显示第一页面的电子设备与执行该数据处理方法的设备可以是相同的，也可以是不同的，这里并不限定。例如，执行该数据处理方法的电子设备可以为笔记本电脑，显示第一页面的电子设备也可以为该笔记本电脑，第一页面可以为该笔记本电脑上运行的客户端的交互界面，也可以是该笔记本电脑上运行的浏览器中显示的网页。又如，执行该数据处理方法的计算机设备可以为服务器，显示第一页面的电子设备可以为笔记本电脑，第一页面可以为该笔记本电脑上运行的客户端的交互界面，也可以是该笔记本电脑上运行的浏览器中显示的网页，该笔记本电脑可以通过该客户端或者浏览器访问该服务器。

交互请求可以包括但不限于加载请求、翻页请求、关闭请求、刷新请求、滚动请求等。在一些实施方式中，交互请求可以是用户通过输入组件在第一页面中输入/选择的指令或手势。这里，输入组件可以包括但不限于键盘、鼠标、触控屏、触控板、音频输入器等。例如，用户在第一页面中输入预设的加载手势；又例如，用户双击上一页控件。交互请求也可以是用户发出的语音信息，例如，用户发出“加载更多”的语音。交互请求还可以是用户发出的远程控制请求，例如，用户在其它电子设备上的操作界面选择“加载控件”，通过蓝牙或者无线网络等方式将该交互请求发送给电子设备。这里的交互请求作为示例，本公开实施例不作限定。

操作指令可以包括但不限于加载更多、刷新、向上滑动(滚动)、向下滑动(滚动)、向上翻一页、向下翻一页、翻到指定页、跳转至首页、跳转至末页、跳转至指定内容等。

在一些实施方式中，操作指令可以包括但不限于指令信息、指令信息及操作内容等。其中，指令信息可以包括但不限于加载、刷新、滑动、翻页等。操作信息可以包括但不限于方向、距离、页数等。例如，该操作指令可以为向上翻一页。又例如，该操作指令可以为加载更多。

在一些实施方式中，可以预先建立交互请求与操作指令的对应关系，根据该对应关系便可以得到该交互请求对应的操作指令，并将该对应关系存储在电子设备中，也可以存储在其它电子设备中。在对应关系存储在电子设备的情况下，电子设备根据该交互请求，在对应关系中确定与交互请求匹配的操作指令。在对应关系存储在其它电子设备的情况下，电子设备将交互请求发送给其它电子设备，使得其它电子设备根据该交互请求，在对应关系中确定与交互请求匹配的操作指令，并返回对应的操作指令至电子设备中。

步骤S12、基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据。

这里，数据存储器存储至少一个第一页面数据，每一第一页面数据分别对应一个第一页面中内容组件展示的数据。在一些实施方式中，该数据存储器可以是浏览器的存储器，渐进式框架中的存储器等。在实施时，本领域技术人员可以根据实际需求自主确定数据存储器的实现方式，本公开不作限定。

在一些实施方式中，第一页面数据包括已显示的第一页面子数据和待显示的第二页面子数据。在一些实施方式中，第一页面数据可以包括至少一条记录，每一条记录表征一个对象，每一对象具有至少一个属性字段，该属性字段表征该对象的属性信息。该属性信息可以包括但不限于对象名、时间、地点、事件等。

目标数据可以是从第一页面数据中确定的部分数据。在一些实施方式中，目标数据可以是待显示的第二页面子数据的部分数据，也可以是已显示的第一页面子数据中的部分数据和待显示的第二页面子数据中的部分数据。

例如，第一页面数据包括1000条记录，已显示的第一页面子数据包括第1条记录至第30条记录，待显示的第二页面子数据包括第31条记录至第1000条记录，此时目标数据可以是第31条记录至第60条记录。

又例如，第一页面数据包括1000条记录，已显示的第一页面子数据包括第1条记录至第30条记录，待显示的第二页面子数据包括第31条记录至第1000条记录，此时目标数据可以是第31条记录至第40条记录。

再例如，第一页面数据包括1000条记录，已显示的第一页面子数据包括第1条记录至第30条记录，待显示的第二页面子数据包括第31条记录至第1000条记录，此时目标数据可以是第21条记录至第50条记录(即：第一页面子数据中的第21条记录至第30条记录，以及第二页面子数据中的第31条记录至第50条记录)。

在一些实施方式中，不同的操作指令可以对应相同或不同数量的目标数据。在实施时，本领域技术人员可以根据实际需求自主确定操作指令和目标数据的数量之间的对应关系，本公开不作限定。

例如，在操作指令为向上翻一页的情况下，假设每页显示30条记录，已显示的第一页面子数据为第3页，即第61至90条记录，此时若目标数据为第2页，即为第31至60条记录，那么目标数据的数量则为30条记录。

又例如，在操作指令为加载更多的情况下，假设每次加载10条记录、每页显示30条记录，已显示的第一页面子数据为第41至70条记录，此时若目标数据为第51至80条记录，那么目标数据的数量则为30条记录。

再例如，在操作指令为加载更多的情况下，假设每次加载20条记录，已显示的第一页面子数据为第21至50条记录，此时若目标数据为第51至70条记录，那么目标数据的数量则为20条记录。

步骤S13、将所述目标数据渲染至所述第一页面。

这里，将目标数据装载到第一页面的内容控件中，以实现对目标数据进行渲染。在一些实施方式中，在目标数据为第二页面子数据中的部分数据的情况下，全量渲染所述目标数据。在目标数据包括第一页面子数据中的部分数据和第二页面子数据中的部分数据的情况下，可以只渲染第二页面子数据中的部分数据，也可以重新渲染目标数据。在实施时，本领域技术人员可以根据实际需求自主确定目标数据的渲染的方式，本公开不作限定。

本公开实施例中，通过响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据；将所述目标数据渲染至所述第一页面。这样，一方面，从第一页面数据中确定待渲染的目标数据，通过减小渲染的数据量，可以减少渲染时长，从而可以减小页面卡顿、延迟的可能性，进而可以改善用户的操作体验；另一方面，直接从前端的数据存储器中获取待渲染的目标数据，可以缩短与后端的交互时间，使得交互更加流畅，从而可以进一步改善用户的操作体验。

在一些实施方式中，所述方法还包括：

步骤S14、响应于在所述第一页面上接收到的关闭请求，从所述数据存储器中删除所述第一页面数据。

这里，关闭请求可以是用户在第一页面中输入/选择的指令或者手势。例如，用户在第一页面中输入预设的关闭手势“X”，又例如，用户点击关闭控件。关闭请求也可以是用户发出的语音请求，例如，用户发出“关闭第一页面”的语音。关闭请求还可以是用户发出的远程控制请求，例如，用户在其它电子设备上的操作界面选择“关闭控件”，通过蓝牙或者无线网络等方式将关闭请求发送给电子设备。这里的关闭请求作为示例，本公开实施例不作限定。

数据存储器存储至少一个第一页面数据，每一第一页面数据分别对应一个第一页面中内容组件展示的数据。在实施时，在第一页面处于挂起或者激活的状态下，需要保留第一页面对应的第一页面数据；在第一页面处于关闭或者销毁的状态下，需要删除与该第一页面对应的第一页面数据。

在本公开实施方式中，基于第一页面的状态，确定数据存储器中该第一页面对应的第一页面数据的保存状态。这样，可以使得内存能够及时释放，降低了内存泄漏的可能性。

图2为本公开实施例提供的一种数据处理方法的实现流程示意图，如图2所示，所述方法包括步骤S21至步骤S24，其中：

步骤S21、响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令。

上述步骤S21对应于前述步骤S11，在实施时，可以参照前述步骤S11的具体实施方式。

步骤S22、确定所述第一页面中已显示的第一页面子数据在所述第一页面数据中的第一位置。

这里，第一页面数据包括已显示的第一页面子数据和待显示的第二页面子数据。

在一些实施方式中，第一页面数据可以包括至少一条记录，每一条记录表征一个对象，每一对象具有至少一个属性字段，该属性字段表征该对象的属性信息。该属性信息可以包括但不限于对象名、时间、地点、事件等。

在一些实施方式中，每一条记录都具有一个位置。该位置可以包括但不限于索引、编号、在数据存储器中的存储位置等。该第一位置可以表示一个位置，也可以是一个区间。其中，该区间包括起始位置和结束位置。

例如，第一位置可以是编号1。又例如，该第一位置可以是索引30至索引40。在实施时，本领域技术人员可以根据实际需求自主确定第一位置的实现方式，本公开不作限定。

步骤S23、基于所述第一位置和所述操作指令，从所述数据存储器中确定所述目标数据。

这里，不同的操作指令可以对应相同或不同的偏移量，基于该第一位置和偏移量，便可以得到目标数据的位置，基于该位置，便可以获得目标数据。

例如，在操作指令为向上翻一页的情况下，假设每页显示30条记录，第一位置为第31至60条记录，此时偏移量为30条记录，那么目标数据的位置为第1至30条记录。

又例如，在操作指令为加载更多的情况下，假设每次加载10条记录、每页显示30条记录，第一位置为第41至70条记录，此时偏移量为10条记录，那么目标数据的位置为第51至80条记录。

还例如，在操作指令为加载更多的情况下，假设每次加载10条记录、每页显示20条记录，第一位置为第21至40条记录，此时偏移量为10条记录，那么目标数据的位置为第41至50条记录。

在实施时，本领域技术人员可以根据实际需求自主设定操作指令和偏移量之间的对应关系，本公开不作限定。

步骤S24、将所述目标数据渲染至所述第一页面。

上述步骤S24对应于前述步骤S13，在实施时，可以参照前述步骤S13的具体实施方式。

本公开实施例中，通过响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；确定所述第一页面中已显示的第一页面子数据在所述第一页面数据中的第一位置；基于所述第一位置和所述操作指令，从所述数据存储器中确定所述目标数据；将所述目标数据渲染至所述第一页面。这样，一方面，基于已显示的第一页面子数据在第一页面数据中的第一位置和操作指令，准确从第一页面数据中得到待渲染的目标数据，通过减小渲染的数据量，可以减少渲染时长，从而可以减小页面卡顿、延迟的可能性，进而可以改善用户的操作体验；另一方面，直接从前端的数据存储器中获取待渲染的目标数据，可以缩短与后端的交互时间，使得交互更加流畅，从而可以进一步改善用户的操作体验。

在一些实施方式中，所述步骤S23包括步骤S231至步骤S232，其中：

步骤S231、基于所述操作指令和所述第一位置，确定第二位置。

这里，不同的操作指令可以对应相同或不同的偏移量，基于该第一位置和偏移量，便可以得到第二位置。例如，对于翻页指令，偏移量可以是一页的页面数据的长度。又例如，对于加载指令，偏移量可以是预设的加载长度。还例如，对于跳转指令，偏移量可以是翻页的页数和每一页的页面数据的长度。在实施时，本领域技术人员可以根据实际需求自主设定操作指令和偏移量之间的对应关系，本公开不作限定。

在一些实施方式中，该预设的加载长度可以是预先设定的长度。例如，该预先设定的长度可以是每次加载20条记录。

在一些实施方式中，该预设的加载长度可以是根据预设规则进行调整得到的。其中，预设规则可以包括但不限于电子设备的系统配置、用户自定义、用户喜好、使用频率、用户操作信息等。在实施时，本领域技术人员可以根据实际需求自主设定预设规则，本公开不作限定。

例如，在第一页面中提供配置选项，通过该配置选项，用户可以自定义设置加载的长度。又例如，可以统计用户在不同页面中进行滑动操作时的滑动距离，基于每一距离值的均值、均方差等信息，实时调整加载长度。还例如，可以根据电子设备的屏幕的尺寸和字体大小等配置信息，确定加载长度。

在一些实施方式中，该预设的加载长度可以是基于用户在第一页面中的操作信息，确定加载长度。在实施时，本领域技术人员可以根据实际需求自主设定操作信息和加载长度之间的关系，本公开不作限定。

例如，根据滑动操作的滑动距离，实时确定加载长度。比如，滑动距离在第一区间内时，确定加载长度为第一加载长度；滑动距离在第二区间内时，确定加载长度为第二加载长度。在实施时，本领域技术人员可以根据实际需求自主设定滑动距离和加载长度之间的对应关系，本公开不作限定。

又例如，基于滑动操作的滑动距离和第一页面的高度，实时确定加载长度。比如，滑动距离对应滑动3条记录，此时加载长度则为3条记录；滑动距离对应滑动10条记录，此时加载长度则为10条记录等。

还例如，根据操作手势，实时确定加载长度。比如，不同的手势对应不同的加载长度，在用户输入操作手势“O”的情况下，此时加载长度为5条记录，在用户输入操作手势“V”的情况下，此时加载长度为10条记录。在实施时，本领域技术人员可以根据实际需求自主设定操作手势和加载长度之间的对应关系，本公开不作限定。

步骤S232、基于所述第二位置，从所述数据存储器中确定所述目标数据。

这里，从数据存储器中查找与第二位置匹配的数据作为目标数据。该第二位置可以是数据存储器中的存储位置，此时将该存储位置存储的数据作为目标数据。该第二位置也可以是索引、编号等标识信息，每一标识信息分别对应数据存储器的一个存储位置，那么基于该标识信息，可以确定与该标识信息匹配的存储位置，将该存储位置存储的数据作为目标数据。

在本公开实施方式中，基于操作指令和第一位置，可以从第一页面数据中得到目标数据的第二位置。这样，一方面，基于该第二位置，便可以准确得到待渲染的目标数据；另一方面，直接从前端的数据存储器中获取待渲染的目标数据，可以缩短与后端的交互时间，使得交互更加流畅，从而可以改善用户的操作体验。

在一些实施方式中，所述步骤S231包括步骤S241至步骤S242，其中：

步骤S241、基于所述操作指令，确定偏移量。

这里，不同的操作指令可以对应相同或不同的偏移量。例如，对于翻页指令，偏移量可以是一页的页面数据的长度。又例如，对于加载指令，偏移量可以是预设的加载长度。还例如，对于跳转指令，偏移量可以是翻页的页数和每一页的页面数据的长度。在实施时，本领域技术人员可以根据实际需求自主设定操作指令和偏移量之间的对应关系，本公开不作限定。

步骤S242、基于所述第一位置和所述偏移量，确定第二位置。

这里，第二位置可以包括但不限于第一位置和偏移量之间的和/差、对第一位置和偏移量分别加权之后的和/差等。例如，第二位置是第一位置加上偏移量。又例如，第二位置是第一位置减去偏移量。在实施时，本领域技术人员可以根据实际需求确定第二位置的方式，本公开实施例不作限定。

在本公开实施方式中，不同的操作指令对应不同的偏移量，可以使得第二位置更加准确，从而得到更加准确的目标数据。

在一些实施方式中，所述第一位置包括第一起始位置和第一结束位置，所述第二位置包括第二起始位置和第二结束位置，所述步骤S242包括步骤S251或步骤S252，其中：

步骤S251、基于所述第一起始位置和所述偏移量，确定所述第二起始位置。

这里，第二起始位置可以包括但不限于第一起始位置和偏移量之间的和/差、对第一起始位置和偏移量分别加权之后的和/差等。例如，第二起始位置是第一起始位置加上偏移量。又例如，第二起始位置是第一起始位置减去偏移量。在实施时，本领域技术人员可以根据实际需求确定第二起始位置的方式，本公开实施例不作限定。

步骤S252、基于所述第一结束位置和所述偏移量，确定所述第二结束位置。

这里，第二结束位置可以包括但不限于第一结束位置和偏移量之间的和/差、对第一结束位置和偏移量分别加权之后的和/差等。例如，第二结束位置是第一结束位置加上偏移量。又例如，第二结束位置是第一结束位置减去偏移量。在实施时，本领域技术人员可以根据实际需求确定第二结束位置的方式，本公开实施例不作限定。

在一些实施方式中，所述步骤S241包括步骤S261或步骤S262，其中：

步骤S261、在所述操作指令包括加载指令的情况下，基于预设的加载长度，确定所述偏移量。

这里，偏移量可以包括但不限于预设的加载长度、对预设的加载长度进行加权之后的长度等。例如，偏移量是预设的加载长度。在实施时，本领域技术人员可以根据实际需求确定偏移量的方式，本公开实施例不作限定。

步骤S262、在所述操作指令包括翻页指令的情况下，基于所述翻页的页数和每一页的页面数据的长度，确定所述偏移量。

这里，偏移量可以包括但不限于一页的页面数据的长度、页数及每一页的页面数据的长度等。例如，偏移量是一页的页面数据的长度，比如：30条记录。又例如，偏移量是页数为2，且每一页的页面数据的长度为20，那么此时偏移量为40条记录。在实施时，本领域技术人员可以根据实际需求自主设定偏移量，本公开不作限定。

在本公开实施方式中，不同的操作指令对应不同的偏移量，基于该偏移量，使得前端每次渲染等量的少量数据。这样，通过减小渲染的数据量，可以减少渲染时长，从而可以减小页面卡顿、延迟的可能性，进而可以改善用户的操作体验。

在一些实施方式中，所述步骤S232包括步骤S271，其中：

步骤S271、利用所述数据存储器的第一数据接口，基于所述第二位置，从所述数据存储器中确定所述目标数据。

这里，数据存储器至少包括第一数据接口。该第一数据接口用于基于第二位置，从第一页面数据中确定目标数据。例如，在加载指令的情况下，利用该第一数据接口，从第一页面数据中截取等量的数据作为目标数据。

在本公开实施方式中，数据存储器提供第一数据接口，通过该第一数据接口来快速得到待渲染的目标数据。这样，可以缩短获取目标数据的时间。

图3为本公开实施例提供的一种数据处理方法的实现流程示意图，如图3所示，所述方法包括步骤S31至步骤S35，其中：

步骤S31、获取所述第一页面的第二页面数据。

这里，第二页面数据是后端返回的全量数据。在一些实施方式中，第二页面数据可以包括至少一条记录，每一条记录表征一个对象，每一对象具有至少一个属性字段，该属性字段表征该对象的属性信息。该属性信息可以包括但不限于对象名、时间、地点、事件等。

在一些实施方式中，前端可以直接从后端读取第二页面数据，也可以接收后端发送的第二页面数据。例如，前端调用后端提供的数据接口，获取第二页面数据。

步骤S32、对所述第二页面数据进行预处理，得到所述第一页面数据，并将所述第一页面数据存储至所述数据存储器中。

这里，预处理可以包括但不限于筛选、包装、压缩等。

在一些实施方式中，第一页面数据可以包括至少一条记录，每一条记录表征一个对象，每一对象具有至少一个属性字段，该属性字段表征该对象的属性信息。该属性信息可以包括但不限于对象名、时间、地点、事件等。

在一些实施方式中，基于预设规则，对第二页面数据进行筛选，得到第一页面数据。其中，预设规则可以包括但不限于预设的配置信息、用户自定义、用户喜好、使用频率等。例如，将第二页面数据中的每一条记录中的对象名字段和时间字段，作为第一页面数据。

在实施时，本领域技术人员可以根据实际需求自主确定预处理的方式，本公开不作限定。

步骤S33、响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令。

步骤S34、基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据。

步骤S35、将所述目标数据渲染至所述第一页面。

上述步骤S33至步骤S35分别对应于前述步骤S11至步骤S13，在实施时，可以参照前述步骤S11至步骤S13的具体实施方式。

在本公开实施例中，通过获取所述第一页面的第二页面数据；对所述第二页面数据进行预处理，得到所述第一页面数据，并将所述第一页面数据存储至所述数据存储器中；响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据；将所述目标数据渲染至所述第一页面。这样，通过优化第二页面数据的结构，一方面，可以便于后期对数据的操作；另一方面，可以降低数据内存的消耗。

图4A为本公开实施例提供的一种数据处理系统40的示意图，如图4A所示，所述系统40包括数据存储器41、处理组件42、显示组件43：

数据存储器41，用于存储第一页面的第一页面数据。

处理组件42，用于响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；基于所述第一页面和所述操作指令，从前端的数据存储器41中确定目标数据。

显示组件43，用于将目标数据渲染至第一页面中。

这里，数据存储器41可以是浏览器的存储器，渐进式框架中的存储器等。例如，可以使用Vue.js中的路由对象route作为数据存储器。又例如，使用浏览器中的localStorage、Cookie、sessionStorage等存储对象作为数据存储器。还例如，使用Vuex存储空间作为数据存储器。其中Veux是一个专门为Vue.js用于程序开发的状态管理模式，其采用集中式存储管理所有组件的公共状态。

交互请求包括但不限于加载更多请求、翻页请求等。例如：当用户点击第一页面中的“加载更多”的按钮，发送加载请求给前端。又例如，当用户双击第一页面中的“上一页”的控件时，发送向上翻一页请求。

操作指令可以包括但不限于加载更多、刷新、向上滑动(滚动)、向下滑动(滚动)、向上翻一页、向下翻一页、翻到指定页、跳转至首页、跳转至末页、跳转至指定内容等。

在一些实施方式中，可以预先建立交互请求与操作指令的对应关系，根据该对应关系便可以得到该交互请求对应的操作指令。

在一些实施方式中，所述处理组件42，还用于：获取所述第一页面的第二页面数据；对所述第二页面数据进行预处理，得到所述第一页面数据，并将所述第一页面数据存储至所述数据存储器41中。

例如，在web前端使用路由对象route作为数据存储器。处理组件42调用后端提供的API(Application Programming Interface，应用程序编程接口)，读取全量的第二页面数据，并对第二页面数据进行优化、筛选、包装等处理，得到第一页面数据，将第一页面数据存储至数据存储器41中。

这样，通过优化第二页面数据的结构，便于后期对数据的操作，降低数据内存的消耗。

在一些实施方式中，数据存储器41，还用于：提供操作数据的第一数据接口；所述处理组件42，还用于：确定所述第一页面中已显示的第一页面子数据在所述第一页面数据中的第一位置；基于所述操作指令，确定偏移量；基于所述第一位置和所述偏移量，确定第二位置；利用第一数据接口，基于所述第二位置，从所述数据存储器41中确定所述目标数据。

这里，不同的操作指令对应不同的偏移量。例如，对于加载指令，该偏移量可以是预设的加载长度，比如：20条记录。又例如，对于翻页指令，该偏移量可以是一页的页面数据的长度，比如：30条记录。在实施时，本领域技术人员可以根据实际需求自主设定操作指令和偏移量之间的对应关系，本公开不作限定。

这样，在初始化时，在第一页面中只渲染少量的数据，并在用户发出交互请求时，通过数据存储器提供的第一数据接口来快速得到目标数据，实现了前端层面的数据截取，使得每次渲染等量的少量数据。

图4B为本公开实施例提供的一种第一页面的示意图，如图4B所示，第一页面至少包括内容组件410、加载更多组件420。其中，该内容组件410用于展示至少一个对象的一条记录。用户可以通过点击、双击等方式选中加载更多控件420来发送交互请求，以使得前端从数据存储器中截取等量的目标数据，并将该目标数据渲染至第一页面中。

图4C为本公开实施例提供的一种数据处理系统的执行流程的示意图，如图4C所示：

步骤Sa1：构建数据存储器；

步骤Sa2：对第二页面数据进行包装处理，得到第一页面数据；

步骤Sa3：初始化，在第一页面上显示预设长度的第一页面子数据；

步骤Sa4：接收到加载请求时，利用第一数据接口，基于第一页面子数据和预设的加载长度，从数据存储器中获取目标数据；

步骤Sa5：将目标数据渲染至第一页面中。

本公开实施例中，首先，数据处理系统通过优化第二页面数据的结构，得到第一页面数据，可以便于后期对数据的操作，同时也可以降低数据内存的消耗；其次，在初始化时，在第一页面中只渲染少量的数据，通过减小渲染的数据量，可以减少渲染时长，从而可以减小页面卡顿、延迟的可能性，进而可以改善用户的操作体验；再次，在接收到用户的交互请求时，直接从前端的数据存储器的第一数据接口来快速得到目标数据，一方面，实现了前端层面的数据截取，使得每次渲染等量的少量数据，另一方面，减少了与后端的交互时间，使得交互更加流畅，从而可以进一步改善用户的操作体验。

基于上述实施例，本公开实施例提供一种数据处理装置，图5为本公开实施例提供的一种数据处理装置，如图5所示，所述装置50包括第一确定模块51、第二确定模块52以及第一显示模块53。

第一确定模块51，用于响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；

第二确定模块52，用于基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据；

第一显示模块53，用于将所述目标数据渲染至所述第一页面。

在一些实施方式中，所述第二确定模块52，还用于：确定所述第一页面中已显示的第一页面子数据在所述第一页面数据中的第一位置；基于所述第一位置和所述操作指令，从所述数据存储器中确定所述目标数据。

在一些实施方式中，所述第二确定模块52，还用于：基于所述操作指令和所述第一位置，确定第二位置；基于所述第二位置，从所述数据存储器中确定所述目标数据。

在一些实施方式中，所述第二确定模块52，还用于：基于所述操作指令，确定偏移量；基于所述第一位置和所述偏移量，确定第二位置。

在一些实施方式中，所述第二确定模块52，还用于以下之一：在所述操作指令包括加载指令的情况下，基于预设的加载长度，确定所述偏移量；在所述操作指令包括翻页指令的情况下，基于所述翻页的页数和每一页的页面数据的长度，确定所述偏移量。

在一些实施方式中，所述第一位置包括第一起始位置和第一结束位置，所述第二位置包括第二起始位置和第二结束位置，所述第二确定模块52，还用于：基于所述第一起始位置和所述偏移量，确定所述第二起始位置；基于所述第一结束位置和所述偏移量，确定所述第二结束位置。

在一些实施方式中，所述第二确定模块52，还用于：利用所述数据存储器的第一数据接口，基于所述第二位置，从所述数据存储器中确定所述目标数据。

在一些实施方式中，所述装置还包括：第一获取模块和第三确定模块，其中，所述第一获取模块，用于获取所述第一页面的第二页面数据；所述第三确定模块，用于对所述第二页面数据进行预处理，得到所述第一页面数据，并将所述第一页面数据存储至所述数据存储器中。

以上装置实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本公开装置实施例中未披露的技术细节，请参照本公开方法实施例的描述而理解。

若本公开技术方案涉及个人信息，应用本公开技术方案的产品在处理个人信息前，已明确告知个人信息处理规则，并取得个人自主同意。若本公开技术方案涉及敏感个人信息，应用本公开技术方案的产品在处理敏感个人信息前，已取得个人单独同意，并且同时满足“明示同意”的要求。例如，在摄像头等个人信息采集装置处，设置明确显著的标识告知已进入个人信息采集范围，将会对个人信息进行采集，若个人自愿进入采集范围即视为同意对其个人信息进行采集；或者在个人信息处理的装置上，利用明显的标识/信息告知个人信息处理规则的情况下，通过弹窗信息或请个人自行上传其个人信息等方式获得个人授权；其中，个人信息处理规则可包括个人信息处理者、个人信息处理目的、处理方式、处理的个人信息种类等信息。

需要说明的是，本公开实施例中，如果以软件功能模块的形式实现上述数据处理方法，并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本公开实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该软件产品存储在一个存储介质中，包括若干指令用以使得一台电子设备(可以是个人计算机、服务器、或者网络设备等)执行本公开各个实施例所述方法的全部或部分。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。这样，本公开实施例不限制于任何特定的硬件和软件结合。

本公开实施例提供一种电子设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述数据处理方法。

本公开实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述数据处理方法。所述计算机可读存储介质可以是瞬时性的，也可以是非瞬时性的。

本公开实施例提供一种计算机程序产品，所述计算机程序产品包括存储了计算机程序的非瞬时性计算机可读存储介质，所述计算机程序被计算机读取并执行时，实现上述方法中的部分或全部步骤。该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software DevelopmentKit，SDK)等等。

需要说明的是，图6为本公开实施例中电子设备的一种硬件实体示意图，如图6所示，该电子设备600的硬件实体包括：处理器601、通信接口602和存储器603，其中：

处理器601通常控制电子设备600的总体操作。

通信接口602可以使电子设备通过网络与其他终端或服务器通信。

存储器603配置为存储由处理器601可执行的指令和应用，还可以缓存待处理器601以及电子设备600中各模块待处理或已经处理的数据(例如，图像数据、音频数据、语音通信数据和视频通信数据)，可以通过闪存(FLASH)或随机访问存储器(Random AccessMemory，RAM)实现。处理器601、通信接口602和存储器603之间可以通过总线604进行数据传输。

这里需要指出的是：以上存储介质和设备实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本公开存储介质和设备实施例中未披露的技术细节，请参照本公开方法实施例的描述而理解。

应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本公开的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。应理解，在本公开的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本公开实施例的实施过程构成任何限定。上述本公开实施例序号仅仅为了描述，不代表实施例的优劣。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

在本公开所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。

上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元；既可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。

另外，在本公开实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。

或者，本公开上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台电子设备(可以是个人计算机、服务器、或者网络设备等)执行本公开各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本公开的实施方式，但本公开的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本公开的保护范围之内。

Claims (11)

1.一种数据处理方法，其特征在于，所述方法包括：

响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；

基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据；

将所述目标数据渲染至所述第一页面。

2.根据权利要求1所述的方法，其特征在于，所述基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，包括：

确定所述第一页面中已显示的第一页面子数据在所述第一页面数据中的第一位置；

基于所述第一位置和所述操作指令，从所述数据存储器中确定所述目标数据。

3.根据权利要求2所述的方法，其特征在于，所述基于所述第一位置和所述操作指令，从所述数据存储器中确定所述目标数据，包括：

基于所述操作指令和所述第一位置，确定第二位置；

基于所述第二位置，从所述数据存储器中确定所述目标数据。

4.根据权利要求3所述的方法，其特征在于，所述基于所述操作指令和所述第一位置，确定第二位置，包括：

基于所述操作指令，确定偏移量；

基于所述第一位置和所述偏移量，确定第二位置。

5.根据权利要求4所述的方法，其特征在于，所述基于所述操作指令，确定偏移量，包括以下之一：

在所述操作指令包括加载指令的情况下，基于预设的加载长度，确定所述偏移量；

在所述操作指令包括翻页指令的情况下，基于所述翻页的页数和每一页的页面数据的长度，确定所述偏移量。

6.根据权利要求4或5所述的方法，其特征在于，所述第一位置包括第一起始位置和第一结束位置，所述第二位置包括第二起始位置和第二结束位置；

所述基于所述第一位置和所述偏移量，确定第二位置，包括：

基于所述第一起始位置和所述偏移量，确定所述第二起始位置；

基于所述第一结束位置和所述偏移量，确定所述第二结束位置。

7.根据权利要求3至6中任一项所述的方法，其特征在于，所述基于所述第二位置，从所述数据存储器中确定所述目标数据，包括：

利用所述数据存储器的第一数据接口，基于所述第二位置，从所述数据存储器中确定所述目标数据。

8.根据权利要求1至7中任一项所述的方法，其特征在于，所述方法还包括：

获取所述第一页面的第二页面数据；

对所述第二页面数据进行预处理，得到所述第一页面数据，并将所述第一页面数据存储至所述数据存储器中。

9.一种数据处理装置，其特征在于，包括：

第一确定模块，用于响应于在第一页面上接收到的交互请求，确定与所述交互请求匹配的操作指令；

第二确定模块，用于基于所述第一页面和所述操作指令，从前端的数据存储器中确定目标数据，所述数据存储器用于存储第一页面的第一页面数据；

第一显示模块，用于将所述目标数据渲染至所述第一页面。

10.一种电子设备，包括处理器和存储器，所述存储器存储有可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至8任一项所述方法。

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

Images