CN113778430A - 小程序的数据渲染方法、装置、设备及存储介质 - Google Patents

小程序的数据渲染方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN113778430A
CN113778430A CN202110142398.2A CN202110142398A CN113778430A CN 113778430 A CN113778430 A CN 113778430A CN 202110142398 A CN202110142398 A CN 202110142398A CN 113778430 A CN113778430 A CN 113778430A
Authority
CN
China
Prior art keywords
data
rendered
buffer pool
screen
rendering
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110142398.2A
Other languages
English (en)
Inventor
宋小兵
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Century Trading Co Ltd
Beijing Wodong Tianjun Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Wodong Tianjun Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Century Trading Co Ltd, Beijing Wodong Tianjun Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN202110142398.2A priority Critical patent/CN113778430A/zh
Publication of CN113778430A publication Critical patent/CN113778430A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G06F9/542—Event management; Broadcasting; Multicasting; Notifications
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G06F9/544—Buffers; Shared memory; Pipes
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/10—Geometric effects
    • G06T15/20—Perspective computation
    • G06T15/205—Image-based rendering

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computing Systems (AREA)
  • Geometry (AREA)
  • Computer Graphics (AREA)
  • Multimedia (AREA)
  • Stored Programmes (AREA)

Abstract

本申请提供一种小程序的数据渲染方法、装置、设备及存储介质。该方法中，根据监听到的操作事件，确定待渲染数据的位置标识，然后从数据缓冲池中获取与位置标识对应的待渲染数据，将待渲染数据复制到渲染数据缓冲池中进行渲染。该方法中，通过将数据缓冲池中的待渲染数据复制到渲染数据缓冲池中进行渲染，避免了从服务端获取来的数据量越来越多时，容易造成了小程序卡顿或者崩溃的问题。

Description

小程序的数据渲染方法、装置、设备及存储介质
技术领域
本申请实施例涉及数据处理技术领域，尤其涉及一种小程序的数据渲染方法、装置、设备及存储介质。
背景技术
小程序是一种全新的开放模式，可以被便捷地获取和传播，为终端用户提供更优的用户体验。
现有技术中，当小程序接收到用户的使用请求时，小程序会向服务端发送请求以响应用户的使用请求，进而使得小程序内部组件接收来自服务端的数据，并将接收到的数据在小程序中进行渲染，为后续用户对终端进行上下滑动、翻页等操作提供了数据支持。
在实现本发明过程中，发明人发现现有技术中至少存在如下问题：随着小程序的应用，从服务端请求的数据量越来越多，容易造成了小程序卡顿或者崩溃的现象。
发明内容
本申请提供一种小程序的数据渲染方法、装置、设备及存储介质，用以解决当接收到大量数据时，小程序出现卡顿或崩溃等问题。
第一方面，本申请实施例提供一种小程序的数据渲染方法，应用于终端设备，包括：
根据监听到的操作事件，确定待渲染数据的位置标识，所述位置标识用于指示待渲染数据在数据缓冲池中的起始和结束位置；
从数据缓冲池中获取与所述位置标识对应的待渲染数据；
将所述待渲染数据复制到渲染数据缓冲池中进行渲染；其中，所述数据缓冲池为预设的用于存储从所述小程序的服务端请求到的所有数据的存储区域，所述渲染数据缓冲池为预设的小程序可直接调用数据进行渲染的存储区域。
在第一方面的一种可能设计中，所述方法还包括：
根据所述小程序的页面高度以及每个数据在所述小程序的页面上的渲染高度，计算得到单屏数据量，所述单屏数据量为所述小程序在所述终端设备上运行时每屏能够渲染的数据量；
所述根据监听到的操作事件，确定待渲染数据的位置标识，包括：
根据监听到的操作事件以及所述小程序的所述单屏数据量，确定待渲染数据的位置标识。
在该种可能设计中，所述根据监听到的操作事件以及所述小程序的所述单屏数据量，确定待渲染数据的位置标识，包括：
若所述操作事件为初始进入所述小程序，判断所述单屏数据量乘以二之后是否大于或等于所述数据缓冲池中的数据量；
若所述单屏数据量乘以二之后大于或等于所述数据缓冲池中的数据量，则将所述缓冲池中的第一个数据作为起始位置，所述数据缓冲池中的最后一个数据作为结束位置；其中，所述待渲染数据的所述位置标识包括所述起始位置和所述结束位置。
可选的，所述方法还包括：
若所述单屏数据量乘以二之后小于所述数据缓冲池中的数据量，则将所述缓冲池中的第一个数据作为起始位置，所述数据缓冲池中第N个数据作为结束位置，其中N等于单屏数据量乘以二。
在该种可能设计中，所述根据监听到的操作事件以及所述小程序的所述单屏数据量，确定当前需要待渲染数据的位置标识，包括：
若所述操作事件为上滑操作，则确定在所述数据缓冲池中当前渲染的数据的结束位置到所述数据缓冲池中最后一个数据之间的数据量是否大于所述单屏数据量；
若是，则将当前渲染的数据的结束位置后增加一个单屏数据量之后的位置作为所述待渲染数据的结束位置；
否则，则将所述缓冲数据池中最后一个数据的位置作为所述待渲染数据的结束位置。
可选的，所述方法还包括：
若所述单屏数据量乘以三小于确定出的待渲染数据的结束位置到当前渲染的数据的起始位置之间的数据量，则将所述待渲染数据的结束位置前的三个所述单屏数据量处的位置作为所述待渲染数据的新的起始位置。
在该种可能设计中，所述根据监听到的操作事件以及所述小程序的所述单屏数据量，确定当前需要待渲染数据的位置标识，包括：
若所述操作事件为下滑操作，则确定在所述数据缓冲池中当前渲染的数据的起始位置之前一个所述单屏数据量的位置是否有数据；
若所述当前渲染的数据的起始位置之前一个所述单屏数据量的位置没有数据，则将所述缓冲数据池中的第一个数据的位置作为所述待渲染数据的起始位置；
若所述当前渲染的数据的起始位置之前一个所述单屏数据量的位置有数据，则将所述当前渲染的数据的起始位置前一个所述单屏数据量的位置作为所述待渲染数据的起始位置。
可选的，所述方法还包括：
若所述单屏数据量乘以三小于确定出的待渲染数据的起始位置到当前渲染的数据的结束位置之间的数据量，则将所述待渲染数据的起始位置后的三个所述单屏数据量处的位置作为所述待渲染数据的新的结束位置。
在第一方面的另一种可能设计中，所述方法还包括：
在监听到滑动操作时，根据所述滑动操作在Y轴的起始坐标和结束坐标确定所述滑动操作为上滑操作或者下滑操作。
在该种可能的设计中，所述根据所述滑动操作的起始坐标和结束坐标确定所述滑动操作为上滑操作或者下滑操作，包括：
计算所述滑动操作在Y轴上的所述结束坐标与所述起始坐标之间的差值；
若所述差值大于零，则确定所述滑动操作为下滑操作；
若所述差值小于零，则确定所述滑动操作为上滑操作。
在第一方面的再一种可能设计中，所述根据监听到的操作事件，确定待渲染数据的位置标识之前，所述方法还包括：
通过异步数据获取方式从所述小程序的服务端获取数据；
若所述数据缓冲池中存在数据，则将从所述小程序的服务端获取到的数据追加存储在所述数据缓冲池中数据的末尾；
若所述数据缓冲池中为空，则将从所述小程序的服务端获取到的数据存储在所述数据缓冲池。
第二方面，本申请实施例提供一种小程序的数据渲染装置，包括：确定模块、获取模块和处理模块；
所述确定模块，用于根据监听到的操作事件，确定待渲染数据的位置标识，所述位置标识用于指示待渲染数据在数据缓冲池中的起始和结束位置；
所述获取模块，用于从数据缓冲池中获取与所述位置标识对应的待渲染数据；
所述处理模块，用于将所述待渲染数据复制到渲染数据缓冲池中进行渲染；其中，所述数据缓冲池为预设的用于存储从所述小程序的服务端请求到的所有数据的存储区域，所述渲染数据缓冲池为预设的小程序可直接调用数据进行渲染的存储区域。
在第二方面的一种可能设计中，所述处理模块，还用于根据所述小程序的页面高度以及每个数据在所述小程序的页面上的渲染高度，计算得到单屏数据量，所述单屏数据量为所述小程序在所述终端设备上运行时每屏能够渲染的数据量；
所述根据监听到的操作事件，确定待渲染数据的位置标识，包括：
根据监听到的操作事件以及所述小程序的所述单屏数据量，确定待渲染数据的位置标识。
在该种可能的设计中，所述处理模块用于根据监听到的操作事件以及所述小程序的所述单屏数据量，确定待渲染数据的位置标识，具体为：
所述处理模块，具体用于：
若所述操作事件为初始进入所述小程序，判断所述单屏数据量乘以二之后是否大于或等于所述数据缓冲池中的数据量；
若所述单屏数据量乘以二之后大于或等于所述数据缓冲池中的数据量，则将所述缓冲池中的第一个数据作为起始位置，所述数据缓冲池中的最后一个数据作为结束位置；其中，所述待渲染数据的所述位置标识包括所述起始位置和所述结束位置。
可选的，所述处理模块，还用于若所述单屏数据量乘以二之后小于所述数据缓冲池中的数据量，则将所述缓冲池中的第一个数据作为起始位置，所述数据缓冲池中第N个数据作为结束位置，其中N等于单屏数据量乘以二。
在该种可能的设计中，所述处理模块，用于所述根据监听到的操作事件以及所述小程序的所述单屏数据量，确定当前需要待渲染数据的位置标识，具体为：
所述处理模块，具体用于：
若所述操作事件为上滑操作，则确定在所述数据缓冲池中当前渲染的数据的结束位置到所述数据缓冲池中最后一个数据之间的数据量是否大于所述单屏数据量；
若是，则将当前渲染的数据的结束位置后增加一个单屏数据量之后的位置作为所述待渲染数据的结束位置；
否则，则将所述缓冲数据池中最后一个数据的位置作为所述待渲染数据的结束位置。
可选的，所述处理模块，还用于若所述单屏数据量乘以三小于确定出的待渲染数据的结束位置到当前渲染的数据的起始位置之间的数据量，则将所述待渲染数据的结束位置前的三个所述单屏数据量处的位置作为所述待渲染数据的新的起始位置。
在该种可能的设计中，所述处理模块，用于所述根据监听到的操作事件以及所述小程序的所述单屏数据量，确定当前需要待渲染数据的位置标识，具体为：
所述处理模块，具体用于：
若所述操作事件为下滑操作，则确定在所述数据缓冲池中当前渲染的数据的起始位置之前一个所述单屏数据量的位置是否有数据；
若所述当前渲染的数据的起始位置之前一个所述单屏数据量的位置没有数据，则将所述缓冲数据池中的第一个数据的位置作为所述待渲染数据的起始位置；
若所述当前渲染的数据的起始位置之前一个所述单屏数据量的位置有数据，则将所述当前渲染的数据的起始位置前一个所述单屏数据量的位置作为所述待渲染数据的起始位置。
可选的，所述处理模块，还用于若所述单屏数据量乘以三小于确定出的待渲染数据的起始位置到当前渲染的数据的结束位置之间的数据量，则将所述待渲染数据的起始位置后的三个所述单屏数据量处的位置作为所述待渲染数据的新的结束位置。
在第二方面的另一种可能设计中，所述处理模块，还用于在监听到滑动操作时，根据所述滑动操作在Y轴的起始坐标和结束坐标确定所述滑动操作为上滑操作或者下滑操作。
在该种可能的设计中，所述处理模块，用于所述根据所述滑动操作的起始坐标和结束坐标确定所述滑动操作为上滑操作或者下滑操作，具体为：
所述处理模块，具体用于：
计算所述滑动操作在Y轴上的所述结束坐标与所述起始坐标之间的差值；
若所述差值大于零，则确定所述滑动操作为下滑操作；
若所述差值小于零，则确定所述滑动操作为上滑操作。
在第二方面的另一种可能设计中，所述确定模块用于所述根据监听到的操作事件，确定待渲染数据的位置标识之前，还用于：
通过异步数据获取方式从所述小程序的服务端获取数据；
若所述数据缓冲池中存在数据，则将从所述小程序的服务端获取到的数据追加存储在所述数据缓冲池中数据的末尾；
若所述数据缓冲池中为空，则将从所述小程序的服务端获取到的数据存储在所述数据缓冲池。
第三方面，本申请实施例提供一种终端设备，包括：处理器、存储器、显示器以及存储在所述存储器上并可在所述处理器上运行的计算机程序；
所述存储器存储计算机执行指令；
所述处理器执行所述计算机程序指令时实现第一方面以及各可能设计提供的小程序的数据渲染方法。
第四方面，本申请实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序指令，当所述计算机程序指令被处理器执行时用于实现第一方面以及各可能设计提供的小程序的数据渲染方法。
第五方面，本申请实施例提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时用于实现第一方面以及各可能设计提供的小程序的数据渲染方法。
本申请实施例提供的小程序的数据渲染方法、装置、设备及存储介质，根据监听到的操作事件，确定待渲染数据的位置标识，然后从数据缓冲池中获取与位置标识对应的待渲染数据，将待渲染数据复制到渲染数据缓冲池中进行渲染。该方法中，基于位置标识，将数据缓冲池中的待渲染数据复制到渲染数据缓冲池中进行渲染，避免了从服务端请求的数据量越来越多时，容易造成了小程序卡顿或者崩溃的问题。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
图1为本申请实施例提供的小程序的数据渲染的架构示意图；
图2为本申请实施例提供的小程序的数据渲染方法实施例一的流程图；
图3为本申请实施例提供的小程序的数据渲染方法实施例二的流程图；
图4为本申请实施例提供的小程序的数据渲染方法实施例三的流程图；
图5为本申请实施例提供的小程序的数据渲染方法实施例四的流程图；
图6为本申请实施例提供的小程序的数据渲染方法实施例五的流程图；
图7为本申请实施例提供的事件***的工作流程示意图；
图8为本申请实施例提供的数据缓冲池的工作流程示意图；
图9为本申请实施例提供的渲染计算中心的工作流程示意图；
图10为本申请实施例提供的小程序的数据渲染装置的结构示意图；
图11为本申请实施例提供的终端设备的结构示意图。
通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
在介绍本申请的实施例之前，首先对本申请的专业名词和背景技术进行解释说明。
释放内存：将数据存放到缓存中时，会不断占用内存，小程序的缓存限制为10M，当占用缓存超过限制时，小程序就会变慢或者出现不可预知的问题，当数据不在使用时，我们需要清空缓存以释放之前占用的内存空间给其他页面使用，提高小程序性能。
小程序(Mini Program)是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，该应用只需要用户通过扫一扫或搜一下即可打开使用。其中，小程序可以是微信小程序，也可以是其他小程序。
小程序的数据渲染，主要是通过小程序接口请求到服务端数据后，直接将数据放到小程序页面或者内部组件的data属性中，若放在内部组件的data属性中，则循环data属性的值进行渲染，即该data属性为用户对终端进行上下滑动、翻页等操作提供了数据支持。
然而，在实际应用中，目前这种方案存在以下几个问题：
1、当小程序接口返回的数据量太大时，一次性渲染的小程序页面元素太多，可能造成小程序卡顿。
2、在上拉加载页面时加载更多的小程序时，data属性中获取的数据会越来越多，页面渲染的元素也会增加，导致小程序页面会越来越卡。
3、当数据量增大到一定数量时，小程序页面元素会达到瓶颈值，导致出现小程序卡死或者崩溃现象。
4、当上拉加载页面多次后，点击“回到顶部”选项时，页面基本会卡死。这些问题严重影响了用户体验。
针对上述现有技术存在的问题，本申请提供一种小程序的数据渲染的方案，能够实现随着小程序的应用，从服务端请求的数据量越来越多，且加载的小程序也越来越多时，小程序页面仍能流畅地显示用户所需的内容，不会出现卡顿、甚至卡死的现象。
图1为本申请实施例提供的小程序的数据渲染的架构示意图。如图1所示，该数据渲染的架构示意图可以包括：小程序窗口10、配置收集中心11、事件***12、数据缓冲池13、渲染数据缓冲池14、渲染计算中心15、异步数据拉取装置16。
其中，小程序窗口10可以包括多条渲染的数据100。
在一种可能的实现中，异步数据拉取装置16用于通过小程序的服务端获取数据，并将数据缓存至数据缓冲池13中，事件***12用于监听小程序窗口10中的操作事件，配置收集中心11用于收集得到小程序页面中的每页最多可以渲染的数据数量，渲染计算中心15基于配置收集中心11计算得到的每页渲染数据数量，以及事件***12计算得到的操作事件，来计算需要将数据缓冲池13中的多少数据放到渲染数据缓冲池14中进行渲染。
可选的，上述架构中的各个部分可以被功能相同或相似的实体装置、虚拟装置或软件所替代，本申请对此不做过多限制。
图1所示的数据渲染的架构示意图，应用于本申请实施例提供的技术方案的执行主体的终端设备。其中，终端设备可以是手机、平板电脑、电脑，其他智能终端等等任一具备人机交互能力的移动设备，也可以是云端，或者服务器等具有处理功能实体。
在图1的基础上，本申请提供的小程序的数据渲染方案的技术构思过程如下：在对小程序的实现过程中，发明人发现减少一次性放入小程序数据组件的数据，则可以解决上述问题，但是用户在使用过程中需要从服务端请求较多的数据，基于此考虑设置不同的数据存储区域，将服务端的请求得到的数据先进行缓存，根据用户的操作将当前需要渲染的数据放入小程序内部的数据组件中进行缓存即可。具体的，可以通过监听用户的操作事件，将大量数据缓冲池里面的数据通过屏幕高度、用户预估每个数据需要展示的高度、以及滑动的高度和方向来确定出当前屏及前后两屏共三屏数据，并进行动态渲染，就可以避免数据量过大时，小程序卡死现象的发生。
下面以图1所示的数据渲染的架构示意图，通过具体实施例对本申请提供的小程序的数据渲染方法的技术方案进行详细说明。需要说明的是，下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。
图2为本申请实施例提供的小程序的数据渲染方法实施例一的流程图。如图2所示，该方法应用于终端设备，可以包括如下步骤：
步骤21、根据监听到的操作事件，确定待渲染数据的位置标识。
在本方案中，在小程序的应用过程中，用户会根据自身需求对小程序进行操作，例如用户可以点击小程序中的控件，或者可以进行滑动操作以便浏览需要的内容。对于终端设备来说，在检测到用户的操作事件之后，需要对用户的操作事件进行响应，即需要在小程序的窗口上渲染相应的数据。
可选的，本申请中涉及的操作事件可以是用户的滑动操作和屏幕按下操作等操作，对此本方案不做限制。
在本步骤中，小程序从服务端获取的数据均在数据缓冲池进行存储，为了获取将要在小程序的渲染的数据，也就是待渲染数据，首选需要根据操作事件确定待渲染数据在数据缓冲池中的位置，包括起始位置和结束位置。本方案中，可通过位置标识指示待渲染数据在数据缓冲池中的起始位置和结束位置。
终端设备需要根据不同的操作事件，确定待渲染数据在数据缓冲池中的起始位置和结束位置，至少可以包括以下几种方式：
第一种实现方式，若所述操作事件为初始进入小程序，则需要判断单屏数据量乘以二之后是否大于或等于数据缓冲池中的数据量，以确定出当前屏及后一屏的数据在数据缓冲池中的起始位置和结束位置。
第二种实现方式，若所述操作事件为上滑操作，则需要判断数据缓冲池中当前渲染的数据的结束位置到数据缓冲池中最后一个数据之间的数据量是否大于单屏数据量，以确定出当前屏、前后两屏共三屏的数据在数据缓冲池中的新的结束位置，进一步判断单屏数据量乘以三是否小于新的的结束位置到当前渲染的数据的起始位置之间的数据量，以确定出新的起始位置。
第三种实现方式，若所述操作事件为下滑操作，则需要判断数据缓冲池中当前渲染的数据的起始位置之前一个单屏数据量的位置是否有数据，以确定出当前屏、前后两屏共三屏的数据在数据缓冲池中的新的起始位置，进一步判断单屏数据量乘以三是否小于新的起始位置到当前渲染的数据的结束位置之间的数据量，以确定出新的结束位置。
可选的，在一种可能的实现中，根据小程序的页面高度以及每个数据在小程序的页面上的渲染高度，计算得到单屏数据量，单屏数据量为小程序在终端设备上运行时每屏能够渲染的数据量。
根据监听到的操作事件，确定待渲染数据的位置标识，包括：根据监听到的操作事件以及小程序的单屏数据量，确定待渲染数据的位置标识。
其中，待渲染数据的位置标识包括起始位置和结束位置。
可选的，利用小程序的组件定义规则，将整个数据渲染定义为一个组件Component，利用组件的properties对象定义组件的入参，以便收集用户的动态配置。
具体的，通过小程序接口wx.getSystemInfo获取到小程序窗口的高度clientHeight(即小程序的页面高度)，并通过收集用户预估的每个数据在小程序的页面上的渲染高度height(包含外边距)，计算小程序在终端设备上运行时每屏能够渲染的数据量(即单屏数据量)num＝clientHeight/height，再根据操作事件，确定小程序窗口中需要渲染的数据在数据缓冲池中的起始和结束位置。
可选的，单屏数据量的计算过程在每个终端设备上都是固定的，在每个终端设备上进行数据渲染时，只需要计算一次便可确定单屏数据量，提高了渲染计算中心的效率。
步骤22、从数据缓冲池中获取与位置标识对应的待渲染数据。
在本方案中，小程序接口在请求到服务端数据之后，终端设备会按照请求的顺序，将获取到的数据依次放在数据缓冲池中。
在本步骤中，基于上述步骤在数据缓冲池中确定的位置标识，终端设备从数据缓冲池中获取起始位置到结束位置之间的数据作为待渲染数据。
可选的，该待渲染数据为小程序的窗口直接渲染的数据，即响应用户操作事件的数据支持。
步骤23、将待渲染数据复制到渲染数据缓冲池中进行渲染。
在本步骤中，将从数据缓冲池中获取的待渲染数据，复制到渲染数据缓冲池中，通过小程序页面直接渲染，以响应用户的操作事件。
可选的，数据缓冲池可以是小程序Components组件的data属性，控制渲染数据缓冲池的数据即可控制小程序页面渲染的大小和渲染的数据的数量。
其中，数据缓冲池为预设的用于存储从小程序的服务端请求到的所有数据的存储区域，渲染数据缓冲池为预设的小程序可直接调用数据进行渲染的存储区域。
可选的，随着用户操作事件的发生，在渲染数据缓冲池中，若不需要有些数据，终端设备就将这部分数据丢弃，即释放内存，用以保持数据渲染的效率。然而，为了保持滑动位置正常，可以在小程序页面顶部预留一个空的占位view，用以撑高渲染数据缓冲池中被丢弃的存储区域。
本申请实施例提供的小程序的数据渲染方法，根据监听到的操作事件，确定待渲染数据的位置标识，然后从数据缓冲池中获取与位置标识对应的待渲染数据，将待渲染数据复制到渲染数据缓冲池中进行渲染。该方法中，通过将数据缓冲池中的待渲染数据复制到渲染数据缓冲池中进行渲染，避免了大数据量下，渲染的小程序页面元素过多，造成了小程序卡顿或者崩溃的现象，提高了用户体验。
在上述实施例之前，图3为本申请实施例提供的小程序的数据渲染方法实施例二的流程图。如图3所示，在步骤21中根据监听到的操作事件，确定待渲染数据的位置标识之前，该方法还包括如下步骤：
步骤31、通过异步数据获取方式从小程序的服务端获取数据。
在本方案中，在小程序的应用过程中，当用户点击小程序中的控件，或者可以进行滑动操作以便浏览需要的内容时，终端设备会根据用户的操作，向小程序服务端发送数据请求，之后小程序接口获取小程序服务端发送来的数据，为用户浏览所需的内容提供数据支持。
在本步骤中，小程序接口获取小程序服务端发送来的数据时，采用的获取方式可以是异步数据获取，即随着用户的操作，小程序页面局部数据加载或刷新。例如，用户向上滑动屏幕时，后一屏之后的数据不断加载或刷新。而不会影响到当前页面的渲染。
步骤32、若数据缓冲池中存在数据，则将从小程序的服务端获取到的数据追加存储在数据缓冲池中数据的末尾。
在本方案中，为了保证用户浏览的内容与小程序服务端提供的数据相对应，需要将获取到的数据依次存储到数据缓冲池中，这样做既保证了后续待渲染数据的位置标识的准确性，也使得在后续调用结束位置到起始位置之间的数据时，符合页面数据渲染的顺序。
在本步骤中，若数据缓冲池中存在数据，终端设备将从小程序的服务端获取到的数据添加到数据缓冲池中原有数据的后边。
步骤33、若数据缓冲池中为空，则将从小程序的服务端获取到的数据存储在数据缓冲池。
在本步骤中，若数据缓冲池中不存在数据，终端设备将从小程序的服务端获取到的数据直接添加到数据缓冲池中。
本申请实施例提供的小程序的数据渲染方法，通过异步数据获取方式从小程序的服务端获取数据。若数据缓冲池中存在数据，则将从小程序的服务端获取到的数据追加存储在数据缓冲池中数据的末尾；若数据缓冲池中为空，则将从小程序的服务端获取到的数据存储在数据缓冲池。该方法中，通过异步数据获取方式从小程序的服务端获取数据，将所得数据存储在数据缓冲池，为后续准确确定出待渲染数据的位置标识提供了基础。
在上述实施例的基础上，图4为本申请实施例提供的小程序的数据渲染方法实施例三的流程图。如图4所示，在操作事件是初始进入小程序时，上述步骤21中根据监听到的操作事件确定待渲染数据的位置标识可以通过如下步骤实现：
步骤41、若操作事件为初始进入小程序，判断单屏数据量乘以二之后是否大于或等于数据缓冲池中的数据量。
在本方案中，当用户刚打开小程序页面时，即小程序页面的前一屏还不存在渲染的数据时，则可以确定该操作事件为初始进入小程序。
其中，在一种可能的实现中，针对用户的操作事件，可以通过设置监听标识(listenFlag)为工作状态，即在listenFlag为true的情况下，监听用户的操作；此外，在listenFlag为fasle的情况下，停止监听用户的操作。
在本步骤中，当监听到用户的操作事件为初始进入小程序，即小程序页面的前一屏还不存在渲染的数据时，只需要保证当前屏，以及后一屏的数据可以进行动态渲染即可满足用户需求。此时终端设备会默认渲染当前屏与后一屏的数据。
可选的，判断数据缓冲池中的数据量与单屏数据量乘以二之间的关系，来确定需要将多少数据缓冲池的数据放到渲染数据缓冲池中，以备小程序直接调用。
可选的，若单屏数据量乘以二之后大于或等于数据缓冲池中的数据量，则执行步骤42；若单屏数据量乘以二之后小于数据缓冲池中的数据量，则执行步骤43。
步骤42、若单屏数据量乘以二之后大于或等于数据缓冲池中的数据量，则将缓冲池中的第一个数据作为起始位置，数据缓冲池中的最后一个数据作为结束位置；
在本步骤中，操作事件需要渲染的数据量小于或等于当前屏与后一屏的数据量，则说明用户所需浏览的数据量小于或等于当前屏与后一屏的数据量。即当前屏与后一屏可以容纳用户所需浏览的所有数据量。
在一种可能的实现中，当num*2大于或等于数据缓冲池中的数据量时，将数据缓冲池中的第一个数据设置为起始位置(startFlag)，最后一个数据设置为结束位置(endFlag)。
可选的，此时可以将监听操作事件的listenFlag设置为离线状态，即listenFlag为fasle，关闭对用户操作的监听。
步骤43、若单屏数据量乘以二之后小于数据缓冲池中的数据量，则将缓冲池中的第一个数据作为起始位置，数据缓冲池中第N个数据作为结束位置。
其中，N等于单屏数据量乘以二。
在本步骤中，操作事件需要渲染的数据量大于当前屏与后一屏的数据量，则说明用户所需浏览的数据量大于当前屏与后一屏的数据量。此时只需保证当前屏与后一屏有数据被渲染，即可保证用户的正常操作。
在一种可能的实现中，当num*2小于数据缓冲池中的数据量时，将数据缓冲池中的第一个数据设置为startFlag，第N个数据设置为endFlag。以使得startFlag到endFlag之间的数据满足当前屏与后一屏需要渲染的数据量。
本实施例提供的小程序的数据渲染方法，若操作事件为初始进入小程序，判断单屏数据量乘以二之后是否大于或等于数据缓冲池中的数据量。若单屏数据量乘以二之后大于或等于数据缓冲池中的数据量，则将缓冲池中的第一个数据作为起始位置，数据缓冲池中的最后一个数据作为结束位置；若单屏数据量乘以二之后小于数据缓冲池中的数据量，则将缓冲池中的第一个数据作为起始位置，数据缓冲池中第N个数据作为结束位置。该方法中，通过判断单屏数据量与数据缓冲池中的数据量的关系，使得在操作事件为初始进入小程序时，确定了待渲染数据的位置标识，为后续数据渲染提供了基础。
在上述实施例的基础上，图5为本申请实施例提供的小程序的数据渲染方法实施例四的流程图。如图5所示，在操作事件是上滑操作时，上述步骤21中根据监听到的操作事件确定当前需要待渲染数据的位置标识还可以通过如下步骤实现：
步骤51、若操作事件为上滑操作，则确定在数据缓冲池中当前渲染的数据的结束位置到数据缓冲池中最后一个数据之间的数据量是否大于单屏数据量。
在本方案中，当事件***监听到操作事件为滑动操作时，根据滑动操作在Y轴的起始坐标和结束坐标确定滑动操作为上滑操作或者下滑操作。
可选的，计算滑动操作在Y轴上的结束坐标与起始坐标之间的差值，若差值大于零，则确定滑动操作为下滑操作；若差值小于零，则确定滑动操作为上滑操作。
其中，屏幕上下滑动可以视为在坐标轴Y轴上滑动，滑动操作的滑动方向标识可以用flag表示，滑动距离可以用offsetY表示。
具体的，在一种可能的实现中，根据滑动过程中的坐标endY减去按下时的原始Y轴坐标startY，得到offsetY，若offsetY大于零，说明向下滑动，页面向上渲染；若offsetY小于零，说明向上滑动，页面向下渲染；若offsetY等于零，则可以是误操作、屏幕按下操作等。
可选的，若用户没有触发滑动操作，则默认offsetY为0，默认滑动方向为向上滑动，页面向下渲染，以便异步数据拉取装置拉取到数据后进行第一次渲染计算。
值得说明的是，滑动操作的触发需要offsetY的大小超过半个屏的距离大小；具体的，若offsetY的大小大于0，则说明用户在滑动屏幕，此时判断用户滑动的距离是否大于clientHeight/2。若大于，则渲染计算中心进行数据渲染的计算。若小于，则直接结束该计算。
另外，设置一个滑动时的计时器timer去调用渲染计算中心，同时设置延迟执行，即在计时器timer达到预设的计时时长之后，渲染计算中心才进行计算，确定从数据缓冲池中获取待渲染数据的起始位置和结束位置，在计时器未达到计时时长之前不进行计算，防止在滑动过程中频繁计算，减少计算次数，提高滑动的平滑性。
其中，滑动结束一段时间内不再滑动才开始响应计算，该一段时间可以是0.1s。
在本步骤中，若flag为上滑，则说明用户上滑操作，页面向下渲染，此时需保证页面的后一屏有渲染的数据，因此，需要判断在数据缓冲池中当前渲染的数据的结束位置到数据缓冲池中最后一个数据之间的数据量是否可以满足后一屏的数据渲染，即是否大于单屏数据量，此时确定新的endFlag。
在一种可能的实现中，判断数据缓冲池的数据量是否大于数据缓冲池中当前渲染的数据的endFlag加上num。若大于，则执行步骤52；若不大于，则执行步骤53。
步骤52、若是，则将当前渲染的数据的结束位置后增加一个单屏数据量之后的位置作为待渲染数据的结束位置。
在本步骤中，若数据缓冲池的数据量大于数据缓冲池中当前渲染的数据的endFlag加上num，则说明数据缓冲池中有更多数据需要被渲染，此时可以增加一个单屏数据量，将单屏数据量之后的位置作为待渲染数据的新的endFlag，用以保证用户在上滑操作时，后一屏上有完整的浏览的内容。
步骤53、否则，则将缓冲数据池中最后一个数据的位置作为待渲染数据的结束位置。
在本步骤中，若数据缓冲池的数据量不大于数据缓冲池中当前渲染的数据的endFlag加上num，则说明增加一个num，数据缓冲池中没有更多数据，则说明用户并没有进行使小程序接口获取更多数据的操作，只需将数据缓冲池中最后一个数据的位置作为待渲染数据的新的endFlag。
此外，该方法还可以包括步骤54、若单屏数据量乘以三小于确定出的待渲染数据的结束位置到当前渲染的数据的起始位置之间的数据量，则将待渲染数据的结束位置前的三个单屏数据量处的位置作为待渲染数据的新的起始位置。
在本步骤中，由于渲染数据缓冲池中所能存放的数据可直接用于页面渲染，为了保证前一屏、当前屏和后一屏有数据能被渲染，需要通过判断上述在数据缓冲池中新的endFlag到当前startFlag的数据量是否大于或等于三屏所能渲染的数据量，来确定一个新的startFlag，以使得新的startFlag到新的endFlag之间的数据能够支持三屏所能渲染的数据。
在一种可能的实现中，若新的endFlag减去startFlag大于num*3，则将新的endFlag前的三个num处的位置作为待渲染数据的新的startFlag，即保持前一屏、当前屏和后一屏的数据处于渲染状态。
进一步地，判断新的endFlag加上num是否大于数据缓冲池的数据量，若大于，则说明数据缓冲池中没有更多数据了，直接将新的startFlag设置为startFlag+(数据缓冲池-新的endFlag)，同时将view的高度设置为height*(数据缓冲池的数据量-num*3)；若小于，将新的startFlag设置为当前startFlag+num，view的高度设置为本身高度加上height*num，此时可以将新的startFlag到新的endFlag之间的数据确定为待渲染数据。
在另一种可能的实现中，若新的endFlag减去startFlag不大于num*3，则说明用户还未将屏幕下滑至三屏以外，此时可以直接将数据缓冲池中startFlag到新的endFlag之间的数据确定为待渲染数据。
本申请实施例提供的小程序的数据渲染方法，若操作事件为上滑操作，则确定在数据缓冲池中当前渲染的数据的结束位置到数据缓冲池中最后一个数据之间的数据量是否大于单屏数据量。若是，则将当前渲染的数据的结束位置后增加一个单屏数据量之后的位置作为待渲染数据的结束位置；否则，则将缓冲数据池中最后一个数据的位置作为待渲染数据的结束位置。若单屏数据量乘以三小于确定出的待渲染数据的结束位置到当前渲染的数据的起始位置之间的数据量，则将待渲染数据的结束位置前的三个单屏数据量处的位置作为待渲染数据的新的起始位置。该方法中，通过判断数据缓冲池中当前渲染的数据的结束位置到数据缓冲池中最后一个数据之间的数据量是否大于单屏数据量，确定待渲染数据的新的结束位置，以及新的起始位置，保证了上滑操作时三屏数据的渲染。
在上述实施例的基础上，图6为本申请实施例提供的小程序的数据渲染方法实施例五的流程图。如图6所示，在操作事件是下滑操作时，上述步骤21中根据监听到的操作事件确定当前需要待渲染数据的位置标识还可以通过如下步骤实现：
步骤61、若操作事件为下滑操作，则确定在数据缓冲池中当前渲染的数据的起始位置之前一个单屏数据量的位置是否有数据。
在本步骤中，若滑动标识flag为下滑，则页面向上渲染，为了使得用户在下滑操作时不卡顿，就需要保证前一屏数据可以在渲染数据缓冲池中渲染，此时需确定在数据缓冲池中当前渲染的数据的起始位置之前一个单屏数据量的位置是否有数据。
在一种可能的实现中，若在数据缓冲池中当前渲染的数据的startFlag之前一个num的位置有数据，则执行步骤63；若没有数据，则执行步骤62。
步骤62、若当前渲染的数据的起始位置之前一个单屏数据量的位置没有数据，则将缓冲数据池中的第一个数据的位置作为待渲染数据的起始位置。
可选的，在数据缓冲池中当前渲染的数据的startFlag之前一个num的位置没有数据，则将缓冲数据池中的第一个数据的位置作为待渲染数据的startFlag。
具体的，判断startFlag减去num的值是否小于0，若是，则直接将startFlag设置为0初始状态，即将数据缓冲池中的第一个数据的位置作为待渲染数据的startFlag。
步骤63、若当前渲染的数据的起始位置之前一个单屏数据量的位置有数据，则将当前渲染的数据的起始位置前一个单屏数据量的位置作为待渲染数据的起始位置。
可选的，在数据缓冲池中当前渲染的数据的startFlag之前一个num的位置有数据，则将当前渲染的数据的startFlag前一个num的位置作为待渲染数据的startFlag。
具体的，若startFlag减去num的值不小于0，则新的startFlag等于当前startFlag减去num。
可选的，向上滑动后需要减去占位高度，即用渲染的数据代替占位的部分，此时将view的高度设置为本身高度减去height乘以num和0的最大值。
此外，该方法还包括步骤64、若单屏数据量乘以三小于确定出的待渲染数据的起始位置到当前渲染的数据的结束位置之间的数据量，则将待渲染数据的起始位置后的三个单屏数据量处的位置作为待渲染数据的新的结束位置。
在本步骤中，由于渲染数据缓冲池中所能存放的数据可直接用于页面渲染，为了保证前一屏、当前屏和后一屏有数据能被渲染，需要通过判断上述在数据缓冲池中当前endFlag到新的startFlag的数据量是否大于或等于三屏所能渲染的数据量，来确定一个新的endFlag，以使得新的startFlag到新的endFlag之间的数据能够支持三屏所能渲染的数据。
在一种可能的实现中，在上述步骤62和63之后，判断num*3是否不大于endFlag减去新的startFlag，若是，则说明需要将后一屏的渲染数据去掉一些，以保证渲染的数据量始终保持在三屏的范围，从而保证数据渲染的性能，即将新的endFlag设置为endFlag减去num。进一步地，将数据缓冲池中新的endFlag到新的startFlag之间的数据确定为待渲染数据；
此外，若num*3大于endFlag减去新的startFlag，则说明用户还未将屏幕下滑至三屏以外，此时可以直接将数据缓冲池中endFlag到新的startFlag之间的数据确定为待渲染数据。
本申请实施例提供的小程序的数据渲染方法，若操作事件为下滑操作，则确定在数据缓冲池中当前渲染的数据的起始位置之前一个单屏数据量的位置是否有数据。若当前渲染的数据的起始位置之前一个单屏数据量的位置没有数据，则将缓冲数据池中的第一个数据的位置作为待渲染数据的起始位置；若当前渲染的数据的起始位置之前一个单屏数据量的位置有数据，则将当前渲染的数据的起始位置前一个单屏数据量的位置作为待渲染数据的起始位置。若单屏数据量乘以三小于确定出的待渲染数据的起始位置到当前渲染的数据的结束位置之间的数据量，则将待渲染数据的起始位置后的三个单屏数据量处的位置作为待渲染数据的新的结束位置。该方法中，通过判断数据缓冲池中当前渲染的数据的起始位置之前一个单屏数据量的位置是否有数据，确定待渲染数据的新的起始位置，以及新的结束位置，保证了下滑操作时三屏数据的渲染。
在上述实施例的基础上，图7为本申请实施例提供的事件***的工作流程示意图。如图7所示，该工作流程图包括如下步骤：
第1步、开始；
第2步、监听标识是否为工作状态？若是，则执行第3步；若否，则执行第11步；
第3步、监听屏幕按下事件，记录按下的Y轴位置；
第4步、监听屏幕滑动事件，确定滑动终点Y轴位置；
第5步、判断滑动终点Y轴位置减去按下的Y轴位置是否大于0？若是，则执行第6步；若否，则执行第7步；
第6步、得到滑动标识为下滑、滑动距离，执行第8步；
第7步、得到滑动标识为上滑、滑动距离；
第8步、是否存在计时器？若是，则执行第9步；若否，则执行第10步；
第9步、清空之前的计时器；
第10步、将滑动标识和滑动距离加上配置收集中心收集到的单屏数据量放到计时器中调用渲染计算中心进行渲染计算；
第11步、结束。
在上述实施例的基础上，图8为本申请实施例提供的数据缓冲池的工作流程示意图。如图8所示，该工作流程图包括如下步骤：
第1步、开始；
第2步、获取到异步数据拉取装置拉取的数据；
第3步、判断数据缓冲池中是否有数据？若是，执行第4步；若否，执行第7步；
第4步、将获取的数据添加到数据缓冲池中的数据的末尾；
第5步、将监听标识设置为工作；
第6步、调用渲染计算中心，进入计算逻辑，并执行第8步；
第7步、将获取到的数据放到数据缓冲池中，并执行第5步；
第8步、结束。
在上述实施例的基础上，图9为本申请实施例提供的渲染计算中心的工作流程示意图。如图9所示，该工作流程图包括如下步骤：
第1步、开始；
第2步、获取事件***获得的滑动方向和滑动距离；
第3步、获取配置收集中心的每条数据渲染高度、单屏数据量、屏幕高度；
第4步、在数据缓冲池中的起始位置默认为0，和结束位置默认为单屏数据量乘二；
第5步、调用渲染计算中心，进入计算逻辑；
第6步、判断单屏数据量乘二是否大于数据缓冲池的数据量？若是，则执行第7步；若否，则执行第10步；
第7步、结束位置设置为数据缓冲池的数据量；
第8步、将整个数据缓冲池中的数据放到渲染数据缓冲池中渲染；
第9步、设置监听标识为离线，并执行第30步；
第10步、判断滑动距离是否大于0？若是，则执行第12步；若否，则执行第11步；
第11步、将数据缓冲池中0到单屏数据量乘二的数据放到渲染数据缓冲池中，并执行第30步；
第12步、判断滑动距离是否大于屏幕高度乘以二分之一？若是，则执行第13步；若否，则执行第30步；
第13步、判断滑动标识是否是向上滑动？若是，则执行第23步；若否，则执行第14步；
第14步、判断结束位置加上单屏数据量是否大于数据缓冲池的数据量？若是，则执行第16步；若否，则执行第15步；
第15步、将结束位置设置为当前的结束位置加上单屏数据量，并执行第17步；
第16步、将结束位置设置为数据缓冲池的数据量；
第17步、判断结束位置减去起始位置是否大于单屏数据量乘三？若是，则执行第18步；若否，则执行第29步；
第18步、判断结束位置加上单屏数据量是否大于数据缓冲池的数据量？若是，则执行第19步；若否，则执行第21步；
第19步、将起始位置设置为当前起始位置加上数据缓冲池的数据量减去结束位置；
第20步、将占位的高度设置为每条数据渲染高度乘以(数据缓冲池中的数据总量减去单屏数据量乘以三)，并执行第29步；
第21步、将起始位置设置为当前起始位置加上单屏数据量；
第22步、将占位的高度设置为本身高度加上每条数据渲染高度乘以单屏数据量，并执行第29步；
第23步、判断起始位置减去单屏数据量是否小于0？若是，则执行第24步；若否，则执行第25步；
第24步、起始位置设置为0，并执行第27步；
第25步、起始位置设置为当前起始位置减去单屏数据量；
第26步、将占位的高度设置为其高度减去渲染高度乘以(单屏数据量和0的最大值)；
第27步、判断结束位置减去起始位置是否大于单屏数据量乘以三？若是，则执行第28步；若否，则执行第29步；
第28步、结束位置设置为当前结束位置减去单屏数据量；
第29步、将数据缓冲池中起始位置到结束位置的数据放到渲染数据缓冲池中渲染；
第30步、结束。
上述图7、图8和图9所提供的数据渲染方法，通过确定监听标识为工作状态，获取滑动事件的滑动方向和滑动距离，并根据确定的到的单屏数据量，进入计算逻辑。其中，当操作事件为初始为初始进入小程序，则需要判断单屏数据量乘以二之后是否大于或等于数据缓冲池中的数据量，以确定出当前屏及后一屏的数据在数据缓冲池中的起始位置和结束位置；当操作事件为上滑操作，则需要判断数据缓冲池中当前渲染的数据的结束位置到数据缓冲池中最后一个数据之间的数据量是否大于单屏数据量，以确定出当前屏、前后两屏共三屏的数据在数据缓冲池中的新的结束位置，进一步判断单屏数据量乘以三是否小于新的的结束位置到当前渲染的数据的起始位置之间的数据量，以确定出新的起始位置；当操作事件为下滑操作，则需要判断数据缓冲池中当前渲染的数据的起始位置之前一个单屏数据量的位置是否有数据，以确定出当前屏、前后两屏共三屏的数据在数据缓冲池中的新的起始位置，进一步判断单屏数据量乘以三是否小于新的起始位置到当前渲染的数据的结束位置之间的数据量，以确定出新的结束位置。然后基于确定好的起始位置和结束位置，在数据缓冲池中获取起始位置和结束位置之间的数据，并将数据放到渲染数据缓冲池中进行渲染，该方法实现了当服务端发来大量数据时，小程序页面仍能流畅地显示用户所需的内容，不会出现卡顿、甚至卡死的现象。
图10为本申请实施例提供的小程序的数据渲染装置的结构示意图。如图10所示，该装置包括：确定模块101、获取模块102和处理模块103。
确定模块101，用于根据监听到的操作事件，确定待渲染数据的位置标识，位置标识用于指示待渲染数据在数据缓冲池中的起始和结束位置；
获取模块102，用于从数据缓冲池中获取与位置标识对应的待渲染数据；
处理模块103，用于将待渲染数据复制到渲染数据缓冲池中进行渲染；其中，数据缓冲池为预设的用于存储从小程序的服务端请求到的所有数据的存储区域，渲染数据缓冲池为预设的小程序可直接调用数据进行渲染的存储区域。
在本申请实施例一种可能设计中，处理模块103，还用于根据小程序的页面高度以及每个数据在小程序的页面上的渲染高度，计算得到单屏数据量，单屏数据量为小程序在终端设备上运行时每屏能够渲染的数据量；
根据监听到的操作事件，确定待渲染数据的位置标识，包括：
根据监听到的操作事件以及小程序的单屏数据量，确定待渲染数据的位置标识。
在该种可能的设计中，处理模块103用于根据监听到的操作事件以及小程序的单屏数据量，确定待渲染数据的位置标识，具体为：
处理模块103，具体用于：
若操作事件为初始进入小程序，判断单屏数据量乘以二之后是否大于数据缓冲池中的数据量；
若单屏数据量乘以二之后大于或等于数据缓冲池中的数据量，则将缓冲池中的第一个数据作为起始位置，数据缓冲池中的最后一个数据作为结束位置；其中，待渲染数据的位置标识包括起始位置和结束位置。
可选的，处理模块103，还用于若单屏数据量乘以二之后小于数据缓冲池中的数据量，则将缓冲池中的第一个数据作为起始位置，数据缓冲池中第N个数据作为结束位置，其中N等于单屏数据量乘以二。
在该种可能的设计中，处理模块103，用于根据监听到的操作事件以及小程序的单屏数据量，确定当前需要待渲染数据的位置标识，具体为：
处理模块103，具体用于：
若操作事件为上滑操作，则确定在数据缓冲池中当前渲染的数据的结束位置到数据缓冲池中最后一个数据之间的数据量是否大于单屏数据量；
若是，则将当前渲染的数据的结束位置后增加一个单屏数据量之后的位置作为待渲染数据的结束位置；
否则，则将缓冲数据池中最后一个数据的位置作为待渲染数据的结束位置。
可选的，处理模块103，还用于若单屏数据量乘以三小于确定出的待渲染数据的结束位置到当前渲染的数据的起始位置之间的数据量，则将待渲染数据的结束位置前的三个单屏数据量处的位置作为待渲染数据的新的起始位置。
在该种可能的设计中，处理模块103，用于根据监听到的操作事件以及小程序的单屏数据量，确定当前需要待渲染数据的位置标识，具体为：
处理模块103，具体用于：
若操作事件为下滑操作，则确定在数据缓冲池中当前渲染的数据的起始位置之前一个单屏数据量的位置是否有数据；
若当前渲染的数据的起始位置之前一个单屏数据量的位置没有数据，则将缓冲数据池中的第一个数据的位置作为待渲染数据的起始位置；
若当前渲染的数据的起始位置之前一个单屏数据量的位置有数据，则将当前渲染的数据的起始位置前一个单屏数据量的位置作为待渲染数据的起始位置。
可选的，处理模块103，还用于若单屏数据量乘以三小于确定出的待渲染数据的起始位置到当前渲染的数据的结束位置之间的数据量，则将待渲染数据的起始位置后的三个单屏数据量处的位置作为待渲染数据的新的结束位置。
在本申请实施例另一种可能设计中，处理模块103，还用于在监听到滑动操作时，根据滑动操作在Y轴的起始坐标和结束坐标确定滑动操作为上滑操作或者下滑操作。
在该种可能的设计中，处理模块103，用于根据滑动操作的起始坐标和结束坐标确定滑动操作为上滑操作或者下滑操作，具体为：
处理模块103，具体用于：
计算滑动操作在Y轴上的结束坐标与起始坐标之间的差值；
若差值大于零，则确定滑动操作为下滑操作；
若差值小于零，则确定滑动操作为上滑操作。
在本申请实施例再一种可能设计中，确定模块101用于根据监听到的操作事件，确定待渲染数据的位置标识之前，还用于：
通过异步数据获取方式从小程序的服务端获取数据；
若数据缓冲池中存在数据，则将从小程序的服务端获取到的数据追加存储在数据缓冲池中数据的末尾；
若数据缓冲池中为空，则将从小程序的服务端获取到的数据存储在数据缓冲池。
本实施例提供的数据渲染装置，可用于执行上述实施例中的方案，其实现原理和技术效果类似，在此不再赘述。
需要说明的是，应理解以上装置的各个模块的划分仅仅是一种逻辑功能的划分，实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块通过处理元件调用软件的形式实现，部分模块通过硬件的形式实现。例如，确定模块可以为单独设立的处理元件，也可以集成在上述装置的某一个芯片中实现，此外，也可以以程序代码的形式存储于上述装置的存储器中，由上述装置的某一个处理元件调用并执行以上确定模块的功能。其它模块的实现与之类似。此外这些模块全部或部分可以集成在一起，也可以独立实现。这里的处理元件可以是一种集成电路，具有信号的处理能力。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。
图11为本申请实施例提供的终端设备的结构示意图。如图11所示，该终端设备可以包括：处理器111、存储器112以及显示器113。
处理器111执行存储器存储的计算机执行指令，使得处理器111执行上述实施例中的方案。处理器111可以是通用处理器，包括中央处理器CPU、网络处理器(networkprocessor，NP)等；还可以是数字信号处理器DSP、专用集成电路ASIC、现场可编程门阵列FPGA或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
存储器112和显示器113通过***总线与处理器111连接并完成相互间的通信，存储器112用于存储计算机程序指令。存储器112可能包含随机存取存储器(random accessmemory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。
显示器113用于显示处理器111的处理结果以及和人机交互。可选的，显示器113可以是用户界面，该用户界面可以包括图形、文本、图标、视频及其它们的任意组合。在一些实施例中，显示器113可以为终端设备的前面板；在另一些实施例中，显示器113可以是柔性显示屏，设置在终端设备的弯曲表面上或折叠面上。甚至，显示器113还可以设置成非矩形的不规则图形的显示屏，也即异形屏。显示器113可以采用液晶显示屏(Liquid CrystalDisplay，LCD)、有机发光二极管(Organic Light-Emitting Diode,OLED)等材质制备。
***总线可以是外设部件互连标准(peripheral component interconnect，PCI)总线或扩展工业标准结构(extended industry standard architecture，EISA)总线等。***总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
本申请实施例提供的终端设备，可用于执行上述实施例中的方案，其实现原理和技术效果类似，在此不再赘述。
本申请实施例还提供一种运行指令的芯片，该芯片用于执行上述实施例中的方案。
本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机指令，当该计算机指令在计算机上运行时，使得计算机执行上述实施例的方案。
本申请实施例还提供一种计算机程序产品，该计算机程序产品包括计算机程序，其存储在计算机可读存储介质中，至少一个处理器可以从计算机可读存储介质读取计算机程序，至少一个处理器执行计算机程序时可实现上述实施例中的方案。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求书来限制。

Claims (15)

1.一种小程序的数据渲染方法，其特征在于，应用于终端设备，包括：
根据监听到的操作事件，确定待渲染数据的位置标识，所述位置标识用于指示待渲染数据在数据缓冲池中的起始和结束位置；
从数据缓冲池中获取与所述位置标识对应的待渲染数据；
将所述待渲染数据复制到渲染数据缓冲池中进行渲染；其中，所述数据缓冲池为预设的用于存储从所述小程序的服务端请求到的所有数据的存储区域，所述渲染数据缓冲池为预设的小程序可直接调用数据进行渲染的存储区域。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括：
根据所述小程序的页面高度以及每个数据在所述小程序的页面上的渲染高度，计算得到单屏数据量，所述单屏数据量为所述小程序在所述终端设备上运行时每屏能够渲染的数据量；
所述根据监听到的操作事件，确定待渲染数据的位置标识，包括：
根据监听到的操作事件以及所述小程序的所述单屏数据量，确定待渲染数据的位置标识。
3.根据权利要求2所述的方法，其特征在于，所述根据监听到的操作事件以及所述小程序的所述单屏数据量，确定待渲染数据的位置标识，包括：
若所述操作事件为初始进入所述小程序，判断所述单屏数据量乘以二之后是否大于或等于所述数据缓冲池中的数据量；
若所述单屏数据量乘以二之后大于或等于所述数据缓冲池中的数据量，则将所述缓冲池中的第一个数据作为起始位置，所述数据缓冲池中的最后一个数据作为结束位置；其中，所述待渲染数据的所述位置标识包括所述起始位置和所述结束位置。
4.根据权利要求3所述的方法，其特征在于，所述方法还包括：
若所述单屏数据量乘以二之后小于所述数据缓冲池中的数据量，则将所述缓冲池中的第一个数据作为起始位置，所述数据缓冲池中第N个数据作为结束位置，其中N等于单屏数据量乘以二。
5.根据权利要求2所述的方法，其特征在于，所述根据监听到的操作事件以及所述小程序的所述单屏数据量，确定当前需要待渲染数据的位置标识，包括：
若所述操作事件为上滑操作，则确定在所述数据缓冲池中当前渲染的数据的结束位置到所述数据缓冲池中最后一个数据之间的数据量是否大于所述单屏数据量；
若是，则将当前渲染的数据的结束位置后增加一个单屏数据量之后的位置作为所述待渲染数据的结束位置；
否则，则将所述缓冲数据池中最后一个数据的位置作为所述待渲染数据的结束位置。
6.根据权利要求5所述的方法，其特征在于，所述方法还包括：
若所述单屏数据量乘以三小于确定出的待渲染数据的结束位置到当前渲染的数据的起始位置之间的数据量，则将所述待渲染数据的结束位置前的三个所述单屏数据量处的位置作为所述待渲染数据的新的起始位置。
7.根据权利要求2所述的方法，其特征在于，所述根据监听到的操作事件以及所述小程序的所述单屏数据量，确定当前需要待渲染数据的位置标识，包括：
若所述操作事件为下滑操作，则确定在所述数据缓冲池中当前渲染的数据的起始位置之前一个所述单屏数据量的位置是否有数据；
若所述当前渲染的数据的起始位置之前一个所述单屏数据量的位置没有数据，则将所述缓冲数据池中的第一个数据的位置作为所述待渲染数据的起始位置；
若所述当前渲染的数据的起始位置之前一个所述单屏数据量的位置有数据，则将所述当前渲染的数据的起始位置前一个所述单屏数据量的位置作为所述待渲染数据的起始位置。
8.根据权利要求7所述的方法，其特征在于，所述方法还包括：
若所述单屏数据量乘以三小于确定出的待渲染数据的起始位置到当前渲染的数据的结束位置之间的数据量，则将所述待渲染数据的起始位置后的三个所述单屏数据量处的位置作为所述待渲染数据的新的结束位置。
9.根据权利要求5至8任一项所述的方法，其特征在于，所述方法还包括：
在监听到滑动操作时，根据所述滑动操作在Y轴的起始坐标和结束坐标确定所述滑动操作为上滑操作或者下滑操作。
10.根据权利要求9所述的方法，其特征在于，所述根据所述滑动操作的起始坐标和结束坐标确定所述滑动操作为上滑操作或者下滑操作，包括：
计算所述滑动操作在Y轴上的所述结束坐标与所述起始坐标之间的差值；
若所述差值大于零，则确定所述滑动操作为下滑操作；
若所述差值小于零，则确定所述滑动操作为上滑操作。
11.根据权利要求1至8任一项所述的方法，其特征在于，所述根据监听到的操作事件，确定待渲染数据的位置标识之前，所述方法还包括：
通过异步数据获取方式从所述小程序的服务端获取数据；
若所述数据缓冲池中存在数据，则将从所述小程序的服务端获取到的数据追加存储在所述数据缓冲池中数据的末尾；
若所述数据缓冲池中为空，则将从所述小程序的服务端获取到的数据存储在所述数据缓冲池。
12.一种小程序的数据渲染装置，其特征在于，包括：确定模块、获取模块和处理模块；
所述确定模块，用于根据监听到的操作事件，确定待渲染数据的位置标识，所述位置标识用于指示待渲染数据在数据缓冲池中的起始和结束位置；
所述获取模块，用于从数据缓冲池中获取与所述位置标识对应的待渲染数据；
所述处理模块，用于将所述待渲染数据复制到渲染数据缓冲池中进行渲染；其中，所述数据缓冲池为预设的用于存储从所述小程序的服务端请求到的所有数据的存储区域，所述渲染数据缓冲池为预设的小程序可直接调用数据进行渲染的存储区域。
13.一种终端设备，其特征在于，包括处理器、存储器、显示器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如上述权利要求1-11任一项所述的方法。
14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如权利要求1-11任一项所述的方法。
15.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时用于实现如权利要求1至11任一项所述的方法。
CN202110142398.2A 2021-02-02 2021-02-02 小程序的数据渲染方法、装置、设备及存储介质 Pending CN113778430A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110142398.2A CN113778430A (zh) 2021-02-02 2021-02-02 小程序的数据渲染方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110142398.2A CN113778430A (zh) 2021-02-02 2021-02-02 小程序的数据渲染方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
CN113778430A true CN113778430A (zh) 2021-12-10

Family

ID=78835703

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110142398.2A Pending CN113778430A (zh) 2021-02-02 2021-02-02 小程序的数据渲染方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN113778430A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111309417A (zh) * 2020-01-19 2020-06-19 北京无限光场科技有限公司 应用程序中的数据显示方法、装置、电子设备和可读介质
CN114281434A (zh) * 2021-12-15 2022-04-05 创优数字科技(广东)有限公司 小程序用户信息管理方法、装置、计算机设备和存储介质

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111309417A (zh) * 2020-01-19 2020-06-19 北京无限光场科技有限公司 应用程序中的数据显示方法、装置、电子设备和可读介质
CN114281434A (zh) * 2021-12-15 2022-04-05 创优数字科技(广东)有限公司 小程序用户信息管理方法、装置、计算机设备和存储介质
CN114281434B (zh) * 2021-12-15 2022-11-29 创优数字科技(广东)有限公司 小程序用户信息管理方法、装置、计算机设备和存储介质

Similar Documents

Publication Publication Date Title
US10268658B2 (en) Page loading method and system, and computer-readable storage medium
EP3779684B1 (en) Icon display method, device and terminal
US11768694B2 (en) Content sharing method, device, terminal and storage medium
US20130024869A1 (en) Picture loading method and terminal
CN109976655B (zh) 长截屏方法、装置、终端及存储介质
CN113778430A (zh) 小程序的数据渲染方法、装置、设备及存储介质
CN109388317B (zh) 一种图片加载方法、终端设备及存储介质
CN106547836A (zh) 一种大尺寸照片加载方法及***
CN111782332A (zh) 应用界面切换方法、装置、终端及存储介质
CN113467871A (zh) H5页面展示方法、装置、设备及存储介质
CN105549814B (zh) 一种基于移动终端的拍照方法及该移动终端
CN109684000B (zh) App数据显示方法、装置、设备及计算机可读存储介质
CN113051016B (zh) 页面显示方法、装置、设备和存储介质
CN112905093B (zh) 内容显示方法、装置、存储介质及电子设备
CN110888704A (zh) 一种高并发接口处理方法、装置、设备及存储介质
US11314391B2 (en) Navigation bar controlling method and terminal
AU2014308633A1 (en) Swipe toolbar to switch tabs
EP3757739A1 (en) Method for display when exiting an application, and terminal
CN107045546B (zh) 一种网页处理方法、装置及智能终端
CN110362766B (zh) 一种页面显示控制方法及终端
CN103869926A (zh) 一种省电的方法及电子设备
CN110209447B (zh) 一种列表页数据显示方法以及列表页数据显示装置
CN110633433B (zh) 一种页面缓存方法、装置、电子设备及存储介质
CN114356479A (zh) 一种页面渲染方法及装置
CN114428657A (zh) 一种在H5端基于Taro框架的滑动方法与设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination