[发明专利]呈现信息的方法、装置及信息系统

说明书

技术领域

本公开总体涉及网络技术领域，具体页言，涉及一种呈现信息的方法、 装置及信息系统。

背景技术

客户端可采用瀑布流式的方式呈现图片或者例如信息，所谓瀑布流式的 呈现方式就是随着页面的向下滚动，图片或者信息会自动不断的加载呈现出 来。

采用瀑布流式的方式呈现图片或者信息，一般需要在获取信息后进过渲 染和加载才能最终将图片或信息呈现在页面上。每个商品的商品图片宽度相 同高度不一，商品评论信息的长度也各不相同，所以每个呈现出来的商品单 元高度不同，显示在页面上的时候就要计算占位。越到后面显示占位计算所 需花的时间也会越长，所以渲染和加载所带来的延迟比较大，以至于服务器 端请求的延迟加上前端客户端渲染加载的延迟会在页面的显示过程中造成明 显的卡顿，用户体验很不好。

相关技术可通过优化前端客户端渲染加载过程中图片占位的计算过程来 试图缩短延迟，但是效果不明显。

因此，需要一种新的呈现信息的方法及装置。

在所述背景技术部分公开的上述信息仅用于加强对本公开的背景的理 解，因此它可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开提供一种呈现信息的方法及装置，能够缩短前端客户端渲染加载 信息的延迟，减少用户操作时的卡顿现象。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通 过本公开的实践而习得。

根据本公开的一方面，本发明实施例提供了一种呈现信息的方法，包括：

判断预设的用于预存待呈现信息的呈现队列中信息数量是否小于第一预 设数量，如果所述信息数量小于所述第一预设数量，向服务器请求第二预设 数量的信息，将所述服务器返回的信息添加到所述呈现队列中，其中所述第 二预设数量大于所述第一预设数量；

当监测到可视窗口的滚动条向下滚动到滚动条上端与所述可视窗口底部 的距离小于预设距离，则从所述呈现队列中取出所述第一预设数量的信息渲 染并加载到所述可视窗口。

根据本公开的一实施方式，所述第二预设数量为所述第一预设数量的N 倍，其中N为大于2的整数。

根据本公开的一实施方式，所述第一预设数量信息的呈现高度大于所述 客户端的可视窗口的高度的1.5-2倍。

根据本公开的一实施方式，所述预设距离大于所述信息的最小高度的2-3 倍。

根据本公开的一实施方式，所述向服务器请求第二预设数量的信息的操 作包括：采用Ajax方式向服务器端请求所述第二预设数量的信息。

根据本公开的一实施方式，在向服务器请求第二预设数量的信息的操作 之前还包括，所述服务器采用Redis存储商品的排序信息，其中存储在所述 Redis里的键值对中“键”是商品列表的种类信息，“值”是各商品列表的种类对 应的商品排序信息。

根据本公开的另一方面，本发明实施例提供了呈现信息的系统，包括：

呈现队列预添加单元，用于判断预设的用于预存待呈现信息的呈现队列 中信息数量是否小于第一预设数量，如果所述信息数量小于所述第一预设数 量，向服务器请求第二预设数量的信息，将所述服务器返回的信息添加到所 述呈现队列中，其中所述第二预设数量大于所述第一预设数量；

预渲染与加载单元，用于当监测到可视窗口的滚动条向下滚动到滚动条 上端与所述可视窗口底部的距离小于预设距离，则从所述呈现队列中取出所 述第一预设数量的信息渲染并加载到所述可视窗口。

根据本公开的一实施方式，所述第二预设数量为所述第一预设数量的N 倍，其中N为大于2的整数。

根据本公开的一实施方式，所述第一预设数量信息的呈现高度大于所述 客户端的可视窗口的高度的1.5-2倍。

根据本公开的一实施方式，所述预设距离大于所述信息的最小高度的2-3 倍。

根据本公开的一实施方式，所述呈现队列预添加单元用于，采用Ajax 方式向服务器端请求所述第二预设数量的信息。