【技术实现步骤摘要】
一种H5列表的渲染加速方法、装置、设备和介质
[0001]本专利技术涉及计算机
，特别涉及一种H5列表的渲染加速方法、装置、设备和介质。
技术介绍
[0002]H5(即HTML5标准)列表渲染加速是IT领域比较常见的技术，但是目前H5列表渲染加速都是对所有数据的高度做了强制限定，然后做指定内容的应用，因此当列表内部的数据高度不一致时，但每屏数据的条数固定，在下拉加载中或者上拉加载时，如果某条数据的高度偏小，缓存中可能存在取到的只有半屏的数据，这时就会导致拉到这个屏时，发现缓存不够，只得又重新加载新的数据，导致该屏数据的缓存计算了2次，滑动到一半就又跑去计算，就会导致屏幕滚动不平滑，而当列表内部出现高度过高的数据时，还会因为缓存内容过多而导致屏幕卡顿。然而在实际应用中，列表内的数据经常是不等高的，若过多无法平滑或卡顿的滚动，势必带来较差的用户体验。
技术实现思路
[0003]本专利技术要解决的技术问题，在于提供一种H5列表的渲染加速方法、装置、设备和介质，在H5列表被渲染前，通过逐条累加数据高度，得到屏幕...
【技术保护点】
【技术特征摘要】
1.一种H5列表的渲染加速方法，其特征在于：包括下述步骤：S1、在页面初始化时通过api获得屏幕高度，并在列表渲染前，利用api获得每条数据的虚拟dom高度值；S2、通过循环数据高度累加法，依次得到第一屏和第二屏的实际数据高度与实际数据条数并进行记录，将第一屏和第二屏的数据放入虚拟缓存；其中，所述循环数据高度累加法是循环依序逐条累加每条数据的虚拟dom高度值，每当累加值大于或等于屏幕高度时停止累加，得到一屏的实际数据高度与实际数据条数；S3、当页面触发上拉滚动，则通过所述循环数据高度累加法逐一加载后续屏的数据至虚拟缓存中，且每加载一屏数据均记录该屏数据的实际数据条数和结尾数据的条数值，但每次加载是仅在虚拟缓存中保留三屏数据，分别为当前屏、前一屏和后一屏的数据，直到当前屏为倒数第二屏时，最后一屏数据加载完毕，则停止加载；当页面触发下拉滚动时，根据记录的各屏的实际数据条数和结尾数据的条数值，将历史数据逐屏加载至虚拟缓存中，但每次加载是仅在虚拟缓存中保留三屏数据，分别为当前屏、前一屏和后一屏的数据，直到当前屏为第二屏时，第一屏的数据加载完毕，则停止加载。2.根据权利要求1所述的一种H5列表的渲染加速方法，其特征在于：所述步骤S2和步骤S3中，获得每条数据的虚拟dom高度值时，把所有数据的虚拟dom的高度有序的放到第一列表内，则每条数据的虚拟dom的高度可以用该第一列表的序号来指代。3.根据权利要求1所述的一种H5列表的渲染加速方法，其特征在于：所述步骤S2和步骤S3中，每得到一屏的实际数据高度与实际数据条数时，将所述实际数据高度、所述实际数据条数以及一屏结尾数据的条数值保存在第二列表中。4.根据权利要求1所述的一种H5列表的渲染加速方法，其特征在于：通过循环数据高度累加法，得到第一屏至第二屏的实际数据高度与实际数据条数的具体过程如下：(1)、依序逐条累加每条数据的虚拟dom高度值，当累加值大于或等于屏幕高度时停止累加，得到第一屏的实际数据高度与实际数据条数，并记录该第一屏的结尾数据的条数值，将该第一屏的实际数据高度、实际数据条数以及结尾数据的条数值放入第二列表中；(2)、获取第二列表中的第一屏的结尾数据的条数值，以所述第一屏结尾数据的条数值的下一条数据为起点，继续向下依序逐条累加每条数据的虚拟dom高度值，当累加值大于或等于屏幕高度时停止累加，得到第二屏的实际数据高度与实际数据条数，并记录该第二屏结尾数据的条数值，将该第二屏的实际数据高度、实际数据条数以及结尾数据的条数值放入第二列表中。5.一种H5列表的渲染加速装置，其特征在于：包括：api高度获取模块，用于在页面初始化时获得屏幕高度，并在列表渲染前获得每条数据的虚拟dom高度值；两屏数据获取模块，用于通过循...
【专利技术属性】
技术研发人员：刘平，
申请(专利权)人：摩尔元数厦门科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。