CN113467871A - H5页面展示方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及网页设计领域，公开了一种H5页面展示方法、装置、设备及存储介质，用于提升H5页面展示的流畅度。所述H5页面展示方法包括：根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；判断所述偏移量是否大于预置偏移量阈值；若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。

Description

H5页面展示方法、装置、设备及存储介质

技术领域

本发明涉及网页设计领域，尤其涉及一种H5页面展示方法、装置、设备及存储介质。

背景技术

随着互联网行业的高速发展，信息展示的形式多种多样，通过列表页和详情页的形式为用户呈现数据和信息成为主流。其中，列表页的内容丰富多样，有文字有图片甚至有视频。对于一些列表页复杂数据量庞大的应用程序的页面来说，当用户快速滑动列表页进行浏览时，会出现列表页卡顿等滑动不顺畅的性能问题，影响了用户的使用体验。

在App、网页、PC端和移动端中，长列表这种展示形式普遍存在，现有技术在针对用户快速滑动页面时，因为页面渲染的不及时而造成页面显示出现明显的卡顿。

发明内容

本发明提供了一种H5页面展示方法、装置、设备及存储介质，用于提高H5页面展示的流畅度。

本发明第一方面提供了一种H5页面展示方法，所述H5页面展示方法包括：根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；判断所述偏移量是否大于预置偏移量阈值；若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。

可选的，在本发明第一方面的第一种实现方式中，所述根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面包括：获取H5页面中的预置节点，在所述节点中设置固定长度列表，所述固定长度列表依次包括可视区域上方列表、可视区域列表和可视区域下方列表；将所述可视区域上方列表、所述可视区域列表和所述可视区域下方列表确定为初始长列表页面。

可选的，在本发明第一方面的第二种实现方式中，所述基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面包括：获取所述初始长列表页面中的条目，以及获取待渲染的目标数据；调用预置的渲染组件，并基于所述目标数据对所述条目进行数据填充，得到目标长列表页面。

可选的，在本发明第一方面的第三种实现方式中，在所述基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面之后，在所述当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量之前，还包括：计算所述初始长列表页面的数据渲染速率；调用预置回调函数对所述数据渲染速率进行控制。

可选的，在本发明第一方面的第四种实现方式中，所述当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量包括：当所述目标长列表页面开始滚动时，在所述目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点；采用预置的Intersection Observer对象对所述页面上方监听节点和所述页面下方监听节点添加监听元素滚动事件；通过所述监听元素滚动事件获取所述目标长列表页面的垂直距离坐标，并将所述垂直距离坐标确定为偏移量，得到偏移量。

可选的，在本发明第一方面的第五种实现方式中，所述方法还包括：若所述偏移量小于或等于预置偏移量阈值，则采用所述目标长列表页面进行页面展示。

可选的，在本发明第一方面的第六种实现方式中，在所述若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示之后，还包括：调用预置虚拟dom，对页面展示后的所述目标长列表页面进行列表回收。

本发明第二方面提供了一种H5页面展示装置，所述H5页面展示装置包括：列表设置模块，用于根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；渲染模块，用于基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；监听模块，用于当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；判断模块，用于判断所述偏移量是否大于预置偏移量阈值；展示模块，用于若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。

可选的，在本发明第二方面的第一种实现方式中，所述列表设置模块具体用于：获取H5页面中的预置节点，在所述节点中设置固定长度列表，所述固定长度列表依次包括可视区域上方列表、可视区域列表和可视区域下方列表；将所述可视区域上方列表、所述可视区域列表和所述可视区域下方列表确定为初始长列表页面。

可选的，在本发明第二方面的第二种实现方式中，所述渲染模块具体用于：获取所述初始长列表页面中的条目，以及获取待渲染的目标数据；调用预置的渲染组件，并基于所述目标数据对所述条目进行数据填充，得到目标长列表页面。

可选的，在本发明第二方面的第三种实现方式中，所述H5页面展示装置还包括：控制模块，用于计算所述初始长列表页面的数据渲染速率；调用预置回调函数对所述数据渲染速率进行控制。

可选的，在本发明第二方面的第四种实现方式中，所述监听模块具体用于：当所述目标长列表页面开始滚动时，在所述目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点；采用预置的Intersection Observer对象对所述页面上方监听节点和所述页面下方监听节点添加监听元素滚动事件；通过所述监听元素滚动事件获取所述目标长列表页面的垂直距离坐标，并将所述垂直距离坐标确定为偏移量，得到偏移量。

可选的，在本发明第二方面的第五种实现方式中，所述H5页面展示装置还包括：第二展示模块，用于若所述偏移量小于或等于预置偏移量阈值，则采用所述目标长列表页面进行页面展示。

可选的，在本发明第二方面的第六种实现方式中，所述H5页面展示装置还包括：列表回收模块，用于调用预置虚拟dom，对页面展示后的所述目标长列表页面进行列表回收。

本发明第三方面提供了一种H5页面展示设备，包括：存储器和至少一个处理器，所述存储器中存储有指令；所述至少一个处理器调用所述存储器中的所述指令，以使得所述H5页面展示设备执行上述的H5页面展示方法。

本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的H5页面展示方法。

本发明提供的技术方案中，根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；判断所述偏移量是否大于预置偏移量阈值；若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。本发明可以在偏移量较大时，提前渲染页面底部的待展示页面，从而提高了H5页面展示的流畅度。

附图说明

图1为本发明实施例中H5页面展示方法的第一个实施例示意图；

图2为本发明实施例中H5页面展示方法的第二个实施例示意图；

图3为本发明实施例中H5页面展示装置的第一个实施例示意图；

图4为本发明实施例中H5页面展示装置的第二个实施例示意图；

图5为本发明实施例中H5页面展示设备的一个实施例示意图。

具体实施方式

本发明实施例提供了一种H5页面展示方法、装置、设备及存储介质，用于提高H5页面展示的流畅度。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”或“具有”及其任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中H5页面展示方法的第一个实施例包括：

101、根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；

可以理解的是，本发明的执行主体可以为H5页面展示装置，还可以是终端或者服务器，具体此处不做限定。本发明实施例以服务器为执行主体为例进行说明。

服务器根据H5页面中的预置节点，在节点中设置预设高度的长列表，预设高度设为H5页面高度的3倍到4倍，例如：将行高设置为每行是50像素(pixel，px)，此处的像素为手机终端的像素，像素随手机的分辨率变化而变化，H5页面一共有1000行，因此H5页面高度就是50000，按照H5页面高度的3倍设置长列表，设置长列表高度为150000，得到初始长列表页面高度为150000。进一步地，长列表是指前端开发中会遇到展示大量结构化数据列表的需求，例如：城市列表、车辆品牌列表、***品牌列表等。

102、基于预置的渲染组件，对初始长列表页面进行数据渲染，得到目标长列表页面；

服务器获取初始长列表页面中的条目并获取用户输入的待渲染的目标数据，调用预置的渲染组件，并将目标数据写入初始长列表页面中的条目中进行数据填充，标记目标数据对应的渲染范围，根据渲染函数渲染出的节点，获取节点高度，然后计算出初始长列表页面的总高度，通过渲染组件渲染出目标数据，得到目标长列表页面。

103、当目标长列表页面开始滚动时，通过监听元素滚动事件获取目标长列表页面的滚动垂直距离，得到偏移量；

当目标长列表页面开始滚动时，服务器在目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点，采用预置的Intersection Observer对象对页面上方监听节点和页面下方监听节点添加监听元素滚动事件，通过监听元素滚动事件获取目标长列表页面的垂直距离坐标，并将垂直距离坐标确定为偏移量，元素滚动监听事件是当滑动目标长列表页面的时候用于回调的，元素滚动监听事件中有个滑动的y值，y值表示的是在这个滑动的过程中，滑动距离屏幕上面的偏移量。

104、判断偏移量是否大于预置偏移量阈值；

服务器判断偏移量是否大于预置偏移量阈值，例如：当偏移量为5，偏移量阈值为4时，则偏移量大于偏移量阈值；当偏移量为3，偏移量阈值为4时，偏移量小于或等于偏移量阈值。

105、若偏移量大于偏移量阈值，则从H5页面的底部对H5页面进行二次渲染，得到页面底部待展示页面，并采用页面底部待展示页面进行页面展示。

服务器当偏移量大于偏移量阈值时，默认用户想要浏览页面底部，则二次渲染时从H5页面的底部进行倒序渲染，倒序渲染是从H5页面最底部的条目依次往页面上方的条目进行二次渲染，得到页面底部待展示页面，页面底部待展示页面的页面大小为H5页面可视区域大小的三倍，并采用页面底部待展示页面进行页面展示。服务器当偏移量小于或等于偏移量阈值时，认为用户采用常规浏览方式进行页面浏览，此时，采用目标长列表页面进行页面展示。

本发明实施例中，根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；基于预置的渲染组件，对初始长列表页面进行数据渲染，得到目标长列表页面；当目标长列表页面开始滚动时，通过监听元素滚动事件获取目标长列表页面的滚动垂直距离，得到偏移量；判断偏移量是否大于预置偏移量阈值；若偏移量大于偏移量阈值，则从H5页面的底部对页面进行二次渲染，得到页面底部待展示页面，并采用页面底部待展示页面进行页面展示。本发明可以在偏移量较大时，提前渲染页面底部的待展示页面，从而提高了H5页面展示的流畅度。

请参阅图2，本发明实施例中H5页面展示方法的第二个实施例包括：

201、根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；

服务器根据H5页面中的预置节点，在节点中设置预设高度的长列表，预设高度设为H5页面高度的3倍到4倍，例如：将行高设置为每行是50像素(pixel，px)，此处的像素为手机终端的像素，像素随手机的分辨率变化而变化，H5页面一共有1000行，因此H5页面高度就是50000，按照H5页面高度的3倍设置长列表，设置长列表高度为150000，得到初始长列表页面高度为150000。进一步地，长列表是指前端开发中会遇到展示大量结构化数据列表的需求，例如：城市列表、车辆品牌列表、***品牌列表等。

可选的，步骤201包括：获取H5页面中的预置节点，在节点中设置固定长度列表，固定长度列表依次包括可视区域上方列表、可视区域列表和可视区域下方列表；将所述可视区域上方列表、所述可视区域列表和所述可视区域下方列表确定为初始长列表页面。

服务器获取H5页面中的预置节点，节点包括：可视区域上方的节点，可视区域的节点，可视区域下方的节点，在可视区域上方的节点设置与可视区域等高的可视区域上方列表，在可视区域的节点设置与可视区域等高的可视区域列表，以及在可视区域下方的节点设置与可视区域等高的可视区域上方列表。例如：当H5页面的可视区域高度为50000时，50000是1000行每行行高为50像素(pixel，px)组成，可视区域上方列表的列表高度设置为50000、可视区域列表的列表高度设置为50000以及将可视区域下方列表的列表高度设置为50000，得到的初始长列表页面的高度为150000。

202、基于预置的渲染组件，对初始长列表页面进行数据渲染，得到目标长列表页面；

服务器获取初始长列表页面中的条目并获取用户输入的待渲染的目标数据，调用预置的渲染组件，并将目标数据写入初始长列表页面中的条目中进行数据填充，标记目标数据对应的渲染范围，根据渲染函数渲染出的节点，获取节点高度，然后计算出初始长列表页面的总高度，通过渲染组件渲染出目标数据，得到目标长列表页面。

可选的，步骤202包括：获取初始长列表页面中的条目，以及获取待渲染的目标数据；调用预置的渲染组件，并基于目标数据对条目进行数据填充，得到目标长列表页面。

服务器获取初始长列表页面中的条目，根据初始长列表页面的尺寸和预置列表条目的平均高度，计算出初始长列表页面中的条目数量与范围，当对初始长列表页面进行渲染时，根据列表条目的平均高度和初始长列表页面中的条目，获取待渲染的目标数据。服务器构建渲染树，对初始长列表页面中的条目进行位置计算和样式计算，然后根据渲染树对页面进行渲染。例如：将待渲染的目标数据限制在初始长列表页面中，给初始长列表页面一个固定的高度，然后目标数据将在初始长列表页面显示，需要渲染初始长列表页面中适量的节点，比如高度为500的初始长列表页面，每一条目50，则渲染10条目就可以填充满初始长列表页面，得到目标长列表页面。

可选的，在步骤202之后，步骤203之前还包括：计算初始长列表页面的数据渲染速率；调用预置回调函数对数据渲染速率进行控制。

服务器根据目标数据对条目进行数据填充的速率，即每一个条目被渲染完成的时间生成数据渲染的速率。服务器根据获取到数据渲染的速率，调用预置回调函数，回调函数为requestAnimationFrame(callback)，调用requestAnimationFrame(callback)时不会执行callback，而是会将元组<handle,callback>***到回调函数列表末尾，并返回handle值，其中，回调函数包含有布尔标识(cancelled)，布尔标识的初始值为失败(false)，并且对外不可见，H5页面遍历回调函数列表，判断元组<handle,callback>的callback的布尔标识，如果执行的结果为false，则执行callback，从而实现对数据渲染的速率进行控制。

203、当目标长列表页面开始滚动时，在目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点；

服务器当目标长列表页面开始滚动时，在目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点，通过在目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点，以便用户通过点击按钮等点击操作，使目标长列表页面跳转至该目标长列表页面的监听节点位置。

204、采用预置的Intersection Observer对象对页面上方监听节点和页面下方监听节点添加监听元素滚动事件；

服务器采用预置的Intersection Observer对象对页面上方监听节点和页面下方监听节点添加监听元素滚动事件，当页面开始滚动时，顶部通栏的透明度随着页面卷曲的高度增加而变大，当页面滚动距离超过某一个高度时，透明度就固定不变，对网页中页面上方监听节点和页面下方监听节点产生的事件行为进行监听，并对监听产生的数据进行自动收集。例如：如果想获取某商品的点击数量，就得在点击事件的中搜集点击的商品数据，发出包含商品名称和点击事件的数据。

205、通过监听元素滚动事件获取目标长列表页面的垂直距离坐标，并将垂直距离坐标确定为偏移量，得到偏移量；

服务器监听元素滚动事件来获取到滚动的垂直距离坐标，根据垂直距离坐标，可以知道当前应该渲染到第几行，但是如果H5页面快速滚动，为了不让出现闪烁的效果，需要提前预先渲染页面，比如需要展示10行，可以多渲染10行，作为储备，当H5页面开始滚动的时候，根据设置的阀值，再次提前渲染好额外待展示的行，此外，为了避免H5页面快速的滚动，导致频繁的渲染行，使用requestAnimationFrame来实现对渲染速率的控制，从而使H5页面平滑的滚动。

206、判断偏移量是否大于预置偏移量阈值；

服务器判断偏移量是否大于预置偏移量阈值，例如：当偏移量为5，偏移量阈值为4时，则偏移量大于偏移量阈值；当偏移量为3，偏移量阈值为4时，偏移量小于或等于偏移量阈值。

可选的，在步骤206之后还包括：若偏移量小于或等于预置偏移量阈值，则采用目标长列表页面进行页面展示。

服务器当偏移量小于或等于偏移量阈值时采用目标长列表页面进行页面展示，具体为：获取H5页面的尺寸，并根据尺寸计算目标长列表页面对应的列表条目高度，获取初始长列表页面中的条目，根据初始长列表页面的尺寸和预置列表条目的平均高度，计算出初始长列表页面中的条目数量，调用预置生命周期函数，对偏移量和列表条目高度进行高度信息回调并计算目标长列表页面的实际渲染高度，得到实际渲染高度，调用预置生命周期函数，生命周期函数例如：componentDidMount生命周期是页面出来的时候进行的事件回调，或者componentDidUpdate生命周期是组件发生数据改变的时候进行的回调。服务器根据偏移量和列表条目高度进行高度信息回调，并计算目标长列表页面的实际渲染高度，得到目标长列表页面的实际渲染高度。

207、若偏移量大于偏移量阈值，则从H5页面的底部对H5页面进行二次渲染，得到页面底部待展示页面，并采用页面底部待展示页面进行页面展示。

服务器当偏移量大于偏移量阈值时，默认用户想要浏览页面底部，则二次渲染时从H5页面的底部进行倒序渲染，倒序渲染是从H5页面最底部的条目依次往页面上方的条目进行渲染，得到页面底部待展示页面，页面底部待展示页面的页面大小为H5页面可视区域大小的三倍，并采用页面底部待展示页面进行页面展示。

可选的，在步骤207之后，还包括：调用预置虚拟dom，对页面展示后的目标长列表页面进行列表回收。

服务器采用预置标记工具，对目标长列表页面的渲染范围进行标记，得到标记长列表页面，基于标记长列表页面，计算目标长列表页面中不在页面中的列表，得到待更新列表；调用预置虚拟dom，对待更新列表进行回收。具体的，采用预置标记工具，对目标长列表页面的渲染范围进行标记，得到标记长列表页面，服务器采用预置标记工具，标记工具包括：startIndex与endIndex，通过startIndex与endIndex标记固定长度列表对应的数组数据的渲染范围，在数据长度或内容变化时及时更新与重新初始化，根据之前标记的startIndex与endIndex，重新计算totalHeight，padding-top，padding-bottom，然后根据startIndex与endIndex中变化的数据项更新dom节点，因此整个目标长列表页面也完成了更新，基于标记长列表页面，计算目标长列表页面中不在页面中的列表，得到待更新列表，将目标长列表页面中减去标记长列表页面，得到目标长列表页面中不在页面中的列表，即待更新列表，通过dom回收技术，可以让长列表页面的节点数保持在一个较低的值，这样会占用较少的内存且可以优化每一次重新布局的***开销，不会在滑动页面的时候出现卡顿；通过占位骨架图，在用户较快的滑动长列表页面的时候，可以先以骨架图的形式占位在列表条目的对应位置，不会造成滑动的卡顿，从而提高H5长列表页面的性能。服务器调用预置虚拟dom，降低待更新列表占目标长列表页面的占比，目标长列表页面是指真正被访问到的缓存页，如果目标长列表页面的比率偏低，则部分磁盘带宽会被浪费到读取无用的缓存上，并且无用列表页面会间接导致***内存紧张，最后可能会严重影响***的运行性能，因此，将待更新列表进行资源释放操作，以此实现对待更新列表进行高效回收的目的。

上面对本发明实施例中H5页面展示方法进行了描述，下面对本发明实施例中H5页面展示装置进行描述，请参阅图3，本发明实施例中H5页面展示装置第一个实施例包括：

列表设置模块301，用于根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；

渲染模块302，用于基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；

监听模块303，用于当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；

判断模块304，用于判断所述偏移量是否大于预置偏移量阈值；

第一展示模块305，用于若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。

本发明实施例中，根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；判断所述偏移量是否大于预置偏移量阈值；若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。本发明可以在偏移量较大时，提前渲染页面底部的待展示页面，从而提高了H5页面展示的流畅度。

请参阅图4，本发明实施例中H5页面展示装置第二个实施例包括：

列表设置模块301，用于根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；

渲染模块302，用于基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；

监听模块303，用于当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；

判断模块304，用于判断所述偏移量是否大于预置偏移量阈值；

第一展示模块305，用于若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。

可选的，所述列表设置模块301具体用于：获取H5页面中的预置节点，在所述节点中设置固定长度列表，所述固定长度列表依次包括可视区域上方列表、可视区域列表和可视区域下方列表；将所述可视区域上方列表、所述可视区域列表和所述可视区域下方列表确定为初始长列表页面。

可选的，所述渲染模块302具体用于：获取所述初始长列表页面中的条目，以及获取待渲染的目标数据；调用预置的渲染组件，并基于所述目标数据对所述条目进行数据填充，得到目标长列表页面。

可选的，所述H5页面展示装置还包括：控制模块306，用于计算所述初始长列表页面的数据渲染速率；调用预置回调函数对所述数据渲染速率进行控制。

可选的，所述监听模块303具体用于：当所述目标长列表页面开始滚动时，在所述目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点；采用预置的Intersection Observer对象对所述页面上方监听节点和所述页面下方监听节点添加监听元素滚动事件；通过所述监听元素滚动事件获取所述目标长列表页面的垂直距离坐标，并将所述垂直距离坐标确定为偏移量，得到偏移量。

可选的，所述H5页面展示装置还包括：第二展示模块307，用于若所述偏移量小于或等于预置偏移量阈值，则采用所述目标长列表页面进行页面展示。

可选的，所述H5页面展示装置还包括：列表回收模块308，用于调用预置虚拟dom，对页面展示后的所述目标长列表页面进行列表回收。

上面图3和图4从模块化功能实体的角度对本发明实施例中的H5页面展示装置进行详细描述，下面从硬件处理的角度对本发明实施例中H5页面展示设备进行详细描述。

图5是本发明实施例提供的一种H5页面展示设备的结构示意图，该H5页面展示设备500可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)510(例如，一个或一个以上处理器)和存储器520，一个或一个以上存储应用程序533或数据532的存储介质530(例如一个或一个以上海量存储设备)。其中，存储器520和存储介质530可以是短暂存储或持久存储。存储在存储介质530的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对H5页面展示设备500中的一系列指令操作。更进一步地，处理器510可以设置为与存储介质530通信，在H5页面展示设备500上执行存储介质530中的一系列指令操作。

H5页面展示设备500还可以包括一个或一个以上电源540，一个或一个以上有线或无线网络接口550，一个或一个以上输入输出接口560，和/或，一个或一个以上操作***531，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图5示出的H5页面展示设备结构并不构成对H5页面展示设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

本发明还提供一种H5页面展示设备，所述H5页面展示设备包括存储器和处理器，存储器中存储有计算机可读指令，计算机可读指令被处理器执行时，使得处理器执行上述各实施例中的所述H5页面展示方法的步骤。

本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行所述H5页面展示方法的步骤。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种H5页面展示方法，其特征在于，所述H5页面展示方法包括：

根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；

基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；

当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；

判断所述偏移量是否大于预置偏移量阈值；

若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。

2.根据权利要求1所述的H5页面展示方法，其特征在于，所述根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面包括：

获取H5页面中的预置节点，在所述节点中设置固定长度列表，所述固定长度列表依次包括可视区域上方列表、可视区域列表和可视区域下方列表；

将所述可视区域上方列表、所述可视区域列表和所述可视区域下方列表确定为初始长列表页面。

3.根据权利要求1所述的H5页面展示方法，其特征在于，所述基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面包括：

获取所述初始长列表页面中的条目，以及获取待渲染的目标数据；

调用预置的渲染组件，并基于所述目标数据对所述条目进行数据填充，得到目标长列表页面。

4.根据权利要求1所述的H5页面展示方法，其特征在于，在所述基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面之后，在所述当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量之前，还包括：

计算所述初始长列表页面的数据渲染速率；

调用预置回调函数对所述数据渲染速率进行控制。

5.根据权利要求1所述的H5页面展示方法，其特征在于，所述当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量包括：

当所述目标长列表页面开始滚动时，在所述目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点；

采用预置的Intersection Observer对象对所述页面上方监听节点和所述页面下方监听节点添加监听元素滚动事件；

通过所述监听元素滚动事件获取所述目标长列表页面的垂直距离坐标，并将所述垂直距离坐标确定为偏移量，得到偏移量。

6.根据权利要求1所述的H5页面展示方法，其特征在于，所述方法还包括：

若所述偏移量小于或等于预置偏移量阈值，则采用所述目标长列表页面进行页面展示。

7.根据权利要求1-6中任一项所述的H5页面展示方法，其特征在于，在所述若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示之后，还包括：

调用预置虚拟dom，对页面展示后的所述目标长列表页面进行列表回收。

8.一种H5页面展示装置，其特征在于，所述H5页面展示装置包括：

列表设置模块，用于根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；

渲染模块，用于基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；

监听模块，用于当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；

判断模块，用于判断所述偏移量是否大于预置偏移量阈值；

第一展示模块，用于若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。

9.一种H5页面展示设备，其特征在于，所述H5页面展示设备包括：存储器和至少一个处理器，所述存储器中存储有指令；

所述至少一个处理器调用所述存储器中的所述指令，以使得所述H5页面展示设备执行如权利要求1-7中任一项所述的H5页面展示方法。

10.一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，其特征在于，所述指令被处理器执行时实现如权利要求1-7中任一项所述的H5页面展示方法。

Images