CN113626113B - 一种页面渲染方法和装置 - Google Patents

Abstract

本发明公开了一种页面渲染方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：获取用于展示渲染后列表项的屏幕的高度，并根据所述屏幕的高度及渲染后所述列表项的预估高度确定所述屏幕内展示的列表项数量；根据所述列表项数量确定渲染后列表项在长列表中对应的渲染起始位置、渲染结束位置；根据所述渲染起始位置、渲染结束位置，对所述屏幕内展示的列表项进行渲染；在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项。该实施方式既能够提升页面渲染的性能，又可以防止在页面快速滑动时出现白屏或者闪屏。

Description

一种页面渲染方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种页面渲染方法和装置。

背景技术

在页面数据展示过程中，常存渲染大量相似数据列表即长列表(如地址长列表、商品名称长列表等)的情况。目前，常用的渲染长列表的方法主要包括以下三种：直接渲染，即前端依次遍历后台基于数据接口一次性输出的数据并直接显示在页面中；分页渲染，即前端分页去查询后台提供的数据并分页渲染到页面中；分批渲染，即前端基于定时器分批次去查询后台提供的数据并渲染到页面中。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：无论是直接渲染还是分批渲染，当页面快速滑动时均会出现白屏或者闪屏的现象，影响用户体验；而分页渲染虽在一定程度上可以避免白屏或者闪屏现象，但适用场景单一尤其是在一些数据无法分页加载的场景下，且多次请求调用数据接口不仅增加了用户等待时间还增加了系统的复杂度。

发明内容

有鉴于此，本发明实施例提供一种页面渲染方法，既能够提升页面渲染的性能，又可以避免在页面快速滑动时出现白屏或者闪屏。

为实现上述目的，根据本发明实施例的一个方面，提供了一种页面渲染方法，包括：

获取用于展示渲染后列表项的屏幕的高度，并根据所述屏幕的高度及渲染后所述列表项的预估高度确定所述屏幕内展示的列表项数量；

根据所述列表项数量确定渲染后列表项在长列表中对应的渲染起始位置、渲染结束位置，所述渲染起始位置指示的位置标识初始值为长列表中第一个列表项对应的位置标识，所述渲染结束位置指示的位置标识由所述列表项数量与所述渲染起始位置指示的位置标识确定；

根据所述渲染起始位置、渲染结束位置，对所述屏幕内展示的列表项进行渲染；

在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项。

可选地，所述在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项，包括：

根据第一预设渲染缓冲比例，确定屏幕顶部的缓冲区域包括的第一列表项数量，以对所述屏幕顶部的缓冲区域内的列表项进行渲染；和/或，

根据第二预设渲染缓冲比例，确定屏幕底部的缓冲区域包括的第二列表项数量，以对所述屏幕底部的缓冲区域内的列表项进行渲染。

可选地，还包括：

根据所述预估高度及列表项在长列表中的位置标识，确定长列表中每一个列表项渲染后对应的预估位置信息，所述预估位置信息指示了所述列表项的预估bottom值、预估top值；

在所述屏幕内展示的列表项渲染完成的情况下，将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，所述真实位置信息指示了渲染后所述列表项的真实bottom值、真实top值。

可选地，所述将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，包括：

遍历渲染后的所述列表项，对比所述列表项的真实高度与预估高度；

在所述列表项的真实高度与预估高度不一致的情况下，将所述预估高度更新为真实高度，并将所述预估位置信息指示的预估bottom值更新为真实bottom值，且将所述列表项之后的渲染列表项的预估位置信息指示的预估bottom值、预估top值更新为真实bottom值、真实top值。

可选地，还包括：

确定渲染后的所述长列表对应的总高度，所述长列表的总高度指示了所述长列表中位置标识最大的列表项对应的真实bottom值或预估bottom值；

确定渲染后的所述列表项在所述长列表中的偏移值，所述偏移值指示了渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。

可选地，还包括：

在所述长列表存在滚动的情况下，获取所述长列表的滚动高度；

遍历所述列表项对应的预估高度、预估位置信息，或真实高度、真实位置信息，以确定预估bottom值或真实bottom值大于所述滚动高度的所有列表项中位置标识最小的列表项；

更新所述渲染起始位置，且更新后的所述渲染起始位置指示了所确定的列表项对应的所述位置标识；

更新所述渲染结束位置，且更新后的所述渲染结束位置指示的位置标识由所述列表项数量与更新后所述渲染起始位置指示的位置标识确定。

可选地，还包括：

更新所述列表项在所述长列表中的偏移值，且更新后的所述偏移值指示了更新后的所述渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。

可选地，还包括：

在所述长列表存在滚动的情况下，根据所述长列表的滚动高度，调整所述第一预设渲染缓冲比例和/或所述第二预设渲染缓冲比例。

为实现上述目的，根据本发明实施例的另一个方面，提供了一种页面渲染装置，包括：列表项数量确定模块、渲染位置确定模块、屏幕渲染模块、缓冲区域渲染模块；其中，

所述列表项数量确定模块，用于获取用于展示渲染后列表项的屏幕的高度，并根据所述屏幕的高度及渲染后所述列表项的预估高度确定所述屏幕内展示的列表项数量；

所述渲染位置确定模块，用于根据所述列表项数量确定渲染后列表项在长列表中对应的渲染起始位置、渲染结束位置，所述渲染起始位置指示的位置标识初始值为长列表中第一个列表项对应的位置标识，所述渲染结束位置指示的位置标识由所述列表项数量与所述渲染起始位置指示的位置标识确定；

所述屏幕渲染模块，用于根据所述渲染起始位置、渲染结束位置，对所述屏幕内展示的列表项进行渲染；

所述缓冲区域渲染模块，用于在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项。

可选地，所述在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项，包括：

根据第一预设渲染缓冲比例，确定屏幕顶部的缓冲区域包括的第一列表项数量，以对所述屏幕顶部的缓冲区域内的列表项进行渲染；和/或，

根据第二预设渲染缓冲比例，确定屏幕底部的缓冲区域包括的第二列表项数量，以对所述屏幕底部的缓冲区域内的列表项进行渲染。

可选地，还包括：位置信息更新模块；其中，

所述位置信息更新模块，用于根据所述预估高度及列表项在长列表中的位置标识，确定长列表中每一个列表项渲染后对应的预估位置信息，所述预估位置信息指示了所述列表项的预估bottom值、预估top值；

在所述屏幕内展示的列表项渲染完成的情况下，将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，所述真实位置信息指示了渲染后所述列表项的真实bottom值、真实top值。

可选地，所述将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，包括：

遍历渲染后的所述列表项，对比所述列表项的真实高度与预估高度；

在所述列表项的真实高度与预估高度不一致的情况下，将所述预估高度更新为真实高度，并将所述预估位置信息指示的预估bottom值更新为真实bottom值，且将所述列表项之后的渲染列表项的预估位置信息指示的预估bottom值、预估top值更新为真实bottom值、真实top值。

可选地，所述位置信息更新模块，还用于，

确定渲染后的所述长列表对应的总高度，所述长列表的总高度指示了所述长列表中位置标识最大的列表项对应的真实bottom值或预估bottom值；

确定渲染后的所述列表项在所述长列表中的偏移值，所述偏移值指示了渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。

可选地，所述位置信息更新模块，还用于，

在所述长列表存在滚动的情况下，获取所述长列表的滚动高度；

遍历所述列表项对应的预估高度、预估位置信息，或真实高度、真实位置信息，以确定预估bottom值或真实bottom值大于所述滚动高度的所有列表项中位置标识最小的列表项；

更新所述渲染起始位置，且更新后的所述渲染起始位置指示了所确定的列表项对应的所述位置标识；

更新所述渲染结束位置，且更新后的所述渲染结束位置指示的位置标识由所述列表项数量与更新后所述渲染起始位置指示的位置标识确定。

可选地，所述位置信息更新模块，还用于，

更新所述列表项在所述长列表中的偏移值，且更新后的所述偏移值指示了更新后的所述渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。

可选地，所述缓冲区域渲染模块，还用于，

在所述长列表存在滚动的情况下，根据所述长列表的滚动高度，调整所述第一预设渲染缓冲比例和/或所述第二预设渲染缓冲比例。

为实现上述目的，根据本发明实施例的再一个方面，提供了一种用于页面渲染的电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述页面渲染方法中任一所述的方法。

为实现上述目的，根据本发明实施例的又一个方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现如上所述页面渲染方法中任一所述的方法。

上述发明中具有如下优点或有益效果：通过只渲染屏幕内展示的列表项，避免了因一次性需要大量页面展位节点而消耗的时间，提升了页面渲染性能及渲染效率；通过在页面顶部和/或页面底部设置渲染缓冲区域的方式，有效地避免了页面快速滚动或滑动过程中出现白屏或者闪屏现象，且无需多次分页调用后台提供的数据接口，减少了用户等待时间，提升了用户体验。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的页面渲染方法的主要流程的示意图；

图2是根据本发明实施例的渲染的长列表的示意图；

图3是根据本发明实施例的另一页面渲染方法的主要流程的示意图；

图4是根据本发明实施例的页面渲染装置的主要模块的示意图；

图5是本发明实施例可以应用于其中的示例性系统架构图；

图6是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明实施例的页面渲染方法的主要流程的示意图，如图1所示，该页面渲染方法具体可以包括的步骤如下：

步骤S101，获取用于展示渲染后列表项的屏幕的高度，并根据所述屏幕的高度及渲染后所述列表项的预估高度确定所述屏幕内展示的列表项数量。

列表项的预估高度(itemEstimatedHeight)是根据实际经验在初始化时设置的，对于同一个长列表默然的每一个列表项的预估高度是一致的，则屏幕内可展示的列表项数量(visiableNum)可由下述公式计算得到：

列表项数量＝Math.ceil(屏幕高度/预估高度)

其中，Math.ceil()函数的功能是返回大于或等于一个给定数字的最小整数。具体地，以预估高度为20、屏幕高度为100为例进行说明，则屏幕内可展示的列表项数量为5，也即屏幕内可渲染的列表项数量为5。

此外，除初始化列表项的预估高度(尺寸信息)以外，还需根据所述预估高度及列表项在长列表中的位置标识，确定长列表中每一个列表项渲染后对应的预估位置信息，所述预估位置信息指示了所述列表项的预估bottom值、预估top值。其中，预估bottom值、预估top值分别指示了列表项在长列表中的边界位置，且列表项在长列表中的位置标识可以为逐渐递增的整数，如以长列表中第一个列表项至最后一个列表项对应的位置标识为0、1、2、3、……n为例进行说明，则每一个列表项对应的预估top值、预估top值可分别由下式计算得到：

预估top值＝位置标标识*预估高度

预估bottom值＝(位置标识+1)*预估高度

可以理解的是，可以通过数组等存储或者缓存列表项的预估高度、预估top值、预估top值，以便在列表项渲染以后更新列表项对应的真实尺寸及位置信息。也即是说，可以先根据列表项的预估高度确定屏幕内展示的列表项数量并进行渲染，然后在屏幕区域内列表项对应的dom(Document Object Mode，文档对象模型)节点均渲染完成以后，再更新渲染后列表项的真实尺寸和位置。

步骤S102，根据所述列表项数量确定渲染后列表项在长列表中对应的渲染起始位置、渲染结束位置，所述渲染起始位置指示的位置标识初始值为长列表中第一个列表项对应的位置标识，所述渲染结束位置指示的位置标识由所述列表项数量与所述渲染起始位置指示的位置标识确定。

可以理解的是，长列表中列表项数量较大，而屏幕内一次可展现的列表项的数量是有限的，因而在对长列表中的部分列表项进行渲染时需要确定长列表中渲染起始位置(begin)、渲染结束位置(end)。具体地，默认渲染起始位置对应的位置标识长列表中的第一个列表项为渲染起始位置，而渲染结束位置对应的位置标识则可由下述公式计算得到：

渲染结束位置位置标识＝渲染起始位置位置标识+(列表项数量-1)

参见图2，如以屏幕内展示的列表项数量为4、当前渲染起始位置的位置标识指示了长列表中的第7个列表项为例进行说明，则渲染结束位置对应的位置标识指示了长列表中第11个列表项。其中，从长列表中的第7个列表项至第11个列表项即为屏幕区域内展示的渲染列表项。

步骤S103，根据所述渲染起始位置、渲染结束位置，对所述屏幕内展示的列表项进行渲染。也即是说，在屏幕页面内展示获取到的列表项数据。

步骤S104，在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项。如此，可以通过在屏幕顶部的缓冲区域、所述屏幕底部的缓冲区域渲染一个或多个列表项的方式，避免页面快速滚动或滑动时出现的白屏或者闪屏现象，以提升用户体验。

在一种可选的实施方式中，所述在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项，包括：根据第一预设渲染缓冲比例，确定屏幕顶部的缓冲区域包括的第一列表项数量，以对所述屏幕顶部的缓冲区域内的列表项进行渲染；和/或，根据第二预设渲染缓冲比例，确定屏幕底部的缓冲区域包括的第二列表项数量，以对所述屏幕底部的缓冲区域内的列表项进行渲染。

其中，第一缓冲比例、第二缓冲比例是根据实际情况预先设定的，且第一缓冲比例、第二缓冲比例既可以相同也可以不相同，则可以根据下述公式分别计算缓冲区域内渲染的列表项数量：

顶部缓冲区域渲染列表项数量＝列表项数量*第一缓冲比例

底部缓冲区域渲染列表项数量＝列表项数量*第二缓冲比例

仍参见图2，其中，屏幕内展示的列表项数量为4，第一缓冲比例、第二缓冲比例分别为75％，即顶部缓冲区域或底部缓冲区域渲染的列表项数量均为4。

可以理解的是，缓冲区域内渲染列表项数量不仅与预先设定的缓冲比例相关，还取决于屏幕内可展示的渲染后的列表项数量。具体地，以屏幕内可展示的渲染后的列表项数量为6，第一缓冲比例为50％、第二缓冲比例为30％为例进行说明，则顶部缓冲区域内需要渲染的列表项数量为3，而底部缓冲区域内渲染的列表项数量为2。也即是说，除却在屏幕内展示6个渲染列表项以外，还需要额外渲染5个不在屏幕内展示的列表项，且其中3渲染个列表项位于屏幕顶部，2个渲染列表项位于屏幕底部，以防止页面快速滚动或者滑动时出现白屏或闪屏。

在一种可选的实施方式中，在渲染前根据预估高度及列表项在长列表中的位置标识，确定长列表中每一个列表项渲染后对应的预估位置信息(即列表项的预估bottom值、预估top值)的情况下，在所述屏幕内展示的列表项渲染完成的情况下，将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，所述真实位置信息指示了渲染后所述列表项的真实bottom值、真实top值。

更具体地，所述将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，包括：遍历渲染后的所述列表项，对比所述列表项的真实高度与预估高度；在所述列表项的真实高度与预估高度不一致的情况下，将所述预估高度更新为真实高度，并将所述预估位置信息指示的预估bottom值更新为真实bottom值，且将所述列表项之后的渲染列表项的预估位置信息指示的预估bottom值、预估top值更新为真实bottom值、真实top值。如此，既可以根据预估高度先实现对列表项的渲染以提高渲染效率，又可以基于更新后的真实高度、真实bottom值、真实top值反应列表项的真实尺寸及位置信息。

此外，还包括：确定渲染后的所述长列表对应的总高度，所述长列表的总高度指示了所述长列表中位置标识最大的列表项对应的真实bottom值或预估bottom值；确定渲染后的所述列表项在所述长列表中的偏移值，所述偏移值指示了渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。可以理解的是，长列表中位置标识最大的列表项不一定是渲染后的列表项，因而该列表项对应的预估bottom值可能存在未更新为真实bottom值的情况，如此，则根据预估bottom值计算长列表的总高度，并在该列表项的预估bottom值更新为真实bottom值时相应地更新长列表的总高度。

可以理解的是，屏幕内展示的长列表内的列表项数量是有限的，一次性只能展示长列表中的一个或多个列表项，因而用户为全部浏览所有长列表中的列表项则需要滚动或者滑动页面，对屏幕内展示的渲染列表项进行更新，也即重新渲染屏幕内展示的列表项。

在此基础上，在所述长列表存在滚动的情况下，获取所述长列表的滚动高度；遍历所述列表项对应的预估高度、预估位置信息，或真实高度、真实位置信息，以确定预估bottom值或真实bottom值大于所述滚动高度的所有列表项中位置标识最小的列表项；更新所述渲染起始位置，且更新后的所述渲染起始位置指示了所确定的列表项对应的所述位置标识；更新所述渲染结束位置，且更新后的所述渲染结束位置指示的位置标识由所述列表项数量与更新后所述渲染起始位置指示的位置标识确定。

可以理解的是，在长列表存在滚动的情况下，长列表中的每一项不一定是渲染后的列表项，因而对应的预估bottom值可能存在未更新为真实bottom值的情况，如此，则需根据列表项的预估bottom值或真实bottom值大于所述滚动高度的所有列表项中位置标识最小的列表项。

具体地，仍参见图2，以长列表中第一个列表项至最后一个列表项对应的位置标识为0、1、2、3、……n为例进行说明，则根据公式预估bottom值＝(位置标识+1)*预估高度可知，长列表中列表项1、列表项2、列表项3、列表项4、列表项5、列表项6对应的预估bottom值分别是，1、2、3、4、5、6，而更新后的列表项7、列表项8、列表项9、列表项10、列表项11等对应的真实bottom值则仍分别以7、8、9、10、11等为例，则在长列表的滚动高度为8的情况下可知，预估bottom值或真实bottom值大于滚动高度8的列表项包括列表项9、列表项10、列表项11等，而其中列表项9对应的位置标识8最小，如此可确定列表项9为滚动后屏幕内渲染列表项的起始渲染位置；基于此，以在屏幕内展示的列表项仍为4为例进行说明，则更新后的渲染结束位置指示了列表项12对应的位置标识为11。

在此基础上，在列表项存在滚动的情况下，还需要同步更新所述列表项在所述长列表中的偏移值，且更新后的所述偏移值指示了更新后的所述渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。具体地，仍参见图2，以滚动高度为8为例进行说明，更新后的偏移值指示了更新后渲染起始位置即列表项9上一个列表项(即列表项8)对应的真实bottom值(即8)。

值得注意的是，在长列表存在滚动的情况下，长列表在屏幕顶部或者屏幕底部存在的尚未渲染的列表项数量也在不断的变化，如此可以根据所述长列表的滚动高度，调整所述第一预设渲染缓冲比例和/或所述第二预设渲染缓冲比例。也即是说，根据长列表的实际渲染情况下，动态调整缓冲区域的渲染缓冲比例或者缓冲区域内渲染的列表项数量，以更有效地防止页面滚动时出现白屏或者闪屏。如，在页面滚动高度小于长列表总高度一半的情况下，考虑增加屏幕底部缓冲区域对应的第二缓冲比例或增加渲染的列表项数量，而在页面滚动高度大于长列表总高度一半的情况下，考虑增加屏幕顶部缓冲区域对应的第一缓冲比例或增加渲染的列表项数量。

基于上述实施例，通过只渲染屏幕内展示的列表项，避免了因一次性需要大量页面展位节点而消耗的时间，提升了页面渲染性能及渲染效率；通过在页面顶部和/或页面底部设置渲染缓冲区域的方式，有效地避免了页面快速滚动或滑动过程中出现白屏或者闪屏现象，且无需多次分页调用后台提供的数据接口，减少了用户等待时间，提升了用户体验。

参见图3，在上述实施例的基础上，本发明实施例提供了另一页面渲染方法，该方法具体可以包括的步骤如下：

步骤S301，获取用于展示渲染后列表项的屏幕的高度，并根据所述屏幕的高度及渲染后所述列表项的预估高度确定所述屏幕内展示的列表项数量。

此外，除初始化列表项的预估高度(尺寸信息)以外，还需根据所述预估高度及列表项在长列表中的位置标识，确定长列表中每一个列表项渲染后对应的预估位置信息，所述预估位置信息指示了所述列表项的预估bottom值、预估top值。

步骤S302，根据所述列表项数量确定渲染后列表项在长列表中对应的渲染起始位置、渲染结束位置，所述渲染起始位置指示的位置标识初始值为长列表中第一个列表项对应的位置标识，所述渲染结束位置指示的位置标识由所述列表项数量与所述渲染起始位置指示的位置标识确定。

步骤S303，根据所述渲染起始位置、渲染结束位置，对所述屏幕内展示的列表项进行渲染。

步骤S304，在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项。

在此基础上，在所述屏幕内展示的列表项渲染完成的情况下，将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，所述真实位置信息指示了渲染后所述列表项的真实bottom值、真实top值。

此外，还包括：确定渲染后的所述长列表对应的总高度，所述长列表的总高度指示了所述长列表中位置标识最大的列表项对应的真实bottom值或预估bottom值；确定渲染后的所述列表项在所述长列表中的偏移值，所述偏移值指示了渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。

步骤S305，在所述长列表存在滚动的情况下，获取所述长列表的滚动高度。

步骤S306，遍历所述列表项对应的预估高度、预估位置信息，或真实高度、真实位置信息，以确定预估bottom值或真实bottom值大于所述滚动高度的所有列表项中位置标识最小的列表项。

步骤S307，更新所述渲染起始位置，且更新后的所述渲染起始位置指示了所确定的列表项对应的所述位置标识。

步骤S308，更新所述渲染结束位置，且更新后的所述渲染结束位置指示的位置标识由所述列表项数量与更新后所述渲染起始位置指示的位置标识确定。

可以理解的是，屏幕内展示的长列表内的列表项数量是有限的，一次性只能展示长列表中的一个或多个列表项，因而用户为全部浏览所有长列表中的列表项则需要滚动或者滑动页面，对屏幕内展示的渲染列表项进行更新，也即根据跟新后的渲染起始位置、渲染结束位置重新渲染屏幕内展示的列表项。同时，重新渲染屏幕顶部或者屏幕底部渲染缓冲区域内的列表项。

在上述实施例的基础上，以基于Vue.js(一套构建用户界面的渐进式框架)进行长列表渲染为例进行说明，则该渲染方法具体包括以下步骤：

在vue.js组件created钩子函数中，根据列表项的预估高度，初始化长列表中每一个列表项预估位置信息，即预估top值为、预估bottom值，同时在数组中存储或者缓存列表项对应的预估高度、预估top值为、预估bottom值，以便后续更新为渲染后的真实高度、真实top值为、真实bottom值。所谓钩子函数则是指在vue.js组件生命周期不同调用时机、不同的时刻调用不同的方法。其中，created钩子函数常在模板渲染成html前调用，以初始化某些属性值然后再渲染成视图。

在vue.js组件mounted钩子函数中，获取用于展示渲染后列表项的屏幕的高度，以根据屏幕的高度、列表项的预估高度确定屏幕内展示的列表项数量，进而确定列表项在长列表中的渲染起始位置、渲染结束位置，且默认默认渲染起始位置对应的位置标识为长列表中的第一个列表项为渲染起始位置，而渲染结束位置指示的位置标识由所述列表项数量与所述渲染起始位置指示的位置标识确定。其中mounted钩子函数常在模板渲染成html后调用，以在初始化页面完成后再对html的dom节点进行一些需要的操作。

在vue.js组件updated钩子函数中完成屏幕内展示的列表项渲染，且在列表项渲染完成的情况下，将列表项的预估高度、预估top值、预估bottom值分别更新渲染后列表项的真实高度和真实top值、真实bottom值。在此基础上，在长列表存在滚动的情况下，更新渲染起始位置及渲染结束位置，以重新渲染屏幕内展示的列表项并更新列表项对一个的尺寸信息、位置信息等。其中，updated钩子函数常在页面dom节点重新渲染和打补丁之后被调用，已更新相应的数据。

参见图4，在上述实施例的基础上，本发明实施例提供了一种页面渲染装置400，包括：列表项数量确定模块401、渲染位置确定模块402、屏幕渲染模块403、缓冲区域渲染模块404；其中，

所述列表项数量确定模块401，用于获取用于展示渲染后列表项的屏幕的高度，并根据所述屏幕的高度及渲染后所述列表项的预估高度确定所述屏幕内展示的列表项数量；

所述渲染位置确定模块402，用于根据所述列表项数量确定渲染后列表项在长列表中对应的渲染起始位置、渲染结束位置，所述渲染起始位置指示的位置标识初始值为长列表中第一个列表项对应的位置标识，所述渲染结束位置指示的位置标识由所述列表项数量与所述渲染起始位置指示的位置标识确定；

所述屏幕渲染模块403，用于根据所述渲染起始位置、渲染结束位置，对所述屏幕内展示的列表项进行渲染；

所述缓冲区域渲染模块404，用于在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项。

在一种可选的实施方式中，所述在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项，包括：

根据第一预设渲染缓冲比例，确定屏幕顶部的缓冲区域包括的第一列表项数量，以对所述屏幕顶部的缓冲区域内的列表项进行渲染；和/或，

根据第二预设渲染缓冲比例，确定屏幕底部的缓冲区域包括的第二列表项数量，以对所述屏幕底部的缓冲区域内的列表项进行渲染。

在一种可选的实施方式中，还包括：位置信息更新模块405；其中，

所述位置信息更新模块，用于根据所述预估高度及列表项在长列表中的位置标识，确定长列表中每一个列表项渲染后对应的预估位置信息，所述预估位置信息指示了所述列表项的预估bottom值、预估top值；

在所述屏幕内展示的列表项渲染完成的情况下，将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，所述真实位置信息指示了渲染后所述列表项的真实bottom值、真实top值。

在一种可选的实施方式中，所述将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，包括：

遍历渲染后的所述列表项，对比所述列表项的真实高度与预估高度；

在所述列表项的真实高度与预估高度不一致的情况下，将所述预估高度更新为真实高度，并将所述预估位置信息指示的预估bottom值更新为真实bottom值，且将所述列表项之后的渲染列表项的预估位置信息指示的预估bottom值、预估top值更新为真实bottom值、真实top值。

在一种可选的实施方式中，所述位置信息更新模块405，还用于，

确定渲染后的所述长列表对应的总高度，所述长列表的总高度指示了所述长列表中位置标识最大的列表项对应的真实bottom值或预估bottom值；

确定渲染后的所述列表项在所述长列表中的偏移值，所述偏移值指示了渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。

在一种可选的实施方式中，所述位置信息更新模块405，还用于，在所述长列表存在滚动的情况下，获取所述长列表的滚动高度；

遍历所述列表项对应的预估高度、预估位置信息，或真实高度、真实位置信息，以确定预估bottom值或真实bottom值大于所述滚动高度的所有列表项中位置标识最小的列表项；

更新所述渲染起始位置，且更新后的所述渲染起始位置指示了所确定的列表项对应的所述位置标识；

更新所述渲染结束位置，且更新后的所述渲染结束位置指示的位置标识由所述列表项数量与更新后所述渲染起始位置指示的位置标识确定。

在一种可选的实施方式中，所述位置信息更新模块405，还用于，

更新所述列表项在所述长列表中的偏移值，且更新后的所述偏移值指示了更新后的所述渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。

在一种可选的实施方式中，所述缓冲区域渲染模块404，还用于，

在所述长列表存在滚动的情况下，根据所述长列表的滚动高度，调整所述第一预设渲染缓冲比例和/或所述第二预设渲染缓冲比例。

图5示出了可以应用本发明实施例的页面渲染方法或页面渲染装置的示例性系统架构500。

如图5所示，系统架构500可以包括终端设备501、502、503，网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备501、502、503通过网络504与服务器505交互，以接收或发送消息等。终端设备501、502、503上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备501、502、503可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器505可以是提供各种服务的服务器，例如对用户利用终端设备501、502、503所浏览的购物类网站提供支持的后台管理服务器。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果反馈给终端设备。

需要说明的是，本发明实施例所提供的页面渲染方法一般由服务器505执行，相应地，页面渲染装置一般设置于服务器505中。

应该理解，图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图6，其示出了适于用来实现本发明实施例的终端设备的计算机系统600的结构示意图。图6示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，计算机系统600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有系统600操作所需的各种程序和数据。CPU 601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括列表项数量确定模块、渲染位置确定模块、屏幕渲染模块、缓冲区域渲染模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，列表项数量确定模块还可以被描述为“用于获取用于展示渲染后列表项的屏幕的高度，并根据所述屏幕的高度及渲染后所述列表项的预估高度确定所述屏幕内展示的列表项数量的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：获取用于展示渲染后列表项的屏幕的高度，并根据所述屏幕的高度及渲染后所述列表项的预估高度确定所述屏幕内展示的列表项数量；根据所述列表项数量确定渲染后列表项在长列表中对应的渲染起始位置、渲染结束位置，所述渲染起始位置指示的位置标识初始值为长列表中第一个列表项对应的位置标识，所述渲染结束位置指示的位置标识由所述列表项数量与所述渲染起始位置指示的位置标识确定；根据所述渲染起始位置、渲染结束位置，对所述屏幕内展示的列表项进行渲染；在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项。

根据本发明实施例的技术方案，通过只渲染屏幕内展示的列表项，避免了因一次性需要大量页面展位节点而消耗的时间，提升了页面渲染性能及渲染效率；通过在页面顶部和/或页面底部设置渲染缓冲区域的方式，有效地避免了页面快速滚动或滑动过程中出现白屏或者闪屏现象，且无需多次分页调用后台提供的数据接口，减少了用户等待时间，提升了用户体验。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (11)

1.一种页面渲染方法，其特征在于，包括：

获取用于展示渲染后列表项的屏幕的高度，并根据所述屏幕的高度及渲染后所述列表项的预估高度确定所述屏幕内展示的列表项数量；

根据所述列表项数量确定渲染后列表项在长列表中对应的渲染起始位置、渲染结束位置，所述渲染起始位置指示的位置标识初始值为长列表中第一个列表项对应的位置标识，所述渲染结束位置指示的位置标识由所述列表项数量与所述渲染起始位置指示的位置标识确定；

根据所述渲染起始位置、渲染结束位置，对所述屏幕内展示的列表项进行渲染；

在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项。

2.根据权利要求1所述的页面渲染方法，其特征在于，所述在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项，包括：

根据第一预设渲染缓冲比例，确定屏幕顶部的缓冲区域包括的第一列表项数量，以对所述屏幕顶部的缓冲区域内的列表项进行渲染；和/或，

根据第二预设渲染缓冲比例，确定屏幕底部的缓冲区域包括的第二列表项数量，以对所述屏幕底部的缓冲区域内的列表项进行渲染。

3.根据权利要求2所述的页面渲染方法，其特征在于，还包括：

根据所述预估高度及列表项在长列表中的位置标识，确定长列表中每一个列表项渲染后对应的预估位置信息，所述预估位置信息指示了所述列表项的预估bottom值、预估top值；

在所述屏幕内展示的列表项渲染完成的情况下，将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，所述真实位置信息指示了渲染后所述列表项的真实bottom值、真实top值。

4.根据权利要求3所述的页面渲染方法，其特征在于，所述将所述列表项对应的预估高度、预估位置信息分别更新为渲染后的真实高度、真实位置信息，包括：

遍历渲染后的所述列表项，对比所述列表项的真实高度与预估高度；

在所述列表项的真实高度与预估高度不一致的情况下，将所述预估高度更新为真实高度，并将所述预估位置信息指示的预估bottom值更新为真实bottom值，且将所述列表项之后的渲染列表项的预估位置信息指示的预估bottom值、预估top值更新为真实bottom值、真实top值。

5.根据权利要求4所述的页面渲染方法，其特征在于，还包括：

确定渲染后的所述长列表对应的总高度，所述长列表的总高度指示了所述长列表中位置标识最大的列表项对应的真实bottom值或预估bottom值；

确定渲染后的所述列表项在所述长列表中的偏移值，所述偏移值指示了渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。

6.根据权利要求5所述的页面渲染方法，其特征在于，还包括：

在所述长列表存在滚动的情况下，获取所述长列表的滚动高度；

遍历所述列表项对应的预估高度、预估位置信息，或真实高度、真实位置信息，以确定预估bottom值或真实bottom值大于所述滚动高度的所有列表项中位置标识最小的列表项；

更新所述渲染起始位置，且更新后的所述渲染起始位置指示了所确定的列表项对应的所述位置标识；

更新所述渲染结束位置，且更新后的所述渲染结束位置指示的位置标识由所述列表项数量与更新后所述渲染起始位置指示的位置标识确定。

7.根据权利要求6所述的页面渲染方法，其特征在于，还包括：

更新所述列表项在所述长列表中的偏移值，且更新后的所述偏移值指示了更新后的所述渲染起始位置对应的列表项在所述长列表中上一个列表项对应的真实bottom值。

8.根据权利要求6所述的页面渲染方法，其特征在于，还包括：

在所述长列表存在滚动的情况下，根据所述长列表的滚动高度，调整所述第一预设渲染缓冲比例和/或所述第二预设渲染缓冲比例。

9.一种页面渲染装置，其特征在于，包括：列表项数量确定模块、渲染位置确定模块、屏幕渲染模块、缓冲区域渲染模块；其中，

所述列表项数量确定模块，用于获取用于展示渲染后列表项的屏幕的高度，并根据所述屏幕的高度及渲染后所述列表项的预估高度确定所述屏幕内展示的列表项数量；

所述渲染位置确定模块，用于根据所述列表项数量确定渲染后列表项在长列表中对应的渲染起始位置、渲染结束位置，所述渲染起始位置指示的位置标识初始值为长列表中第一个列表项对应的位置标识，所述渲染结束位置指示的位置标识由所述列表项数量与所述渲染起始位置指示的位置标识确定；

所述屏幕渲染模块，用于根据所述渲染起始位置、渲染结束位置，对所述屏幕内展示的列表项进行渲染；

所述缓冲区域渲染模块，用于在所述屏幕顶部的缓冲区域和/或所述屏幕底部的缓冲区域内渲染一个或多个列表项。

10.一种用于页面渲染的电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-8中任一所述的方法。

11.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-8中任一所述的方法。