CN116595281A - 一种页面渲染方法、装置、设备以及存储介质 - Google Patents

Abstract

本公开提供了一种页面渲染方法、装置、设备以及存储介质，涉及计算机技术领域，尤其涉及互联网应用、计算机视觉、页面处理等技术领域。具体实现方案为：响应于检测到目标页面的渲染指令，在所述目标页面中显示第一功能组件的预渲染对象；从所述服务端中请求所述第一功能组件对应的目标数据；其中，任一功能组件对应的目标数据包括静态业务数据以及动态业务数据；响应于请求得到所述第一功能组件对应的目标数据，基于所述第一功能组件对应的目标数据，在所述目标页面中进行针对所述第一功能组件的显示对象的渲染，并隐藏所述目标页面中所显示的预渲染对象。可见，通过本方案，可以提高页面加载速度。

Description

一种页面渲染方法、装置、设备以及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及互联网应用、计算机视觉、页面处理等技术领域，具体涉及一种页面渲染方法、装置、设备以及存储介质。

背景技术

针对由个性化配置的功能组件构成的动态页面而言，功能组件的高度依赖于该功能组件对应的业务数据的渲染，即功能组组件的高度受到个性化配置的业务数据的影响。

并且，用户打开动态页面时，该动态页面中的各个功能组件的接口，会同时向服务端发起数据请求，以获取各个功能组件对应的业务数据，从而对相应的功能组件进行渲染。

发明内容

本公开提供了一种页面渲染方法、装置、设备以及存储介质。

根据本公开的一方面，提供了一种页面渲染方法，应用于客户端，所述客户端与服务端相通信，所述方法包括：

响应于检测到目标页面的渲染指令，在所述目标页面中显示第一功能组件的预渲染对象；其中，所述第一功能组件为所述目标页面的位于首屏的功能组件，所述预渲染对象为基于所述第一功能组件对应的静态业务数据所渲染的显示对象；

从所述服务端中请求所述第一功能组件对应的目标数据；其中，任一功能组件对应的目标数据包括静态业务数据以及动态业务数据；

响应于请求得到所述第一功能组件对应的目标数据，基于所述第一功能组件对应的目标数据，在所述目标页面中进行针对所述第一功能组件的显示对象的渲染，并隐藏所述目标页面中所显示的预渲染对象。

根据本公开的另一方面，提供了一种页面渲染装置，应用于客户端，所述客户端与服务端相通信，所述装置包括：

预渲染模块，用于响应于检测到目标页面的渲染指令，在所述目标页面中显示第一功能组件的预渲染对象；其中，所述第一功能组件为所述目标页面的位于首屏的功能组件，所述预渲染对象为基于所述第一功能组件对应的静态业务数据所渲染的显示对象；

请求模块，用于从所述服务端中请求所述第一功能组件对应的目标数据；其中，任一功能组件对应的目标数据包括静态业务数据以及动态业务数据；

渲染模块，用于响应于请求得到所述第一功能组件对应的目标数据，基于所述第一功能组件对应的目标数据，在所述目标页面中进行针对所述第一功能组件的显示对象的渲染，并隐藏所述目标页面中所显示的预渲染对象。

根据本公开的另一方面，提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述任一项所述的页面渲染方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据上述任一项所述的页面渲染方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据上述任一项所述的页面渲染方法。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1是根据本公开一种页面渲染方法的流程图；

图2是根据本公开页面渲染方法的另一流程图；

图3是根据本公开页面渲染方法的又一流程图；

图4是实现本公开页面渲染方法中的步骤S202的流程图；

图5是根据本公开页面渲染方法的一个具体示例的流程图；

图6是根据本公开页面渲染方法的一个具体示例的页面骨架示意图；

图7是根据本公开一种页面渲染装置的结构示意图；

图8是用来实现本公开实施例的页面渲染方法的电子设备的框图。

具体实施方式

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

下面，首先对本公开实施例所提供的一种页面渲染方法进行介绍。

本公开实施例所提供的一种页面渲染方法，可以应用于客户端，该客户端可以与服务端相通信。在具体应用中，实现该页面渲染方法的客户端可以为终端设备中的具有页面展示功能的客户端，例如，浏览器。在实际应用中，该终端设备可以是：智能手机、平板电脑、台式电脑等等。

具体而言，该页面渲染方法的执行主体可以为页面渲染装置。示例性的，当该页面渲染方法应用于终端设备时，该页面渲染装置可以为运行于终端设备中的功能软件，例如：用于页面展示的软件。

其中，本公开实施例所提供的一种页面渲染方法，可以包括如下步骤：

响应于检测到目标页面的渲染指令，在所述目标页面中显示第一功能组件的预渲染对象；其中，所述第一功能组件为所述目标页面的位于首屏的功能组件，所述预渲染对象为基于所述第一功能组件对应的静态业务数据所渲染的显示对象；

从所述服务端中请求所述第一功能组件对应的目标数据；其中，任一功能组件对应的目标数据包括静态业务数据以及动态业务数据；

响应于请求得到所述第一功能组件对应的目标数据，基于所述第一功能组件对应的目标数据，在所述目标页面中进行针对所述第一功能组件的显示对象的渲染，并隐藏所述目标页面中所显示的预渲染对象。

本公开提供的方案中，第一功能组件为目标页面的位于首屏的功能组件。当检测到目标页面的渲染指令，首先在目标页面中显示第一功能组件的预渲染对象，可以及时响应该目标页面的渲染指令，使得用户打开目标页面后能够快速看到首屏内容，从而在视觉上达到秒开的效果。然后，从服务端中请求第一功能组件对应的目标数据，当请求得到该第一功能组件对应的目标数据，基于该第一功能组件对应的目标数据，在该目标页面中进行针对该第一功能组件的显示对象的渲染，并隐藏该目标页面中所显示的预渲染对象。从而，在界面中显示该第一功能组件对应的真实渲染对象，使得用户可以通过首屏界面查看到该第一功能组件的真实内容。可见，通过本方案，在检测到目标页面的渲染指令，在目标页面中进行针对第一功能组件的显示对象的渲染，可以实现功能组件的按需渲染，从而提高页面加载速度。

下面结合附图，对本公开实施例所提供的页面渲染方法进行介绍。

如图1所示，本公开实施例所提供的页面渲染方法，可以包括如下步骤：

S101，响应于检测到目标页面的渲染指令，在该目标页面中显示第一功能组件的预渲染对象；其中，该第一功能组件为该目标页面的位于首屏的功能组件，该预渲染对象为基于该第一功能组件对应的静态业务数据所渲染的显示对象；

本实施例中，目标页面可以是由商家个性化配置的功能组件构成的动态页面。当用户在客户端中打开目标页面，客户端检测到针对目标页面的渲染指令时，可以在目标页面中显示该第一功能组件的预渲染对象。其中，该第一功能组件为该目标页面的位于首屏的功能组件。示例性的，在实际应用中，该第一功能组件可以是商家配置该目标页面的功能组件时，预先设置的在首屏显示的功能组件，或者，从商家配置的目标页面的功能组件中，所选取的处于页面位置中排序靠前的预设数量个功能组件，作为目标页面的位于首屏的功能组件，这都是合理的。

示例性的，目标页面的功能组件可以包括用于显示商家信息内容、商品信息内容或者商品评价内容的功能组件，等等。其中，功能组件可以为用于承载显示对象的容器，功能组件中的显示对象可以通过该功能组件对应的业务数据所确定。每一条业务数据可以包括：待显示元素，以及该待显示元素对应的显示位置、显示尺寸，等等。每一待显示元素可以包括：图像数据、文本数据，视频数据，等等。基于每一功能组件对应的业务数据，即可将各个待显示元素显示在功能组件中，得到显示对象。另外，可以理解的是，针对目标页面的渲染实际上为该目标页面的页面内容的渲染，也就是显示对象的渲染。预渲染对象在目标页面中显示时，可以为页面内容为空的目标页面。

在实际应用中，预渲染对象为基于第一功能组件对应的静态业务数据所渲染的显示对象，该静态业务数据可以为该第一功能组件对应的默认业务数据，即该静态业务数据为不受商家对该目标页面的动态配置影响的业务数据。示例性的，若第一功能组件为用于显示商家信息内容的功能组件，则该静态业务数据可以为该商家的组织机构信息、店铺标志信息，等等。

可以理解的是，响应于检测到目标页面的渲染指令，在目标页面中显示该第一功能组件的预渲染对象，可以及时响应该目标页面的渲染指令。使得用户打开目标页面后能够快速看到首屏内容，从而在视觉上达到秒开的效果，提高了用户体验。

需要说明的是，该第一功能组件的预渲染对象可以预先存储在客户端中，使得客户端检测到目标页面的渲染指令，可以直接从本地获取到该第一功能组件的预渲染对象；或者，客户端响应于检测到目标页面的渲染指令，向服务端请求该第一功能组件的预渲染对象，服务端基于该第一功能组件对应的静态业务数据生成该第一功能组件的预渲染对象，并反馈至客户端，这都是合理的。另外，需要说明的是，在实际应用中，该第一功能组件的数量可以至少为一个，在本实施例中，针对每一第一功能组件可以执行相同的流程。

S102，从该服务端中请求该第一功能组件对应的目标数据；其中，任一功能组件对应的目标数据包括静态业务数据以及动态业务数据；

可以理解的是，在实际应用中，第一功能组件对应的目标数据存储在服务端，在页面加载时，可以服务端中请求该第一功能组件对应的目标数据。其中，任一功能组件对应的目标数据包括静态业务数据以及动态业务数据，该动态业务数据为根据商家对该目标页面的动态配置所动态变化的业务数据。示例性的，若第一功能组件为用于显示商品信息内容的功能组件，该商品信息内容包括商品的图片信息、价格信息，等等。由于商家会不定期为商品设置折扣活动，因此该第一功能组件对应的业务数据中的价格信息，可以是动态业务数据；而该第一功能组件对应的业务数据中的图片信息，可以是静态业务数据。

另外，需要说明的是，该请求第一功能组件对应的目标数据的步骤，可以与上述步骤S101中，在该目标页面中显示第一功能组件的预渲染对象的过程并行执行，即在响应于检测到目标页面的渲染指令，从该服务端中请求该第一功能组件对应的目标数据。

S103，响应于请求得到该第一功能组件对应的目标数据，基于该第一功能组件对应的目标数据，在该目标页面中进行针对该第一功能组件的显示对象的渲染，并隐藏该目标页面中所显示的预渲染对象。

本实施例中，在请求得到该第一功能组件对应的目标数据后，可以利用该目标数据，在该目标页面中进行该第一功能组件的显示对象的渲染，即将该目标数据中的待显示元素显示到该第一功能组件中。由于目标数据为该第一功能组件对应的完整的业务数据，因此，利用该目标数据，在该目标页面中进行该第一功能组件的显示对象的渲染，可以渲染出该第一功能组件对应的真实渲染对象。在该目标页面中进行针对该第一功能组件的显示对象的渲染后，即可显示出该第一功能组件对应的真实渲染对象，同时隐藏该目标页面中所显示的预渲染对象，使得用户可以通过客户端界面查看到该第一功能组件的真实内容。

可以理解的是，由于该第一功能组件为该目标页面的位于首屏的功能组件，通过请求该第一功能组件的目标数据，并在目标页面中进行针对该第一功能组件的显示对象的渲染，可以在首屏界面中只加载该第一功能组件对应的业务数据，而不需要加载其他功能组件对应的业务数据，从而实现目标页面的按需渲染。

本公开提供的方案中，第一功能组件为目标页面的位于首屏的功能组件，当检测到目标页面的渲染指令，首先在目标页面中显示第一功能组件的预渲染对象，可以及时响应该目标页面的渲染指令，使得用户打开目标页面后能够快速看到首屏内容，从而在视觉上达到秒开的效果。然后，从服务端中请求第一功能组件对应的目标数据，当请求得到该第一功能组件对应的目标数据，基于该第一功能组件对应的目标数据，在该目标页面中进行针对该第一功能组件的显示对象的渲染，并隐藏该目标页面中所显示的预渲染对象。从而，在界面中显示该第一功能组件对应的真实渲染对象，使得用户可以通过首屏界面查看到该第一功能组件的真实内容。可见，通过本方案，在检测到目标页面的渲染指令，在目标页面中进行针对第一功能组件的显示对象的渲染，可以实现功能组件的按需渲染，从而提高页面加载速度。

可选地，在本公开的另一实施例中，在图1所示实施例的基础上，如图2所示，所述方法还可以包括步骤S201-S202：

S201，基于该第一功能组件的预设尺寸以及第二功能组件的预设尺寸，确定该目标页面的参考页面结构；其中，该第二功能组件为该目标页面的非首屏的功能组件，该参考页面结构表征该目标页面的各个功能组件的参考排布位置；

示例性的，在实际应用中，可以预先设置该第一功能组件和第二功能组件在目标页面中的显示尺寸，例如在该目标页面中所占的高度、宽度，作为该第一功能组件和第二功能组件的预设尺寸。然后，根据该第一功能组件的预设尺寸以及第二功能组件的预设尺寸，以及各个功能组件在该目标页面中的排序位置关系，即可确定出各个功能组件在该目标页面中的参考排布位置，从而确定出该目标页面的参考页面结构。

需要说明的是，第二功能组件的数量可以为至少一个，在确定参考页面结构时，可以根据该至少一个第二功能组件的预设尺寸，确定该目标页面的参考页面结构。

可选地，在一种实现方式中，该第一功能组件的预设尺寸为该预渲染对象的尺寸；

该第二功能组件的预设尺寸基于该第二功能组件对应的业务数据的数量所确定。

可以理解的是，为了避免在界面中显示目标页面的真实渲染对象后，由于真实渲染对象和预渲染对象的尺寸差距过大导致页面出现较大抖动的问题，在设置该第一功能组件和第二功能组件的预设尺寸时，可以尽量使得该第一功能组件和第二功能组件的预设尺寸，接近该第一功能组件和第二功能组件的真实尺寸。在本实现方式中，为了实现该目的，可以将预渲染对象的尺寸作为该第一功能组件的预设尺寸，然后，基于该第二功能组件对应的业务数据的数量确定该第二功能组件的预设尺寸。

示例性的，在一种具体的实现方式中，第二功能组件的预设尺寸的确定方式，可以包括步骤A1-A2：

A1，从该服务端中获取该第二功能组件对应的业务数据的数量；

A2，根据该第二功能组件对应的业务数据的数量，以及该第二功能组件对应的业务数据的预设显示尺寸，计算该第二功能组件的预设尺寸。

可以理解的是，由于在进行针对各个功能组件的显示对象的渲染时，功能组件渲染后的高度由所对应的业务数据的数量所确定，因此，在本实现方式中，可以先从服务端中获取该第二功能组件对应的业务数据的数量。然后，根据该所获取的业务数据的数量，以及业务数据对应的预设显示尺寸，计算该第二功能组件的预设尺寸。示例性的，若第二功能组件对应的业务数据的数量为10个，该业务数据的预设显示尺寸为高度200px，宽度为200px，且若目标页面中该业务数据分两列排布，则该第二功能组件的预设尺寸为高度1000px，宽度400px。

另外，需要说明的是，业务数据对应的预设显示尺寸可以跟该业务数据的类型有关。例如，若业务数据的类型为图片类型，则该业务数据的预设显示尺寸可以是高度为200px，宽度为自适应终端设备的屏幕宽度；若业务数据的类型为文本类型，则该业务数据的预设显示尺寸可以是高度为16px，宽度为自适应终端设备的屏幕宽度，等等。需要说明的是，在实际应用中，从该服务端中获取该第二功能组件对应的业务数据的数量时，还可以获取该业务数据的类型，从而根据该业务数据的类型确定业务数据的预设显示尺寸，并根据该业务数据的数量和对应的预设显示尺寸的乘积，计算出该第二功能组件的预设尺寸。

需要说明的是，上述第一功能组件和第二功能组件的预设尺寸的确定方式仅仅作为示例，在实际应用中，还可以利用其它方式设置该第一功能组件和第二功能组件的预设尺寸。例如，将该第一功能组件和第二功能组件对应的历史显示尺寸，作为该第一功能组件和第二功能组件的预设尺寸。本公开实施例对该第一功能组件和第二功能组件的预设尺寸的确定方式并不限定。

S202，响应于检测到针对该目标页面的滚动操作，基于该目标页面的参考页面结构，在该目标页面中，进行针对非首屏的功能组件的显示对象的渲染。

本实施例中，在通过步骤S201确定出该目标页面的参考页面结构后，响应于检测到针对该目标页面的滚动操作，可以根据该参考页面结构，确定出该滚动操作所滚动至的页面位置。从而，可以将该滚动操作所滚动至的页面位置上的功能组件，作为待显示的非首屏的功能组件。进而，可以在该目标页面中，进行针对非首屏的功能组件的显示对象的渲染。

需要说明的是，基于该目标页面的参考页面结构，在该目标页面中，进行针对非首屏的功能组件的显示对象的渲染的实现方式，在下述实施例中进行介绍，这里不再赘述。

可见，通过本方案，在目标页面滚动时，进行针对非首屏的功能组件的显示对象的渲染，可以实现非首屏的功能组件的按需渲染，从而提高了页面加载速度。

可选地，在本公开的另一实施例中，在图2所示实施例的基础上，如图3所示，上述步骤S201中基于该第一功能组件的预设尺寸以及第二功能组件的预设尺寸，确定该目标页面的参考页面结构之后，所述方法还可以包括步骤S301-S302：

S301，基于该第二功能组件的占位对象，以及该参考页面结构，对该目标页面的非首屏的页面位置，进行预占位；其中，该占位对象的尺寸与该第二功能组件的尺寸相匹配；

本实施例中，在确定出目标页面的参考页面结构之后，可以根据该参考页面结构确定第二功能组件对应的页面位置，从而可以利用第二功能组件的占位对象，在该第二功能组件所对应的非首屏的页面位置，为该第二功能组件进行预占位。可以理解的是，该占位对象的尺寸可以与该第二功能组件的尺寸相匹配，在实际应用中，可以使该占位对象的尺寸尽量接近于第二功能组件的真实尺寸，从而后续针对非首屏的第二功能组件的显示对象的渲染时，可以降低由于占位对象与第二功能组件的尺寸不匹配带来的页面抖动的问题。示例性的，该占位对象的尺寸可以为该第二功能组件的预设尺寸，该占位对象可以为具有预设尺寸的空白块。

S302，响应于检测到该第二功能组件满足移除条件，从该目标页面中移除该第二功能组件的占位对象；

其中，该第二功能组件满足移除条件包括：从该服务端请求得到该第二功能组件对应的目标数据。

本实施例中，在利用第二功能组件的占位对象进行预占位后，整个目标页面的骨架被撑开。当检测到从该服务端请求得到该第二功能组件对应的目标数据后，即可利用该目标数据在目标页面中进行针对第二功能组件的显示对象的渲染，此时可以移除该占位对象，显示第二功能组件的真实渲染对象。

可以理解的是，通过利用第二功能组件的占位对象对该目标页面的非首屏的页面位置进行预占位，可以撑开页面骨架，使得后续页面滚动时，可以快速识别出处于页面所滚动至的页面位置的第二功能组件，从而进行针对该页面位置的第二功能组件的显示对象的渲染。

可见，通过本方案，可以快速识别出处于页面所滚动至的页面位置的第二功能组件，从而进一步提高页面加载速度。

可选地，在本公开的另一实施例中，如图4所示，上述步骤S202中，响应于检测到针对该目标页面的滚动操作，基于该目标页面的参考页面结构，在该目标页面中，进行针对非首屏的功能组件的显示对象的渲染，可以包括步骤S2021-S2023：

S2021，响应于检测到针对该目标页面的滚动操作，基于该目标页面的参考页面结构，确定指定页面位置处的第二功能组件，作为目标功能组件；其中，该指定页面位置为基于该目标页面所滚动至的页面位置所确定出的待渲染页面位置；

本实施例中，根据该滚动操作所滚动至的页面位置，可以确定出与该所滚动至的页面位置相匹配的待渲染页面位置。然后，根据目标页面的参考页面结构，即可识别出该待渲染页面位置处的第二功能组件。示例性的，该目标页面所滚动至的页面位置所确定出的待渲染页面位置，可以为该滚动操作所滚动至的页面位置，或者，包括该滚动操作所滚动至的页面位置，以及与该滚动操作所滚动至的页面位置具有预设距离的页面位置，这都是合理的。

S2022，从该服务端请求该目标功能组件对应的目标数据；

S2023，基于该目标功能组件对应的目标数据，在该目标页面中，进行针对该目标功能组件的显示对象的渲染。

本实施例中，在确定出目标功能组件后，可以从服务端请求该目标功能组件对应的目标数据。在请求得到该目标功能组件对应的目标数据后，可以利用该目标功能组件对应的目标数据，在该目标页面中，进行针对该目标功能组件的显示对象的渲染。即将该请求得到该目标功能组件对应的目标数据，渲染到该目标功能组件中，得到目标功能组件对应的真实渲染对象。

可选地，在一种实现方式中，该指定页面位置包括在该滚动操作所滚动方向上的、与该目标页面所滚动至的页面位置具有预设距离的页面位置；

相应地，在本实现方式中，基于该目标功能组件对应的目标数据，在该目标页面中，进行针对该目标功能组件的显示对象的渲染，包括：

响应于检测到该目标页面滚动至该指定页面位置，基于该目标功能组件对应的目标数据，在该目标页面中，进行针对该目标功能组件的显示对象的渲染。

本实现方式中，响应于检测到针对该目标页面的滚动操作，所确定出的目标功能组件包括该滚动操作所滚动至的页面位置处的第二功能组件，以及该滚动操作所滚动方向上的、与该滚动操作所滚动至的页面位置具有预设距离的页面位置处的第二功能组件。

可以理解的是，由于目标功能组件中还包括该滚动操作所滚动方向上的、与该滚动操作所滚动至的页面位置具有预设距离的页面位置处的第二功能组件，因此，响应于检测到该目标页面滚动至该任一页面位置，从服务端请求目标功能组件对应的目标数据，可以提前获取到该滚动操作所待滚动至的指定页面位置的功能组件对应的目标数据。并且，在检测到该目标页面滚动至该指定页面位置，利用预先获取到的目标数据对该指定页面位置的第二功能组件进行渲染。使得用户将页面滚动至指定页面位置处时，就可以看到该第二功能组件的真实渲染对象，提高了页面加载速度。从而使得用户滚动页面时，页面加载可以更加流畅。

可见，通过本方案，可以进一步提高页面加载速度。

为了更好的理解本公开实施例的内容，下面结合一个具体的示例进行阐述。

针对由个性化配置的功能组件构成的动态页面而言，页面中的每个功能组件没有固定的高度，也就是，功能组件的高度依赖于该功能组件对应的业务数据的渲染。相关技术中，当用户打开动态页面时，动态页面中的各个功能组件的接口，会同时向服务端发起数据请求，以获取各个功能组件对应的业务数据，从而对相应的功能组件进行渲染。由于浏览器针对同一域名下的资源(对应于上文中的业务数据)请求是有限制的，超出数量的请求会被堵塞，从而会导致非首屏的资源占用首屏资源带宽的可能，导致首屏内容无法及时渲染，增加页面白屏时间。

为了解决上述问题，本示例结合了服务端的预渲染技术，通过预设组件的高度进行占位，使得每个组件(对应于上文中的功能组件)都有自己骨架，以此来撑开页面，使非首屏组件不在首屏渲染，达到页面按需渲染的目的。

如图5所示，本示例的具体实现步骤如下：

(1)响应于检测到用户打开目标页面，判断目标页面的各个组件是否为首屏组件(对应于上文中位于首屏的第一功能组件)；

其中，商家在个性化配置动态页面时，可以结合业务需求设置首屏组件，客户端可以根据该预设的首屏组件，识别各个组件是否为首屏组件。

(2)若为首屏组件，则获取服务端预渲染得到的预渲染DOM元素(Document ObjectModel，文本对象模型，对应于上文中的预渲染对象)，覆盖在真实DOM元素(对应于上文中的真实渲染对象)上。使用户打开目标页面能够快速看到首屏内容，视觉上达到秒开的效果。其中，真实DOM元素需要设置组件的预设高度，进行预设高度占位。即通过获取预渲染DOM元素的高度，来设置组件的骨架高度撑开首屏，将非首屏组件移出首屏，达到按需渲染的目的。同时，等真实DOM元素渲染完成后移除预渲染DOM元素，展示真实的页面。

(3)若为非首屏组件(对应于上文的第二功能组件)，也需要设置预设高度进行占位。非首屏组件利用预设高度进行占位是为了将页面高度整体撑开，以此来判断页面滚动加载时非首屏组件组件是否进入用户视角，当非首屏组件进入到用户视角时再进行按需渲染，故预设组件的高度需要非常接近于真实的渲染高度，才能使得页面按需渲染更加准确。

其中，非首屏组件的预设高度可以根据真实物料(对应于上文中的业务数据)的数量，再结合UI(User Interface，用户界面)视觉设计，即各个物料的预设显示尺寸，进行计算，得出组件的真实渲染高度进行占位。

(4)在利用预设组件高度为各个组件占位后，响应于检测到针对目标页面的滚动操作，该滚动操作所滚动至的页面位置的组件的业务接口，向服务端发起资源请求。客户端请求得到该组件的资源时，移除该组件的预设高度占位，从而显示真实页面。

图6展示了一种页面骨架的示意图。其中，每个组件都有预设的高度占位，使整个页面的高度得以撑开。当打开页面时，请求首屏组件的资源渲染首屏组件，并移除占位，从而在首屏中显示首屏组件真实内容。并且，在页面滚动加载时，通过该各个组件的占位对象，可以精确的判断组件是否在用户视角内。若任一组件进入到用户视角时，可以发送请求渲染该组件，以此来达到按需渲染的功能。其中，为了保证用户滑动页面时，页面加载可以更加流畅，可以在判断组件是否在用户视角时，增加预设距离，即当前组件在进入视口前一定距离时，提前发起业务接口请求，提前进行渲染，这样用户滑动到组件时，就可以看到真实的组件数据，而不是高度占位。

另外，在上述步骤中，针对每个组件都进行了预设高度的占位，增加了占位就需要在合理的时间进行移除，显示真实组件，即展示真实的页面数据。每个业务组件都有自己的业务接口，在任一组件的业务接口请求完成后再移除该组件的占位对象。

可见，通过本方案，通过预设组件的高度进行占位，实现了动态结构化页面的按需渲染，优化了页面的性能，提高了页面加载速度；同时，节省了宽带和资源，提高了用户体验和满意度，并在本地生活服务场景中得到了应用。

相应上述方法的实施例，本公开实施例还提供了一种页面渲染装置，如图7所示，所述装置包括：

预渲染模块710，用于响应于检测到目标页面的渲染指令，在所述目标页面中显示第一功能组件的预渲染对象；其中，所述第一功能组件为所述目标页面的位于首屏的功能组件，所述预渲染对象为基于所述第一功能组件对应的静态业务数据所渲染的显示对象；

请求模块720，用于从所述服务端中请求所述第一功能组件对应的目标数据；其中，任一功能组件对应的目标数据包括静态业务数据以及动态业务数据；

渲染模块730，用于响应于请求得到所述第一功能组件对应的目标数据，基于所述第一功能组件对应的目标数据，在所述目标页面中进行针对所述第一功能组件的显示对象的渲染，并隐藏所述目标页面中所显示的预渲染对象。

可选地，所述装置还包括：

确定模块，用于基于所述第一功能组件的预设尺寸以及第二功能组件的预设尺寸，确定所述目标页面的参考页面结构；其中，所述第二功能组件为所述目标页面的非首屏的功能组件，所述参考页面结构表征所述目标页面的各个功能组件的参考排布位置；

滚动模块，用于响应于检测到针对所述目标页面的滚动操作，基于所述目标页面的参考页面结构，在所述目标页面中，进行针对非首屏的功能组件的显示对象的渲染。

可选地，所述装置还包括：

占位模块，用于在所述确定模块执行基于所述第一功能组件的预设尺寸以及第二功能组件的预设尺寸，确定所述目标页面的参考页面结构之后，基于所述第二功能组件的占位对象，以及所述参考页面结构，对所述目标页面的非首屏的页面位置，进行预占位；其中，所述占位对象的尺寸与所述第二功能组件的尺寸相匹配；

移除模块，用于响应于检测到所述第二功能组件满足移除条件，从所述目标页面中移除所述第二功能组件的占位对象；

其中，所述第二功能组件满足移除条件包括：从所述服务端请求得到所述第二功能组件对应的目标数据。

可选地，所述滚动模块，包括：

确定子模块，用于响应于检测到针对所述目标页面的滚动操作，基于所述目标页面的参考页面结构，确定指定页面位置处的第二功能组件，作为目标功能组件；其中，所述指定页面位置为基于所述目标页面所滚动至的页面位置所确定出的待渲染页面位置；

请求子模块，用于从所述服务端请求所述目标功能组件对应的目标数据；

渲染子模块，用于基于所述目标功能组件对应的目标数据，在所述目标页面中，进行针对所述目标功能组件的显示对象的渲染。

可选地，所述指定页面位置包括在所述滚动操作所滚动方向上的、与所述目标页面所滚动至的页面位置具有预设距离的页面位置；

所述渲染子模块，具体用于：

响应于检测到所述目标页面滚动至所述指定页面位置，基于所述目标功能组件对应的目标数据，在所述目标页面中，进行针对所述目标功能组件的显示对象的渲染。

可选地，所述第一功能组件的预设尺寸为所述预渲染对象的尺寸；所述第二功能组件的预设尺寸基于所述第二功能组件对应的业务数据的数量所确定。

可选地，所述第二功能组件的预设尺寸的确定方式，包括：

从所述服务端中获取所述第二功能组件对应的业务数据的数量；

根据所述第二功能组件对应的业务数据的数量，以及所述第二功能组件对应的业务数据的预设显示尺寸，计算所述第二功能组件的预设尺寸。

本公开的技术方案中，所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

本公开所提供的一种电子设备，可以包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述任一页面渲染方法的步骤。

本公开所提供的一种计算机可读存储介质，该计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述任一页面渲染方法的步骤。

在本公开提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一页面渲染方法的步骤。

图8示出了可以用来实施本公开的实施例的示例电子设备800的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图8所示，设备800包括计算单元801，其可以根据存储在只读存储器(ROM)802中的计算机程序或者从存储单元808加载到随机访问存储器(RAM)803中的计算机程序，来执行各种适当的动作和处理。在RAM 803中，还可存储设备800操作所需的各种程序和数据。计算单元801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。

设备800中的多个部件连接至I/O接口805，包括：输入单元806，例如键盘、鼠标等；输出单元807，例如各种类型的显示器、扬声器等；存储单元808，例如磁盘、光盘等；以及通信单元809，例如网卡、调制解调器、无线通信收发机等。通信单元809允许设备800通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元801可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元801的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元801执行上文所描述的各个方法和处理，例如页面渲染方法。例如，在一些实施例中，页面渲染方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元808。在一些实施例中，计算机程序的部分或者全部可以经由ROM 802和/或通信单元809而被载入和/或安装到设备800上。当计算机程序加载到RAM 803并由计算单元801执行时，可以执行上文描述的页面渲染方法的一个或多个步骤。备选地，在其他实施例中，计算单元801可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行页面渲染方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、复杂可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

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

Claims (11)

1.一种页面渲染方法，应用于客户端，所述客户端与服务端相通信，所述方法包括：

响应于检测到目标页面的渲染指令，在所述目标页面中显示第一功能组件的预渲染对象；其中，所述第一功能组件为所述目标页面的位于首屏的功能组件，所述预渲染对象为基于所述第一功能组件对应的静态业务数据所渲染的显示对象；

从所述服务端中请求所述第一功能组件对应的目标数据；其中，任一功能组件对应的目标数据包括静态业务数据以及动态业务数据；

响应于请求得到所述第一功能组件对应的目标数据，基于所述第一功能组件对应的目标数据，在所述目标页面中进行针对所述第一功能组件的显示对象的渲染，并隐藏所述目标页面中所显示的预渲染对象。

2.根据权利要求1所述的方法，其中，所述方法还包括：

基于所述第一功能组件的预设尺寸以及第二功能组件的预设尺寸，确定所述目标页面的参考页面结构；其中，所述第二功能组件为所述目标页面的非首屏的功能组件，所述参考页面结构表征所述目标页面的各个功能组件的参考排布位置；

响应于检测到针对所述目标页面的滚动操作，基于所述目标页面的参考页面结构，在所述目标页面中，进行针对非首屏的功能组件的显示对象的渲染。

3.根据权利要求2所述的方法，其中，所述基于所述第一功能组件的预设尺寸以及第二功能组件的预设尺寸，确定所述目标页面的参考页面结构之后，所述方法还包括：

基于所述第二功能组件的占位对象，以及所述参考页面结构，对所述目标页面的非首屏的页面位置，进行预占位；其中，所述占位对象的尺寸与所述第二功能组件的尺寸相匹配；

响应于检测到所述第二功能组件满足移除条件，从所述目标页面中移除所述第二功能组件的占位对象；

其中，所述第二功能组件满足移除条件包括：从所述服务端请求得到所述第二功能组件对应的目标数据。

4.根据权利要求2或3所述的方法，其中，所述响应于检测到针对所述目标页面的滚动操作，基于所述目标页面的参考页面结构，在所述目标页面中，进行针对非首屏的功能组件的显示对象的渲染，包括：

响应于检测到针对所述目标页面的滚动操作，基于所述目标页面的参考页面结构，确定指定页面位置处的第二功能组件，作为目标功能组件；其中，所述指定页面位置为基于所述目标页面所滚动至的页面位置所确定出的待渲染页面位置；

从所述服务端请求所述目标功能组件对应的目标数据；

基于所述目标功能组件对应的目标数据，在所述目标页面中，进行针对所述目标功能组件的显示对象的渲染。

5.根据权利要求4所述的方法，其中，所述指定页面位置包括在所述滚动操作所滚动方向上的、与所述目标页面所滚动至的页面位置具有预设距离的页面位置；

所述基于所述目标功能组件对应的目标数据，在所述目标页面中，进行针对所述目标功能组件的显示对象的渲染，包括：

响应于检测到所述目标页面滚动至所述指定页面位置，基于所述目标功能组件对应的目标数据，在所述目标页面中，进行针对所述目标功能组件的显示对象的渲染。

6.根据权利要求2所述的方法，其中，所述第一功能组件的预设尺寸为所述预渲染对象的尺寸；

所述第二功能组件的预设尺寸基于所述第二功能组件对应的业务数据的数量所确定。

7.根据权利要求6所述的方法，其中，所述第二功能组件的预设尺寸的确定方式，包括：

从所述服务端中获取所述第二功能组件对应的业务数据的数量；

根据所述第二功能组件对应的业务数据的数量，以及所述第二功能组件对应的业务数据的预设显示尺寸，计算所述第二功能组件的预设尺寸。

8.一种页面渲染装置，应用于客户端，所述客户端与服务端相通信，所述装置包括：

预渲染模块，用于响应于检测到目标页面的渲染指令，在所述目标页面中显示第一功能组件的预渲染对象；其中，所述第一功能组件为所述目标页面的位于首屏的功能组件，所述预渲染对象为基于所述第一功能组件对应的静态业务数据所渲染的显示对象；

请求模块，用于从所述服务端中请求所述第一功能组件对应的目标数据；其中，任一功能组件对应的目标数据包括静态业务数据以及动态业务数据；

渲染模块，用于响应于请求得到所述第一功能组件对应的目标数据，基于所述第一功能组件对应的目标数据，在所述目标页面中进行针对所述第一功能组件的显示对象的渲染，并隐藏所述目标页面中所显示的预渲染对象。

9.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的方法。

10.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-7中任一项所述的方法。

11.一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求1-7中任一项所述的方法。