一种H5列表的渲染加速方法、装置、设备和介质与流程

一种h5列表的渲染加速方法、装置、设备和介质
技术领域
1.本发明涉及计算机技术领域，特别涉及一种h5列表的渲染加速方法、装置、设备和介质。


背景技术：

2.h5(即html5标准)列表渲染加速是it领域比较常见的技术，但是目前h5列表渲染加速都是对所有数据的高度做了强制限定，然后做指定内容的应用，因此当列表内部的数据高度不一致时，但每屏数据的条数固定，在下拉加载中或者上拉加载时，如果某条数据的高度偏小，缓存中可能存在取到的只有半屏的数据，这时就会导致拉到这个屏时，发现缓存不够，只得又重新加载新的数据，导致该屏数据的缓存计算了2次，滑动到一半就又跑去计算，就会导致屏幕滚动不平滑，而当列表内部出现高度过高的数据时，还会因为缓存内容过多而导致屏幕卡顿。然而在实际应用中，列表内的数据经常是不等高的，若过多无法平滑或卡顿的滚动，势必带来较差的用户体验。


技术实现要素：

3.本发明要解决的技术问题，在于提供一种h5列表的渲染加速方法、装置、设备和介质，在h5列表被渲染前，通过逐条累加数据高度，得到屏幕虚拟缓存条数，使渲染得以优化，从而解决因列表内部的内容高度问题而导致的屏幕滚动不平滑以及屏幕卡顿的问题。
4.第一方面，本发明提供了一种h5列表的渲染加速方法，包括下述步骤：
5.s1、在页面初始化时通过api获得屏幕高度，并在列表渲染前，利用api获得每条数据的虚拟dom高度值；
6.s2、通过循环数据高度累加法，依次得到第一屏和第二屏的实际数据高度与实际数据条数并进行记录，将第一屏和第二屏的数据放入虚拟缓存；
7.其中，所述循环数据高度累加法是循环依序逐条累加每条数据的虚拟dom高度值，每当累加值大于或等于屏幕高度时停止累加，得到一屏的实际数据高度与实际数据条数；
8.s3、当页面触发上拉滚动，则通过所述循环数据高度累加法逐一加载后续屏的数据至虚拟缓存中，且每加载一屏数据均记录该屏数据的实际数据条数和结尾数据的条数值，但每次加载是仅在虚拟缓存中保留三屏数据，分别为当前屏、前一屏和后一屏的数据，直到当前屏为倒数第二屏时，最后一屏数据加载完毕，则停止加载；
9.当页面触发下拉滚动时，根据记录的各屏的实际数据条数和结尾数据的条数值，将历史数据逐屏加载至虚拟缓存中，但每次加载是仅在虚拟缓存中保留三屏数据，分别为当前屏、前一屏和后一屏的数据，直到当前屏为第二屏时，第一屏的数据加载完毕，则停止加载。
10.第二方面，本发明提供了一种h5列表的渲染加速装置，包括：
11.api高度获取模块，用于在页面初始化时获得屏幕高度，并在列表渲染前获得每条数据的虚拟dom高度值；
12.两屏数据获取模块，用于通过循环数据高度累加法，依次得到第一屏和第二屏的实际数据高度与实际数据条数并进行记录，将第一屏和第二屏的数据放入虚拟缓存；
13.其中，所述循环数据高度累加法是循环依序逐条累加每条数据的虚拟dom高度值，每当累加值大于或等于屏幕高度时停止累加，得到一屏的实际数据高度与实际数据条数；
14.第三屏数据获取模块，用于当页面触发上拉滚动，则通过所述循环数据高度累加法逐一加载后续屏的数据至虚拟缓存中，且每加载一屏数据均记录该屏数据的实际数据条数和结尾数据的条数值，但每次加载是仅在虚拟缓存中保留三屏数据，分别为当前屏、前一屏和后一屏的数据，直到当前屏为倒数第二屏时，最后一屏数据加载完毕，则停止加载；或者
15.用于当页面触发下拉滚动时，根据记录的各屏的实际数据条数和结尾数据的条数值，将历史数据逐屏加载至虚拟缓存中，但每次加载是仅在虚拟缓存中保留三屏数据，分别为当前屏、前一屏和后一屏的数据，直到当前屏为第二屏时，第一屏的数据加载完毕，则停止加载。
16.第三方面，本发明提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的方法。
17.第四方面，本发明提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。
18.本发明实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：在h5列表被渲染前，通过循环数据高度累加法，逐条累加数据的虚拟dom高度来匹配屏幕显示的数据量，仅加载当前屏以及前后屏共三屏(首屏或末屏则加载两屏数据)的数据保存在缓存中，使缓存中的数据恰好能应对上拉滚动和下拉滚动的屏显，从而使缓存存储的数据量达到最小，更多的空间可用于累加计算，从而不会因缓存内容过多而导致屏幕卡顿的问题，使渲染得以优化，由于采用循环数据高度累加法，无需强制限定数据的高度，解决因列表内部的内容高度问题而导致的屏幕滚动不平滑。
19.上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
20.下面参照附图结合实施例对本发明作进一步的说明。
21.图1为本发明实施例一中方法中的流程图；
22.图2为本发明实施例页面触发上拉滚动时数据加载状态示意图；
23.图3为本发明实施例页面触发下拉滚动时数据加载状态示意图；
24.图4为本发明实施例二中装置的结构示意图；
25.图5为本发明实施例三中电子设备的结构示意图；
26.图6为本发明实施例四中介质的结构示意图。
具体实施方式
27.本技术实施例通过提供一种h5列表的渲染加速方法、装置、设备和介质，在h5列表
被渲染前，通过逐条累加数据高度，得到屏幕虚拟缓存条数，使渲染得以优化，从而解决因列表内部的内容高度问题而导致的屏幕滚动不平滑以及屏幕卡顿的问题。
28.本技术实施例中的技术方案，总体思路如下：在h5列表被渲染前，通过循环数据高度累加法，逐条累加数据的虚拟dom高度来匹配屏幕显示的数据量，仅加载当前屏以及前后屏共三屏(首屏或末屏则加载两屏数据)的数据保存在缓存中，使缓存中的数据恰好能应对上拉滚动和下拉滚动的屏显，从而使缓存存储的数据量达到最小，更多的空间可用于累加计算，从而不会因缓存内容过多而导致屏幕卡顿的问题，使渲染得以优化，由于采用循环数据高度累加法，无需强制限定数据的高度，解决因列表内部的内容高度问题而导致的屏幕滚动不平滑。
29.实施例一
30.如图1所示，本实施例提供一种h5列表的渲染加速方法，包括下述步骤：
31.s1、在页面初始化时通过api获得屏幕高度，并在列表渲染前，利用api获得每条数据的虚拟dom高度值；页面显示的数据是以分段来划分条数的，每段文字、图片等为一条数据。
32.s2、通过循环数据高度累加法，依次得到第一屏和第二屏的实际数据高度与实际数据条数并进行记录，将第一屏和第二屏的数据放入虚拟缓存；
33.其中，所述循环数据高度累加法是循环依序逐条累加每条数据的虚拟dom高度值，每当累加值大于或等于屏幕高度时停止累加，得到一屏的实际数据高度与实际数据条数；
34.s3、当页面触发上拉滚动，则通过所述循环数据高度累加法逐一加载后续屏的数据至虚拟缓存中，且每加载一屏数据均记录该屏数据的实际数据条数和结尾数据的条数值，但每次加载是仅在虚拟缓存中保留三屏数据，分别为当前屏、前一屏和后一屏的数据，直到当前屏为倒数第二屏时，最后一屏数据加载完毕，则停止加载；
35.当页面触发下拉滚动时，根据记录的各屏的实际数据条数和结尾数据的条数值，将历史数据逐屏加载至虚拟缓存中，但每次加载是仅在虚拟缓存中保留三屏数据，分别为当前屏、前一屏和后一屏的数据，直到当前屏为第二屏时，第一屏的数据加载完毕，则停止加载。
36.其中，作为本实施例的一种更优或更为具体的实现方式：
37.所述步骤s2和步骤s3中，获得每条数据的虚拟dom高度值时，把所有数据的虚拟dom的高度有序的放到第一列表内，则每条数据的虚拟dom的高度可以用该第一列表的序号来指代，从而在对虚拟dom高度值累加时，可以较容易对应出一屏数据的实际数据条数和结尾数据的条数值。
38.所述步骤s2和步骤s3中，每得到一屏的实际数据高度与实际数据条数时，将所述实际数据高度、所述实际数据条数以及一屏结尾数据的条数值保存在第二列表中。
39.举例说明，如图2所示，初始状态时，先通过循环数据高度累加法，得到第一屏至第二屏的实际数据高度与实际数据条数，具体过程如下：
40.(1)、依序逐条累加每条数据的虚拟dom高度值，当累加值大于或等于屏幕高度时停止累加，得到第一屏的实际数据高度与实际数据条数，并记录该第一屏的结尾数据的条数值，将该第一屏的实际数据高度、实际数据条数以及结尾数据的条数值放入第二列表中；
41.(2)、获取第二列表中的第一屏的结尾数据的条数值，以所述第一屏结尾数据的条
数值的下一条数据为起点，继续向下依序逐条累加每条数据的虚拟dom高度值，当累加值大于或等于屏幕高度时停止累加，得到第二屏的实际数据高度与实际数据条数，并记录该第二屏结尾数据的条数值，将该第二屏的实际数据高度、实际数据条数以及结尾数据的条数值放入第二列表中；
42.然后判断页面是否被拉动，若当页面上拉滚动时，第二屏为可视区域内时，使用同样的循环数据高度累加法得到第三屏的高度与条数，也记录到第二列表内，将第三屏幕也放入缓存，具体过程是：
43.(3)、获取第二列表中的第二屏的结尾数据的条数值，以所述第二屏结尾数据的条数值的下一条数据为起点，继续向下依序逐条累加每条数据的虚拟dom高度值，当累加值大于或等于屏幕高度时停止累加，得到第三屏的实际数据高度与实际数据条数，并记录该第三屏结尾数据的条数值，将该第三屏的实际数据高度、实际数据条数以及结尾数据的条数值放入第二列表中，将第三屏的数据也放入缓存。
44.同样的原理，当页面为第二屏，被上拉滚动到第三屏幕时，此时第三屏处于可视区域内时，使用同样的循环数据高度累加法计算第四屏实际数据高度与实际数据条数，并将第四屏数据放入缓存；此时，同步的，把看不到的第一屏从缓存中清除，仅保留当前屏的前后各一屏数据，以此类推。
45.再如图3所示，若当页面为第三屏，被下拉滚动加载历史数据时，又使第二屏处于可视区域内，倒过来，从前面第二列表内得到第一屏实际数据高度与实际数据条数，把第一屏的数据加入到缓存，此时，同步的，把看不到的第一屏从缓存中清除，仅保留当前屏的前后各一屏数据，以此类推。
46.例如：前页面为第m屏时(2≤m≤n，n为数据总屏数)，虚拟缓存中保留的是第m
‑
1屏、第m屏和第m 1屏的数据；
47.当页面从第m屏触发上拉滚动，使第m 1屏进入可视区域内时，通过所述循环数据高度累加法，得到第m 2屏的实际数据高度与实际数据条数，并将第m 2屏的数据也放入缓存，同步的，将第m
‑
1屏数据从缓存中清除，从而保留第m屏，第m 1屏，第m 2屏这三屏；
48.当页面从第m屏触发下拉滚动时，使历史的第m
‑
1屏进入可视区域内时，根据记录的各屏的实际数据条数和结尾数据的条数值，将历史的第m
‑
2屏的数据也放入缓存，同步的，将第m 1屏数据从缓存中清除，从而保留第m
‑
2屏，第m
‑
1屏，第m屏这三屏。
49.基于同一发明构思，本技术还提供了与实施例一中的方法对应的装置，详见实施例二。
50.实施例二
51.如图4所示，在本实施例中提供了一种h5列表的渲染加速装置，包括：
52.api高度获取模块，用于在页面初始化时获得屏幕高度，并在列表渲染前获得每条数据的虚拟dom高度值；
53.两屏数据获取模块，用于通过循环数据高度累加法，依次得到第一屏和第二屏的实际数据高度与实际数据条数并进行记录，将第一屏和第二屏的数据放入虚拟缓存；
54.其中，所述循环数据高度累加法是循环依序逐条累加每条数据的虚拟dom高度值，每当累加值大于或等于屏幕高度时停止累加，得到一屏的实际数据高度与实际数据条数；
55.第三屏数据获取模块，用于当页面触发上拉滚动，则通过所述循环数据高度累加
法逐一加载后续屏的数据至虚拟缓存中，且每加载一屏数据均记录该屏数据的实际数据条数和结尾数据的条数值，但每次加载是仅在虚拟缓存中保留三屏数据，分别为当前屏、前一屏和后一屏的数据，直到当前屏为倒数第二屏时，最后一屏数据加载完毕，则停止加载；或者
56.用于当页面触发下拉滚动时，根据记录的各屏的实际数据条数和结尾数据的条数值，将历史数据逐屏加载至虚拟缓存中，但每次加载是仅在虚拟缓存中保留三屏数据，分别为当前屏、前一屏和后一屏的数据，直到当前屏为第二屏时，第一屏的数据加载完毕，则停止加载。
57.第三屏数据获取模块，用于当页面从第m屏触发上拉滚动，使第m 1屏进入可视区域内时，通过所述循环数据高度累加法，得到第m 2屏的实际数据高度与实际数据条数，并将第m 2屏的数据也放入缓存，同步的，将第m
‑
1屏数据从缓存中清除，从而保留第m屏，第m 1屏，第m 2屏这三屏；或者
58.用于当页面触发下拉滚动时，使历史的第m
‑
1屏进入可视区域内时，根据记录的各屏的实际数据条数和结尾数据的条数值，将历史的第m
‑
2屏的数据也放入缓存，同步的，将第m 2屏数据从缓存中清除，从而保留第m
‑
1屏，第m屏，第m 1屏这三屏。
59.其中，作为本实施例的一种更优或更为具体的实现方式：
60.所述api高度获取模块在获得每条数据的虚拟dom高度值时，还把所有数据的虚拟dom的高度有序的放到第一列表内，则每条数据的虚拟dom的高度可以用该第一列表的序号来指代。
61.所述两屏数据获取模块和第三屏数据获取模块中，每得到一屏的实际数据高度与实际数据条数时，将所述实际数据高度、所述实际数据条数以及一屏结尾数据的条数值保存在第二列表中。
62.举例说明，如图2所示，初始状态时，先通过循环数据高度累加法，得到第一屏至第二屏的实际数据高度与实际数据条数，具体过程如下：
63.(1)、依序逐条累加每条数据的虚拟dom高度值，当累加值大于或等于屏幕高度时停止累加，得到第一屏的实际数据高度与实际数据条数，并记录该第一屏的结尾数据的条数值，将该第一屏的实际数据高度、实际数据条数以及结尾数据的条数值放入第二列表中；
64.(2)、获取第二列表中的第一屏的结尾数据的条数值，以所述第一屏结尾数据的条数值的下一条数据为起点，继续向下依序逐条累加每条数据的虚拟dom高度值，当累加值大于或等于屏幕高度时停止累加，得到第二屏的实际数据高度与实际数据条数，并记录该第二屏结尾数据的条数值，将该第二屏的实际数据高度、实际数据条数以及结尾数据的条数值放入第一列表中。
65.然后判断页面是否被拉动，若当页面上拉滚动时，第二屏为可视区域内时，使用同样的循环数据高度累加法得到第三屏的高度与条数，也记录到第二列表内，将第三屏幕也放入缓存，具体过程是：
66.(3)、获取第二列表中的第二屏的结尾数据的条数值，以所述第二屏结尾数据的条数值的下一条数据为起点，继续向下依序逐条累加每条数据的虚拟dom高度值，当累加值大于或等于屏幕高度时停止累加，得到第三屏的实际数据高度与实际数据条数，并记录该第三屏结尾数据的条数值，将该第三屏的实际数据高度、实际数据条数以及结尾数据的条数
值放入第二列表中，将第三屏的数据也放入缓存。
67.同样的原理，当页面为第二屏，被上拉滚动到第三屏幕时，此时第三屏处于可视区域内时，使用同样的循环数据高度累加法计算第四屏实际数据高度与实际数据条数，并将第四屏数据放入缓存；此时，同步的，把看不到的第一屏从缓存中清除，仅保留当前屏的前后各一屏数据，以此类推。
68.再如图3所示，若当页面为第三屏，被下拉滚动加载历史数据时，又使第二屏处于可视区域内，倒过来，从前面第二列表内得到第一屏实际数据高度与实际数据条数，把第一屏的数据加入到缓存，此时，同步的，把看不到的第一屏从缓存中清除，仅保留当前屏的前后各一屏数据，以此类推。
69.例如：前页面为第m屏时(2≤m≤n，n为数据总屏数)，虚拟缓存中保留的是第m
‑
1屏、第m屏和第m 1屏的数据；
70.当页面从第m屏触发上拉滚动，使第m 1屏进入可视区域内时，通过所述循环数据高度累加法，得到第m 2屏的实际数据高度与实际数据条数，并将第m 2屏的数据也放入缓存，同步的，将第m
‑
1屏数据从缓存中清除，从而保留第m屏，第m 1屏，第m 2屏这三屏；
71.当页面从第m屏触发下拉滚动时，使历史的第m
‑
1屏进入可视区域内时，根据记录的各屏的实际数据条数和结尾数据的条数值，将历史的第m
‑
2屏的数据也放入缓存，同步的，将第m 1屏数据从缓存中清除，从而保留第m
‑
2屏，第m
‑
1屏，第m屏这三屏。
72.由于本发明实施例二所介绍的装置，为实施本发明实施例一的方法所采用的装置，故而基于本发明实施例一所介绍的方法，本领域所属人员能够了解该装置的具体结构及变形，故而在此不再赘述。凡是本发明实施例一的方法所采用的装置都属于本发明所欲保护的范围。
73.基于同一发明构思，本技术提供了实施例一对应的电子设备实施例，详见实施例三。
74.实施例三
75.本实施例提供了一种电子设备，如图5所示，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时，可以实现实施例一中任一实施方式。
76.由于本实施例所介绍的电子设备为实施本技术实施例一中方法所采用的设备，故而基于本技术实施例一中所介绍的方法，本领域所属技术人员能够了解本实施例的电子设备的具体实施方式以及其各种变化形式，所以在此对于该电子设备如何实现本技术实施例中的方法不再详细介绍。只要本领域所属技术人员实施本技术实施例中的方法所采用的设备，都属于本技术所欲保护的范围。
77.基于同一发明构思，本技术提供了实施例一对应的存储介质，详见实施例四。
78.实施例四
79.本实施例提供一种计算机可读存储介质，如图6所示，其上存储有计算机程序，该计算机程序被处理器执行时，可以实现实施例一中任一实施方式。
80.本技术实施例中提供的技术方案，至少具有如下技术效果或优点：在h5列表被渲染前，通过循环数据高度累加法，逐条累加数据的虚拟dom高度来匹配屏幕显示的数据量，仅加载当前屏以及前后屏共三屏(首屏或末屏则加载两屏数据)的数据保存在缓存中，使缓
存中的数据恰好能应对上拉滚动和下拉滚动的屏显，从而使缓存存储的数据量达到最小，更多的空间可用于累加计算，从而不会因缓存内容过多而导致屏幕卡顿的问题，使渲染得以优化，由于采用循环数据高度累加法，无需强制限定数据的高度，解决因列表内部的内容高度问题而导致的屏幕滚动不平滑。
81.本领域内的技术人员应明白，本发明的实施例可提供为方法、装置或系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd
‑
rom、光学存储器等)上实施的计算机程序产品的形式。
82.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
83.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
84.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
85.虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。