一种页面渲染方法、装置及系统与流程

1.本发明涉及计算机技术领域，更具体的，涉及一种页面渲染方法、装置及系统。


背景技术：

2.在前端业务内容展示界面中，使用列表方式展示feed流数据占据了较大比例。后台根据算法，推断用户喜好，下发feed流数据，前端再将数据渲染出来。
3.使用列表方式展示feed流数据包括单feed流列表和多feed流列表。其中，单feed流列表表示一个卡片占满一行，如图1所示的单列列表。多feed流列表表示多个卡片占满一行，如图2a所示的多列等高列表与图2b所示的多列不等高(瀑布流)列表。
4.但是，目前的feed流渲染到页面的方案有一个普遍存在的问题：当单feed流数据和多列不等高的多feed流数据间杂时，在单feed流数据渲染到页面后形成的单列大卡上面可能会留出如图3所示的一段空白区域，导致页面区域的利用率较低。


技术实现要素：

5.有鉴于此，本发明提供了一种页面渲染方法、装置及系统，实现对页面中的空白区域的智能填补，提高了页面区域的利用率。
6.为了实现上述发明目的，本发明提供的具体技术方案如下：
7.第一方面，本发明实施例提供了一种页面渲染方法，应用于客户端，所述方法包括：
8.接收服务器下发的列表数据；
9.对所述列表数据进行依次渲染；
10.在所述列表数据中检测到填补数据集的情况下，确定待填补空白区域的高度，所述填补数据集是在所述列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况下由服务器在单feed流数据前添加的；
11.根据所述待填补空白区域的高度，对所述待填补空白区域进行填补。
12.在一些实施例中，单feed流数据前的所述填补数据集的数量为n-1，n为正整数，且n》1，n表示多feed流数据的列数。
13.在一些实施例中，所述确定待填补空白区域的高度，包括：
14.获取所述填补数据集前多列不等高的多feed流数据渲染到页面后形成的多列卡片中每列卡片相对于同一基准线的底部高度；
15.计算所述多列卡片中每列卡片相对于同一基准线的底部高度之间的最大高度差，得到所述待填补空白区域的高度。
16.在一些实施例中，根据所述待填补空白区域的高度，对所述待填补空白区域进行填补，包括：
17.判断所述待填补空白区域的高度是否小于阈值，所述阈值为所述填补数据集中卡片数据的最低高度；
18.若所述待填补空白区域的高度小于所述阈值，调整页面中所述待填补空白区域上方卡片的高度，以填补所述待填补空白区域；
19.若所述待填补空白区域的高度不小于所述阈值，根据所述待填补空白区域的高度，在所述待填补空白区域对所述填补数据集进行部分或整体渲染。
20.在一些实施例中，根据所述待填补空白区域的高度，在所述待填补空白区域对所述填补数据集进行部分或整体渲染，包括：
21.根据所述待填补空白区域的高度以及所述填补数据集中每个所述卡片数据的高度，确定所述填补数据集中用于填补所述待填补空白区域的至少一个目标卡片数据；
22.在所述待填补空白区域对所述目标卡片数据进行渲染。
23.第二方面，本发明实施例提供了一种页面渲染装置，应用于客户端，所述装置包括：
24.列表数据接收单元，用于接收服务器下发的列表数据；
25.数据渲染单元，用于对所述列表数据进行依次渲染；
26.空白区域高度确定单元，用于在所述列表数据中检测到填补数据集的情况下，确定待填补空白区域的高度，所述填补数据集是在所述列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况下由服务器在单feed流数据前添加的；
27.填补处理单元，用于根据所述待填补空白区域的高度，对所述待填补空白区域进行填补。
28.在一些实施例中，单feed流数据前的所述填补数据集的数量为n-1，n为正整数，且n》1，n表示多feed流数据的列数。
29.在一些实施例中，所述空白区域高度确定单元，具体用于：
30.获取所述填补数据集前多列不等高的多feed流数据渲染到页面后形成的多列卡片中每列卡片相对于同一基准线的底部高度；
31.计算所述多列卡片中每列卡片相对于同一基准线的底部高度之间的最大高度差，得到所述待填补空白区域的高度。
32.在一些实施例中，所述填补处理单元，包括：
33.判断子单元，用于判断所述待填补空白区域的高度是否小于阈值，所述阈值为所述填补数据集中卡片数据的最低高度；
34.卡片高度调整子单元，用于若所述待填补空白区域的高度小于所述阈值，调整页面中所述待填补空白区域上方卡片的高度，以填补所述待填补空白区域；
35.填补数据渲染子单元，用于若所述待填补空白区域的高度不小于所述阈值，根据所述待填补空白区域的高度，在所述待填补空白区域对所述填补数据集进行部分或整体渲染。
36.在一些实施例中，所述填补数据渲染子单元，具体用于：
37.根据所述待填补空白区域的高度以及所述填补数据集中每个所述卡片数据的高度，确定所述填补数据集中用于填补所述待填补空白区域的至少一个目标卡片数据；
38.在所述待填补空白区域对所述目标卡片数据进行渲染。
39.第三方面，本发明实施例提供了一种页面渲染系统，包括：服务器与客户端；
40.所述服务器，用于在接收到客户端发送的列表数据请求的情况下，若所述客户端
所请求的列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况，在单feed流数据前添加填补数据集，并将添加填补数据集的列表数据发送到所述客户端；
41.所述客户端，用于执行如第一方面中任意一实现方式描述的页面渲染方法。
42.相对于现有技术，本发明的有益效果如下：
43.本发明公开的一种页面渲染方法，在列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况，从而可能导致页面出现空白区域的情况下，服务器在单feed流数据之前添加填补数据集。客户端在对列表数据进行依次渲染的过程中，若在列表数据中检测到填补数据集，根据待填补空白区域的高度，实现对页面中的空白区域的智能填补，使页面显示更多业务内容，提高了页面区域的利用率，从而提升业务曝光量和转换率。
附图说明
44.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
45.图1为一种页面示意图；
46.图2a为又一种页面示意图；
47.图2b为又一种页面示意图；
48.图3为又一种页面示意图；
49.图4为本发明实施例公开的一种页面渲染方法的流程示意图；
50.图5为本发明实施例公开的一种填补效果示意图；
51.图6为本发明实施例公开的另一种填补效果示意图；
52.图7为本发明实施例公开的一种页面渲染装置的结构示意图。
具体实施方式
53.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
54.发明人经过研究发现：客户端在向服务器请求列表数据之后，服务器向客户端下发列表数据，若下发的列表数据存在多列不等高的多feed流数据中夹杂单feed流数据的情况，即列表数据为[a,a,a,a,a,b,
…
]，其中a为双列不等高的多feed流数据，b为单feed流数据，则客户端在依次渲染列表数据时，渲染数据a为一个占1/2行的小卡片，渲染数据b为一个占整行空间的大卡片，可能会出现如图3所示的空白未对齐区域，导致页面区域的利用率较低。
[0055]
为了解决上述技术问题，本发明提供了一种页面渲染方法、装置及系统，在列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况，从而可能导致页面出现空白区域的情况下，服务器在单feed流数据之前添加填补数据集。客户端在对列表数据进行依次渲染的过程中，若在列表数据中检测到填补数据集，根据待填补空白区域的高度，实
现对页面中的空白区域的智能填补，使页面显示更多业务内容，提高了页面区域的利用率，从而提升业务曝光量和转换率。
[0056]
具体的，请参阅图4，本实施例公开的一种页面渲染方法，应用于客户端，具体包括以下步骤：
[0057]
s101：接收服务器下发的列表数据；
[0058]
可以理解的是，客户端需要先向服务器请求列表数据，服务器才会向客户端下发列表数据，由于客户端向服务器请求列表数据为现有技术，此处不再赘述。
[0059]
s102：对列表数据进行依次渲染；
[0060]
即按照列表数据中各个数据项的顺序对其依次渲染，以列表数据为[a,a,a,a,a,b,
…
]，a和b分别为列表数据中的一个数据项，a为双列不等高的多feed流数据，b为单feed流数据为例，则客户端在依次渲染列表数据时，先依次渲染双列不等高的多feed流数据，再渲染单feed流数据。
[0061]
s103：在列表数据中检测到填补数据集的情况下，确定待填补空白区域的高度，填补数据集是在列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况下由服务器在单feed流数据前添加的；
[0062]
在列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况下由服务器在单feed流数据前添加填补数据集，得到处理后的列表数据，并下发到客户端。
[0063]
填补数据集可以表示为[c1,c2,c3,...]，表示用于填补空白区域的卡片数据，c1,c2,c3分别表示卡片数据，可以为文本数据、图片数据、视频数据等。
[0064]
以多feed流数据的列数为2为例，添加填补数据集的列表数据可以为：[a,a,a,c,b,a,a,a,a,a,a,c,b...]，填补数据集c用于填补双列feed流数据中夹杂单feed流数据可能导致的一列空白区域；以多feed流数据的列数为3为例，3列feed流数据中夹杂单feed流数据可能导致2列空白区域，因此在单列feed流数据前需要添加2个填补数据集，在此基础上，添加2个填补数据集的列表数据可以为：[a,a,a,a,c,c,b,a,a,a,a,a,a,c,c,b,...]。
[0065]
添加填补数据集的列表数据中数据a，即多feed流数据的重复数据不做具体限定，但在数据a与数据b之间，数据b之前需要添加填补数据集c，填补数据集c的数量为n-1，n为正整数，且n》1，n表示多feed流数据的列数。如多feed流数据的列数为2，则填补数据集c的数量为1，多feed流数据的列数为3，则填补数据集c的数量为2。
[0066]
优选的，当n》2，即填补数据集的数量大于1时，相邻填补数据集的内容不同。
[0067]
客户端在对列表数据进行依次渲染的过程中，若检测到填补数据集，则页面中可能出现空白区域，需要确定待填补空白区域的高度，便于后续进行智能填补。
[0068]
具体的，由于可能出现的空白区域一定在填补数据集上方，因此在检测到填补数据集的情况下，可以获取填补数据集前多列不等高的多feed流数据渲染到页面后形成的多列卡片中每列卡片相对于同一基准线的底部高度，其中，该基准线可以为页面中的任意位置。可以理解的是，若该基准线在多列卡片之下，则多列卡片中每列卡片相对于同一基准线的底部高度之间的最大高度差即为待填补空白区域的高度，若该基准线在多列卡片之上，则多列卡片中每列相对于同一基准线的底部高度之间的最大高度差的绝对值即为待填补空白区域的高度。如图3所示，h1为第一列卡片相对于基准线的底部高度，h2为第二列卡片相对于基准线的底部高度，基准线可以为页面中的任意位置，则h1与h2之间高度差的绝对
值
△
h即为待填补空白区域的高度。
[0069]
s104：根据待填补空白区域的高度，对待填补空白区域进行填补。
[0070]
实际上，列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况，可能导致页面中出现空白区域，页面中也可能不会出现空白区域，且如果页面中出现空白区域，不同情况下出现的空白区域的高度很可能不同，为了对页面中可能出现的空白区域进行智能填补，本实施例提供的智能填补方法如下：
[0071]
首先，判断待填补空白区域的高度是否小于阈值，阈值为填补数据集中卡片数据的最低高度。
[0072]
若待填补空白区域的高度小于阈值，也就是说，待填补空白区域的高度不足以用填补数据集中的卡片数据进行填补，则调整页面中待填补空白区域上方卡片的高度，如对待填补空白区域上方卡片进行动态拉伸，以填补待填补空白区域，填补效果如图5所示。
[0073]
若待填补空白区域的高度不小于阈值，根据待填补空白区域的高度，在待填补空白区域对填补数据集进行部分或整体渲染。
[0074]
具体的，根据待填补空白区域的高度以及填补数据集中每个卡片数据的高度，确定填补数据集中用于填补待填补空白区域的至少一个目标卡片数据，在待填补空白区域对目标卡片数据进行渲染，填补效果如图6所示。
[0075]
按照以上页面渲染方法，对列表数据中进行依次渲染，即可生成不存在空白区域的页面，使页面显示更多业务内容，提高了页面区域的利用率，从而提升业务曝光量和转换率。
[0076]
基于上述实施例公开的一种页面渲染方法，本实施例对应公开了一种页面渲染装置，应用于客户端，请参阅图7，所述装置包括：
[0077]
列表数据接收单元100，用于接收服务器下发的列表数据；
[0078]
数据渲染单元200，用于对所述列表数据进行依次渲染；
[0079]
空白区域高度确定单元300，用于在所述列表数据中检测到填补数据集的情况下，确定待填补空白区域的高度，所述填补数据集是在所述列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况下由服务器在单feed流数据前添加的；
[0080]
填补处理单元400，用于根据所述待填补空白区域的高度，对所述待填补空白区域进行填补。
[0081]
在一些实施例中，单feed流数据前的所述填补数据集的数量为n-1，n为正整数，且n》1，n表示多feed流数据的列数。
[0082]
在一些实施例中，所述空白区域高度确定单元300，具体用于：
[0083]
获取所述填补数据集前多列不等高的多feed流数据渲染到页面后形成的多列卡片中每列卡片相对于同一基准线的底部高度；
[0084]
计算所述多列卡片中每列卡片相对于同一基准线的底部高度之间的最大高度差，得到所述待填补空白区域的高度。
[0085]
在一些实施例中，所述填补处理单元400，包括：
[0086]
判断子单元，用于判断所述待填补空白区域的高度是否小于阈值，所述阈值为所述填补数据集中卡片数据的最低高度；
[0087]
卡片高度调整子单元，用于若所述待填补空白区域的高度小于所述阈值，调整页
面中所述待填补空白区域上方卡片的高度，以填补所述待填补空白区域；
[0088]
填补数据渲染子单元，用于若所述待填补空白区域的高度不小于所述阈值，根据所述待填补空白区域的高度，在所述待填补空白区域对所述填补数据集进行部分或整体渲染。
[0089]
在一些实施例中，所述填补数据渲染子单元，具体用于：
[0090]
根据所述待填补空白区域的高度以及所述填补数据集中每个所述卡片数据的高度，确定所述填补数据集中用于填补所述待填补空白区域的至少一个目标卡片数据；
[0091]
在所述待填补空白区域对所述目标卡片数据进行渲染。
[0092]
本实施例公开的一种页面渲染装置，在列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况，从而可能导致页面出现空白区域的情况下，服务器在单feed流数据之前添加填补数据集。客户端在对列表数据进行依次渲染的过程中，若在列表数据中检测到填补数据集，根据待填补空白区域的高度，实现对页面中的空白区域的智能填补，使页面显示更多业务内容，提高了页面区域的利用率，从而提升业务曝光量和转换率。
[0093]
本发明实施例还提供了一种页面渲染系统，包括：服务器与客户端；
[0094]
所述服务器，用于在接收到客户端发送的列表数据请求的情况下，若所述客户端所请求的列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况，在单feed流数据前添加填补数据集，并将添加填补数据集的列表数据发送到所述客户端。
[0095]
进一步，为了满足不同客户端类型、不同类型客户对页面显示内容的个性化要求，服务器还可以预先配置不同客户端类型、不同类型客户对应的填补数据集。在接收到客户端发送的列表数据请求之后，若客户端所请求的列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况，在单feed流数据前添加相应客户端类型以及相应类型客户对应的填补数据集。
[0096]
所述客户端，用于执行如下页面渲染方法：
[0097]
接收服务器下发的列表数据；
[0098]
对所述列表数据进行依次渲染；
[0099]
在所述列表数据中检测到填补数据集的情况下，确定待填补空白区域的高度，所述填补数据集是在所述列表数据中存在多列不等高的多feed流数据中夹杂单feed流数据的情况下由服务器在单feed流数据前添加的；
[0100]
根据所述待填补空白区域的高度，对所述待填补空白区域进行填补。
[0101]
进一步，单feed流数据前的所述填补数据集的数量为n-1，n为正整数，且n》1，n表示多feed流数据的列数。
[0102]
进一步，所述确定待填补空白区域的高度，包括：
[0103]
获取所述填补数据集前多列不等高的多feed流数据渲染到页面后形成的多列卡片中每列卡片的底部高度；
[0104]
计算所述多列卡片中每列卡片的底部高度之间的最大高度差，得到所述待填补空白区域的高度。
[0105]
进一步，根据所述待填补空白区域的高度，对所述待填补空白区域进行填补，包括：
[0106]
判断所述待填补空白区域的高度是否小于阈值，所述阈值为所述填补数据集中卡片数据的最低高度；
[0107]
若所述待填补空白区域的高度小于所述阈值，调整页面中所述待填补空白区域上方卡片的高度，以填补所述待填补空白区域；
[0108]
若所述待填补空白区域的高度不小于所述阈值，根据所述待填补空白区域的高度，在所述待填补空白区域对所述填补数据集进行部分或整体渲染。
[0109]
进一步，根据所述待填补空白区域的高度，在所述待填补空白区域对所述填补数据集进行部分或整体渲染，包括：
[0110]
根据所述待填补空白区域的高度以及所述填补数据集中每个所述卡片数据的高度，确定所述填补数据集中用于填补所述待填补空白区域的至少一个目标卡片数据；
[0111]
在所述待填补空白区域对所述目标卡片数据进行渲染。
[0112]
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
[0113]
还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
[0114]
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd-rom、或技术领域内所公知的任意其它形式的存储介质中。
[0115]
上述各个实施例之间可任意组合，对所公开的实施例的上述说明，本说明书中各实施例中记载的特征可以相互替换或者组合，使本领域专业技术人员能够实现或使用本技术。
[0116]
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。