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

Abstract

本申请实施例公开了一种页面渲染方法、装置、设备及存储介质，其中该方法包括：响应于针对目标推广信息触发的详情查看操作，从目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息；该目标骨架屏描述信息是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的，骨架屏描述协议包括组件类型与组件特征描述模板之间的映射关系；解析目标骨架屏描述信息，确定目标详情页面中的目标组件对应的骨架屏元素、以及骨架屏元素的布局位置和布局样式；基于骨架屏元素、以及骨架屏元素的布局位置和布局样式，渲染显示目标详情页面对应的目标骨架屏页面。该方法适用于针对布局结构多样的推广信息详情页面渲染对应的骨架屏页面。

Description

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

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面渲染方法、装置、设备及存储介质。

背景技术

骨架屏(Skeleton Screen)是在页面渲染数据加载完成前显示的页面大致布局结构，其中包括在需要等待加载数据的位置处显示的占位图形；获取到实际的页面渲染数据后，骨架屏将被替换掉，渲染显示实际的页面内容。在加载页面数据的过程中先显示页面的大致布局结构，可以在一定程度上缓解用户等待页面加载时的焦灼情绪，使得页面加载过程变得更自然通畅。

相关技术中，骨架屏渲染数据通常是预先生成的，并且被集成在对应的应用程序中。具体的，应用程序开发者创建应用程序时可以向后台服务器上传页面布局程序代码，后台服务器可以基于该程序代码生成对应的骨架屏渲染数据，并将该骨架屏渲染数据集成在应用程序中。用户通过终端设备触发查看该应用程序中的页面时，终端设备可以在加载完成实际页面数据前，先基于集成在该应用程序中的骨架屏渲染数据，渲染显示对应的骨架屏页面。

然而，上述骨架屏渲染方法具有一定的局限性，其仅适用于应用程序中布局结构固定的页面，如应用程序的首页页面、应用程序中的商品展示页面等，并不适用于布局结构变化多样的推广信息详情页面(如广告落地页等)；原因在于，应用程序中投放的推广信息数量通常极为庞大，并且推广信息详情页面的布局结构丰富多样、表现样式更新速度快，在应用程序中集成各种推广信息详情页面对应的骨架屏渲染数据，显然是不可能实现的。

发明内容

本申请实施例提供了一种页面渲染方法、装置、设备及存储介质，适用于针对布局结构多样的推广信息详情页面渲染对应的骨架屏页面，能够提高用户等待推广信息详情页面加载时的观感体验。

有鉴于此，本申请第一方面提供了一种页面渲染方法，所述方法包括：

响应于针对目标推广信息触发的详情查看操作，从所述目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息；所述目标骨架屏描述信息是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的，所述骨架屏描述协议包括组件类型与组件特征描述模板之间的映射关系，所述目标详情页面为所述目标推广信息对应的详情页面；

解析所述目标骨架屏描述信息，确定所述目标详情页面中的目标组件对应的骨架屏元素、以及所述骨架屏元素的布局位置和布局样式；

基于所述骨架屏元素、以及所述骨架屏元素的布局位置和布局样式，渲染显示所述目标详情页面对应的目标骨架屏页面。

本申请第二方面提供了一种页面渲染装置，所述装置包括：

信息获取模块，用于响应于针对目标推广信息触发的详情查看操作，从所述目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息；所述目标骨架屏描述信息是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的，所述骨架屏描述协议包括组件类型与组件特征描述模板之间的映射关系，所述目标详情页面为所述目标推广信息对应的详情页面；

信息解析模块，用于解析所述目标骨架屏描述信息，确定所述目标详情页面中的目标组件对应的骨架屏元素、以及所述骨架屏元素的布局位置和布局样式；

骨架屏渲染模块，用于基于所述骨架屏元素、以及所述骨架屏元素的布局位置和布局样式，渲染显示所述目标详情页面对应的目标骨架屏页面。

本申请第三方面提供了一种设备，所述设备包括处理器以及存储器：

所述存储器用于存储计算机程序；

所述处理器用于根据所述计算机程序，执行如上述第一方面所述的页面渲染方法的步骤。

本申请第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质用于存储计算机程序，所述计算机程序用于执行上述第一方面所述的页面渲染方法的步骤。

本申请第五方面提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述第一方面所述的页面渲染方法的步骤。

从以上技术方案可以看出，本申请实施例具有以下优点：

本申请实施例提供了一种页面渲染方法，该方法创新性地提出了一种骨架屏描述协议，基于该骨架屏描述协议可以生成推广信息详情页面对应的骨架屏描述信息，并且该骨架屏描述信息可以被添加到推广信息的详情页面跳转参数中；相应地，当检测到用户针对推广信息触发详情查看操作时，在推广信息详情页面的页面渲染数据未加载出来前，可以从该推广信息的详情页面跳转参数中获取骨架屏描述信息，基于该骨架屏描述信息渲染显示该推广信息详情页面对应的骨架屏页面。对于布局结构多样的推广信息详情页面来说，通过上述方式描述其对应的骨架屏页面，并将骨架屏描述信息携带在推广信息的详情页面跳转参数中，可以使得投放该推广信息的应用程序顺利地实现推广信息详情页面对应的骨架屏页面的渲染，有助于提高用户等待推广信息详情页面加载时的观感体验。

附图说明

图1为本申请实施例提供的页面渲染方法的应用场景示意图；

图2为本申请实施例提供的页面渲染方法的流程示意图；

图3为本申请实施例提供的目标骨架屏页面的示意图；

图4为本申请实施例提供的骨架屏描述信息的生成方法的流程示意图；

图5为本申请实施例提供的多种组件的样式示意图；

图6为本申请实施例提供的目标详情页面的示意图；

图7为本申请实施例提供的第一种页面渲染装置的结构示意图；

图8为本申请实施例提供的第二种页面渲染装置的结构示意图；

图9为本申请实施例提供的第三种页面渲染装置的结构示意图；

图10为本申请实施例提供的第四种页面渲染装置的结构示意图；

图11为本申请实施例提供的第五种页面渲染装置的结构示意图；

图12为本申请实施例提供的终端设备的结构示意图；

图13为本申请实施例提供的服务器的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

相关技术中，骨架屏渲染数据通常都是在开发应用程序时生成的，并且被集成在应用程序的代码包中；当需要显示应用程序的某个页面时，可以从该应用程序的代码包中获取该页面对应的骨架屏渲染数据，进而基于该骨架屏渲染数据渲染显示该页面对应的骨架屏页面。然而，这种方式仅适用于应用程序中布局结构单一固定的页面，并不适用于布局结构多样的推广信息详情页面。

针对上述相关技术存在的问题，本申请实施例提供了一种页面渲染方法，该方法能够针对布局结构多样的推广信息详情页面渲染对应的骨架屏页面，从而提高用户等待推广信息详情页面加载时的观感体验。

具体的，在本申请实施例提供的页面渲染方法中，响应于针对目标推广信息触发的详情查看操作，从该目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息；该目标骨架屏描述信息是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的，此处的骨架屏描述协议包括组件类型与组件特征描述模板之间的映射关系，此处的目标详情页面即为目标推广信息对应的详情页面。进而，解析该目标骨架屏描述信息，确定目标详情页面中的目标组件对应的骨架屏元素、以及骨架屏元素的布局位置和布局样式。最终，基于骨架屏元素、以及骨架屏元素的布局位置和布局样式，渲染显示该目标详情页面对应的目标骨架屏页面。

上述页面渲染方法创新性地提出了一种骨架屏描述协议，基于该骨架屏描述协议可以生成推广信息详情页面对应的骨架屏描述信息，并且该骨架屏描述信息可以被添加到推广信息的详情页面跳转参数中；当检测到用户针对该推广信息触发详情查看操作时，可以从该推广信息的详情页面跳转参数中获取该骨架屏描述信息，基于该骨架屏描述信息渲染推广信息详情页面对应的骨架屏页面。对于布局结构多样的推广信息详情页面来说，通过上述方式描述推广信息详情页面对应的骨架屏页面，并将骨架屏描述信息携带在推广信息的详情页面跳转参数中，可以使得投放该推广信息的应用程序顺利地渲染推广信息详情页面对应的骨架屏页面，有助于提高用户等待推广信息详情页面加载时的观感体验。

应理解，本申请实施例提供的页面渲染方法可以应用于支持应用程序运行的终端设备，该终端设备具体可以为智能手机、计算机、平板电脑、个人数字助理(PersonalDigital Assitant，PDA)等等。

为了便于理解本申请实施例提供的页面渲染方法，下面先对本申请实施例提供的页面渲染方法的应用场景进行示例性介绍。

参见图1，图1为本申请实施例提供的页面渲染方法的应用场景示意图。如图1所示，该应用场景中包括终端设备110、终端设备120和服务器130。其中，终端设备110面向目标应用程序的使用用户，用于执行本申请实施例提供的页面渲染方法。终端设备120中安装有推广信息投放客户端，该推广信息投放客户端支持用户创建推广信息详情页面和推广信息，并且可以响应于用户触发的信息投放操作将所创建的推广信息投放至目标应用程序。服务器130为推广信息投放客户端的后台服务器，其可以与推广信息投放客户端协同配合，生成推广信息详情页面、推广信息详情页面对应的骨架屏描述信息以及推广信息，并将推广信息推送给终端设备110中安装的目标应用程序。

在实际应用中，用户可以通过终端设备120中的推广信息投放客户端创建推广信息详情页面，并且根据实际设计需求在该推广信息详情页面中相应地布局各种组件。检测到用户确认完成对于推广信息详情页面的布局设计后，终端设备120可以将该推广信息详情页面发送给服务器130。进而，服务器130可以基于骨架屏描述协议，根据该推广信息详情页面中的组件布局结构，生成该推广信息详情页面对应的骨架屏描述信息；此处的骨架屏描述协议中包括组件类型与组件特征描述模板之间的映射关系。

创建出推广信息详情页面后，用户可以通过推广信息投放客户端，基于已创建的推广信息详情页面，进一步创建可投放至目标应用程序中的推广信息，该推广信息也可以被理解为推广信息详情页面的查看入口。终端设备120检测到用户通过推广信息投放客户端，选择基于某推广信息详情页面进一步创建推广信息时，可以生成推广信息创建请求发送给服务器130，该推广信息创建请求中携带有推广信息详情页面的标识。进而，服务器130可以将该推广信息详情页面对应的骨架屏描述信息和该推广信息详情页面的跳转路径，添加至该推广信息的详情页面跳转参数中。

至此，终端设备120中的推广信息客户端与服务器130已创建完成推广信息，服务器130此后可以将该推广信息作为目标推广信息，投放至终端设备110中安装的目标应用程序，用户可以根据自身需求选择是否查看目标推广信息的详情内容，即选择是否查看目标推广信息的推广信息详情页面。

当终端设备110检测到用户通过目标应用程序针对目标推广信息触发详情查看操作时，例如检测到用户点击目标应用程序上推送的目标推广信息时，终端设备110可以从该目标推广信息的详情页面跳转参数中获取目标骨架屏信息，正如上文所介绍的，该目标骨架屏描述信息是基于骨架屏描述协议根据目标推广信息详情页面(后文称之为目标详情页面)中的组件布局结构生成的。然后，终端设备110可以解析该目标骨架屏描述信息，以确定该目标详情页面中的目标组件对应的骨架屏元素、以及骨架屏元素的布局位置和布局样式。进而，终端设备110可以根据目标组件对应的骨架屏元素、以及骨架屏元素的布局位置和布局样式，相应地渲染目标详情页面对应的骨架屏页面。

应理解，图1所示的应用场景仅为示例，在实际应用中，也可以通过其它方式创建推广信息详情页面以及推广信息，并且用于创建推广信息的服务器与用于投放推广信息的服务器可以为同一服务器，也可以为不同的服务器。在此不对本申请实施例提供的页面渲染方法的应用场景做任何限定。

下面通过方法实施例对本申请提供的页面渲染方法进行详细介绍。

参见图2，图2为本申请实施例提供的页面渲染方法的流程示意图。下述实施例以该页面渲染方法的执行主体为终端设备进行介绍，如图2所示，该页面渲染方法包括以下步骤：

步骤201：响应于针对目标推广信息触发的详情查看操作，从所述目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息；所述目标骨架屏描述信息是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的，所述骨架屏描述协议包括组件类型与组件特征描述模板之间的映射关系，所述目标详情页面为所述目标推广信息对应的详情页面。

在实际应用中，推广信息投放用户可以通过目标应用程序提供的推广信息投放平台，在目标应用程序中投放推广信息，以达到向目标应用程序的用户宣传推广内容的目的。目标应用程序的用户通过终端设备使用目标应用程序时，如若查看到目标应用程序向其推送的目标推广信息，可以进一步选择针对该目标推广信息触发详情查看操作；终端设备检测到用户针对目标推广信息触发详情查看操作后，可以从该目标推广信息关联的详情页面跳转参数中获取目标骨架屏描述信息，该目标骨架屏描述信息用于描述该目标推广信息的详情页面(即目标详情页面)对应的骨架屏页面。

示例性的，终端设备可以在检测到用户触发启动目标应用程序时，在目标应用程序的开屏界面显示目标推广信息，也可以在检测到用户触发打开目标应用程序中的某个界面时，在该界面中弹出目标推广信息；此时用户可以通过点击该目标推广信息，触发针对该目标推广信息的详情查看操作。或者，目标应用程序可以将目标推广信息投放至社交动态信息展示界面，即将目标推广信息穿插在用户好友发表的社交动态信息中，该目标推广信息具体可以以小程序卡片的形态呈现，此时用户可以点击该目标推广信息，触发针对该目标推广信息的详情查看操作。又或者，目标应用程序可以将目标推广信息投放至推送链接详情页面的结尾处，例如，在通过目标应用程序发布的推送链接页面的结尾处插入小程序卡片形式的目标推广信息，用户浏览完推送链接页面中的内容后，可以点击该链接结尾处的目标推广信息，触发针对该目标推广信息的详情查看操作。

应理解，上述目标应用程序推送目标推广信息的形式、以及用户针对目标推广信息触发详情查看操作的形式仅为示例，在实际应用中，目标应用程序也可以采用其它形式推送目标推广信息，也可以支持用户通过其它方式针对目标推广信息触发详情查看操作，本申请在此不对目标推广信息的推送形式、以及针对目标推广信息触发详情查看操作的形式做任何限定。

需要说明的是，上述目标推广信息实质上可以理解为目标详情页面的跳转入口，该目标推广信息关联有详情页面跳转参数，该详情页面跳转参数中包括目标详情页面的跳转路径、以及目标详情页面对应的目标骨架屏描述信息。在实际应用中，终端设备检测到用户针对目标推广信息触发详情查看操作后，一方面需要从该目标推广信息关联的详情页面跳转参数中，获取目标详情页面的跳转路径，基于该跳转路径获取目标详情页面的页面渲染数据，另一方面需要从该目标推广信息关联的详情页面跳转参数中，获取目标详情页面对应的目标骨架屏描述信息，基于该目标骨架屏描述信息渲染对应的目标骨架屏页面。

应理解，上述目标推广信息具体可以表现为能够承载缩略推广信息的小程序卡片，如承载有静态图片封面的小程序卡片、承载有动态视频封面的小程序卡片等；该目标推广信息也可以表现为应用程序中弹出的用于承载缩略推广信息的窗口；该目标推广信息还可以表现为占据应用程序开屏界面的推广信息，该推广信息可以为静态图片，也可以为动态视频，还可以同时包括静态图片和动态视频。本申请在此不对目标推广信息的表现形式做任何限定。

需要说明的是，承载在详情页面跳转参数中的目标骨架屏描述信息，是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的。此处的骨架屏描述协议是本申请实施例提出的一种专用于描述骨架屏布局样式的协议，又可以称之为Type Description协议，该骨架屏描述协议是推广信息详情页面编辑器和用于渲染推广信息详情页面的程序之间协商的，用于描述推广信息详情页面对应的骨架屏页面的规则；骨架屏描述协议中包括组件类型与组件特征描述模板之间的映射关系，其中，组件类型是指推广信息详情页面中包括的组件所属的类型，组件类型对应的组件特征描述模板为所属于该组件类型的组件对应的骨架屏元素描述方式。下文将通过另一方法实施例详细介绍基于骨架屏描述协议生成骨架屏描述信息的实现方式。

在一种可能的实现方式中，终端设备检测到用户针对目标推广信息触发的详情查看操作时，具体可以通过以下方式从目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息：响应于针对目标推广信息触发的详情查看操作启动页面渲染程序，进而通过该页面渲染程序解析目标推广信息的详情页面跳转参数，获得其中携带的目标骨架屏描述信息。

作为一种示例，在目标推广信息对应的详情页面(即目标详情页面)为目标小程序版广告落地页的情况下，终端设备响应于针对目标推广信息触发的详情查看操作，触发启动用于渲染小程序版广告落地页的落地页小程序，进而，通过该落地页小程序的查询(query)通道，从目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息。

例如，假设目标推广信息是用于承载缩略广告信息的目标小程序卡片，目标详情页面是需要通过落地页小程序渲染的目标小程序版广告落地页；终端设备检测到用户点击目标小程序卡片后，可以初始化落地页小程序运行环境；完成落地页小程序的初始化后，可以进一步通过落地页小程序的query通道，获得目标小程序卡片关联的详情页面跳转参数中携带的目标骨架屏描述信息。

作为另一种示例，在目标推广信息对应的详情页面(即目标详情页面)为目标H5(HTML5，Hyper Text Markup Language 5)页面的情况下，终端设备检测到用户针对目标推广信息触发的详情查看操作后，终端设备可以启动应用程序中用于渲染H5页面的页面渲染程序，如浏览器程序，然后通过该浏览器程序解析与目标H5页面的跳转入口(即目标推广信息)关联的页面跳转参数，以得到该页面跳转参数中携带的用于描述目标H5页面对应的骨架屏页面的目标骨架屏描述信息。

应理解，在实际应用中，上述目标详情页面还可以为其它形式的推广信息详情页面，相应地，终端设备也可以通过对应的方式，从目标推广信息关联的详情页面跳转参数中获取目标骨架屏描述信息。本申请在此不对目标详情页面的形式做任何限定，也不对从目标推广信息关联的详情页面跳转参数中获取目标骨架屏描述信息的方式做任何限定。

步骤202：解析所述目标骨架屏描述信息，确定所述目标详情页面中的目标组件对应的骨架屏元素、以及所述骨架屏元素的布局位置和布局样式。

终端设备从目标推广信息关联的详情页面跳转参数中获取到目标骨架屏描述信息后，可以进一步解析该目标骨架屏描述信息，确定目标推广信息对应的目标详情页面中目标组件对应的骨架屏元素、以及骨架屏元素的布局位置和布局样式。

具体实现时，终端设备可以解析目标骨架屏描述信息，得到目标详情页面中的目标组件对应的骨架屏元素描述信息；然后，根据骨架屏元素描述信息表征的组件类型，确定目标组件对应的目标骨架屏元素的基本样式；并且，根据骨架屏元素描述信息表征的目标组件的布局样式，调整该目标骨架屏元素的基本样式得到目标骨架屏元素的目标布局样式；将骨架屏元素描述信息表征的目标组件的布局位置，确定为目标骨架屏元素的目标布局位置。

正如上文所介绍的，目标骨架屏描述信息是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的，骨架屏描述协议中包括组件类型与组件特征描述模板之间的映射关系。通常情况下，基于该骨架屏描述协议生成的目标骨架屏描述信息包括目标详情页面中各目标组件各自对应的骨架屏元素描述信息，该骨架屏元素描述信息能够表征其对应的组件所属的组件类型、以及其对应的组件的布局样式和布局位置。

基于此，终端设备从详情页面跳转参数中获取到目标骨架屏描述信息后，可以从该目标骨架屏描述信息中获取到目标详情页面中各目标组件各自对应的骨架屏元素描述信息。针对目标详情页面中的每个目标组件，终端设备可以根据该目标组件对应的骨架屏元素描述信息，相应地确定该目标组件所属的组件类型、该目标组件的布局样式和布局位置。终端设备根据目标组件所属的组件类型，可以确定该目标组件对应的目标骨架屏元素的基本样式；根据目标组件的布局样式，可以调整目标骨架屏元素的基本样式得到目标骨架屏元素的目标布局样式；目标组件的布局位置实质上即为目标骨架屏元素的目标布局位置。

例如，假设目标骨架屏描述信息为“media-600|text-36-3-0|btn-28-28|mix-L-1-400”，其中，“media-600”、“text-36-3-0”、“btn-28-28”和“mix-L-1-400”为目标详情页面中各目标组件各自对应的骨架屏元素描述信息，“media-600”、“text-36-3-0”、“btn-28-28”和“mix-L-1-400”各自对应的目标组件在目标详情页面中按照从上到下的顺序排布。

终端设备具体确定目标详情页面中各目标组件各自对应的骨架屏元素、以及骨架屏元素的布局位置和布局样式时，可以按照从上到下的顺序逐一确定每个目标组件对应的骨架屏元素、以及骨架屏元素的布局位置和布局样式。具体的，终端设备可以基于目标骨架屏描述信息中第一位的骨架屏元素描述信息“media-600”，确定位于目标详情页面最上方的目标组件对应的目标骨架屏元素、以及目标骨架屏元素的布局位置和布局样式。即，终端设备根据骨架屏元素描述信息“media-600”，可以确定其对应的目标组件为媒体类型组件，而媒体类型组件对应的骨架屏元素的基本样式为长等于页面宽度的矩形；根据骨架屏元素描述信息“media-600”，可以确定其对应的目标组件的高度为600，基于此对该目标组件对应的目标骨架屏元素的基本样式进行调整，得到长等于页面宽度、宽等于600的矩形作为目标骨架屏元素的目标布局样式；由于骨架屏元素描述信息“media-600”位于骨架屏描述信息中的第一位，因此，可以目标详情页面的上边缘至和该上边缘相距600的区域，为目标骨架屏元素的目标布局位置。以此类推，终端设备可以按照上述方式，基于目标骨架屏描述信息中第二位至第四位的骨架屏元素描述信息，相应地确定目标详情页面中按照从上到下的排布顺序、分别位于第二位至第四位的目标组件各自对应的目标骨架屏元素的目标布局位置和目标布局样式。

应理解，不同组件类型可以对应于不同的组件特征描述模板，针对基于不同的组件特征描述模板生成的骨架屏元素描述信息，终端设备应当采用相应的方式解析该骨架屏元素描述信息，以确定该骨架屏元素描述信息对应的骨架屏元素的布局样式和布局位置。下文将在用于介绍如何生成骨架屏描述信息的方法实施例中，介绍各种骨架屏元素描述信息的生成方式以及各种骨架屏元素描述信息对应的表达含义。

步骤203：基于所述骨架屏元素、以及所述骨架屏元素的布局位置和布局样式，渲染显示所述目标详情页面对应的目标骨架屏页面。

终端设备解析详情页面跳转参数中携带的目标骨架屏描述信息，确定出目标详情页面中各目标组件各自对应的骨架屏元素、以及骨架屏元素的布局样式和布局位置后，终端设备可以进一步基于各目标组件各自对应的骨架屏元素、以及骨架屏元素的布局样式和布局位置，渲染目标详情页面对应的目标骨架屏页面。

具体实现时，终端设备确定出各目标组件各自对应的目标骨架屏元素的目标布局样式和目标布局位置后，可以在目标骨架屏元素的目标布局位置处，基于该目标骨架屏元素的目标布局样式渲染显示该目标骨架屏元素；如此，渲染显示出各目标组件各自对应的目标骨架屏元素，即可达到渲染显示目标详情页面对应的目标骨架屏页面的效果。图3中的(a)和(b)为两种示例性的目标骨架屏页面的示意图。

正如上文所提及的，目标推广信息的详情页面跳转参数中除了包括目标骨架屏描述信息外，还包括目标推广信息对应的目标详情页面的跳转路径；终端设备执行上述步骤201至步骤203的同时，还需要从目标推广信息的详情页面跳转参数中获取目标详情页面的跳转路径，基于该跳转路径获取目标详情页面的页面渲染数据；获取到该页面渲染数据后，终端设备需要隐藏目标骨架屏页面，基于该页面渲染数据渲染显示目标详情页面。

在实际应用中，终端设备需要基于详情页面跳转参数中的跳转路径，请求后台服务器向其提供目标详情页面的页面渲染数据，进而才能基于该页面渲染数据渲染显示目标详情页面；由于页面渲染数据普遍较大，且需要经过网络传输该页面渲染数据，因此，终端设备基于该页面渲染数据渲染显示目标详情页面，往往需要耗费较长的时间。而终端设备基于详情页面跳转参数中的目标骨架屏描述信息渲染目标骨架屏页面，完全不需要通过网络额外获取较大的渲染数据，因此渲染显示该目标骨架屏页面所需耗费的时间较短。如此，在未获取到目标详情页面的页面渲染数据时，可以先显示该目标详情页面对应的目标骨架屏页面，以缓解用户等待目标详情页面时的焦灼情绪。

上述页面渲染方法创新性地提出了一种骨架屏描述协议，基于该骨架屏描述协议可以生成推广信息详情页面对应的骨架屏描述信息，并且该骨架屏描述信息可以被添加到推广信息的详情页面跳转参数中；当检测到用户针对该推广信息触发详情查看操作时，可以从该推广信息的详情页面跳转参数中获取该骨架屏描述信息，基于该骨架屏描述信息渲染推广信息详情页面对应的骨架屏页面。对于布局结构多样的推广信息详情页面来说，通过上述方式描述推广信息详情页面对应的骨架屏页面，并将骨架屏描述信息携带在推广信息的详情页面跳转参数中，可以使得投放该推广信息的应用程序顺利地渲染推广信息详情页面对应的骨架屏页面，有助于提高用户等待推广信息详情页面加载时的观感体验。

下面通过方法实施例对骨架屏描述信息的生成方法进行详细介绍。

参见图4，图4为本申请实施例提供的骨架屏描述信息的生成方法的流程示意图。下述实施例以该骨架屏描述信息的生成方法的执行主体为服务器进行介绍，如图4所示，该骨架屏描述信息的生成方法包括以下步骤：

步骤401：确定所述目标详情页面中各所述目标组件各自的组件类型、以及各所述目标组件各自的布局位置和布局样式。

在实际应用中，目标推广信息的投放用户可以通过推广信息详情页面编辑器，创建编辑目标推广信息对应的详情页面(即目标详情页面)，在编辑目标详情页面的过程中，用户可以根据自身的设计需求，在推广信息详情页面编辑器提供的可选组件中选择部署在目标详情页面中的组件，并且可以编辑调整所选择的组件的布局样式，可以通过拖拽所选择的组件调整该组件在目标详情页面中的布局位置。用户确认完成对于目标详情页面的编辑布局后，可以触控推广信息详情页面编辑器中的确认按钮，相应地，推广信息详情页面编辑器会将用户创建编辑的目标详情页面发送给服务器。服务器接收到该目标详情页面后，会相应地确认该目标详情页面中各目标组件各自所属的组件类型、以及各目标组件各种的布局位置和布局样式。

以目标详情页面为目标小程序版广告落地页为例，目标广告的投放用户可以通过落地页编辑器创建编辑目标小程序版广告落地页，即，可以在落地页编辑器提供的可选控件中选择需要部署在该目标小程序版广告落地页中的组件，并且调整所选择的组件的布局样式，例如，调整所选择的组件的大小、调整所选择的组件中文本元素以及文本元素的样式等等，以及调整所选择的组件的布局位置，例如，将所选择的组件拖拽至目标小程序版广告落地页中的相应位置等等。落地页编辑器检测到用户确认完成针对目标小程序版广告落地页的编辑后，可以将该目标小程序版广告落地页发送给服务器。服务器接收到该目标小程序版广告落地页后，相应地确定该目标小程序版广告落地页中包括的各目标组件各自所属的组件类型、以及各目标组件各自的布局样式和布局位置。

需要说明的是，通常情况下，小程序版广告落地页的长度会大于设备屏幕长度，甚至是设备屏幕长度的若干倍，其中包括很多组件，基于小程序版广告落地页中所有组件的布局结构，生成该小程序版广告落地页对应的骨架屏描述信息，往往需要耗费服务器较多的处理资源，并且相应地需要在推广信息关联的详情页面跳转参数中携带较大的骨架屏描述信息。

为了减少服务器所需耗费的处理资源，以及减少详情页面跳转参数中所需携带的信息量，在目标详情页面为目标小程序版广告落地页的情况下，服务器可以仅将目标小程序版广告落地页的首屏页面中的组件作为目标组件，仅基于目标小程序版广告落地页的首屏页面中的组件布局结构，生成该目标小程序版广告落地页对应的骨架屏描述信息。

即，服务器获取到通过落地页编辑器创建的目标小程序版广告落地页后，可以从该目标小程序版广告落地页中位于最顶部的组件起，按照从上到下的顺序针对该目标小程序版广告落地页中的组件，判断该组件的高度与位于该组件上方的各组件各自的高度的和值是否超过首屏页面高度，若否，则确定该组件为目标组件；进而，针对如此确定出的各目标组件，确定其各自所属的组件类型、以及各自在首屏页面中的布局位置和布局样式。

需要说明的是，首屏页面是指在展示小程序版广告落地页时，用户在不操控显示设备(如不滑动手机屏幕)的情况下所显示的页面。首屏页面高度可以根据显示设备屏幕的高度来确定，例如，对于智能手机来说其对应的首屏页面高度应当为1536，当然，该首屏页面高度也可以根据实际需求被设定为其它值，本申请在此不对首屏页面高度做任何限定。

下面以首屏页面高度为1536为例，对上述目标组件的确定方式进行举例说明。服务器获取到落地页编辑器上传的目标小程序版广告落地页后，可以从该目标小程序版广告落地页中位于最顶部的组件起，按照从上到下的顺序针对该目标小程序版广告落地页中的组件确定其是否为目标组件。具体的，服务器可以先针对该目标小程序版广告落地页中位于最顶部的组件，判断其自身的高度是否小于1536，若是，则将该组件作为目标组件，若否，则将该组件作为目标组件，并且确认完成目标组件的确定操作，不再继续针对后续组件执行该操作；在确定第一个组件为目标组件，并且当前没有完成目标组件的确定操作的情况下，服务器可以针对该目标小程序版广告落地页中第二个组件，判断其自身的高度与位于其上方的第一个组件的高度的和值是否小于1536，若是，则将该第二个组件也作为目标组件，若否，则将该第二个组件也作为目标组件，并且确认完成目标组件的确定操作，不再继续针对后续组件执行该操作。以此类推，通过上述方式确定出目标小程序版广告落地页中各目标组件。

应理解，在实际应用中，当目标详情页面为其它类型的页面时，也可以通过上述方式，仅基于该目标详情页面的首屏页面中的组件布局结构，生成该目标详情页面对应的骨架屏描述信息。

在一种可能的实现方式中，服务器可以通过以下方式确定目标组件所属的组件类型：基于组件类型划分规则根据目标组件对应的目标特征，确定目标组件的组件类型，此处目标组件对应的目标特征可以包括以下至少一种：目标组件中包括的元素类型、目标组件中包括的元素的布局情况、目标组件在页面宽度方向上的布局情况、目标组件在页面长度方向上的布局情况。

上述组件类型划分规则是预先采用规则学习算法从训练数据中学习出的。通过规则学习算法，可以从训练数据中学习出一组用于对未见示例进行判别的规则，该规则具体是式(1)所示的规则：

其中，逻辑蕴含符号“←”右侧的部分被称为规则体，表示该条规则的前提，规则体是由逻辑文字f_k组成的合取式，合取符号“Λ”表示并且，每个逻辑文字f_k都是示例属性特征对应的布尔表达式，L表示规则体中包括的逻辑文字的个数，又称规则长度。逻辑蕴含符号“←”左侧的部分被称为规则头，表示该条规则的结果，

也是逻辑文字，用于表示所规定的目标类别或概念。

在本申请实施例提供的方法中，一种示例性的组件类型划分规则可以表现为式(2)所示的规则：

组件类型←只包含一种元素＝(是/否)Λ沾满屏幕宽度＝(是/否)Λ屏幕长度方向连续＝(是/否)∧图文组合＝(是/否)∧文字独占一个区域＝(是/否) (2)

其中，“只包含一种元素”是指组件内只有一种类型的元素，如组件内只包含文字、只包含图片等。“沾满屏幕宽度”是指组件的宽度等于屏幕宽度，即在屏幕的某个长度范围内只包含一个沾满屏幕宽度的组件。“屏幕长度方向连续”是指一个组件内的元素在屏幕长度方向上不存在隔断空白区域，如只包括图片或视频的组件。“图文组合”是指组件内同时包括图片和文字。“文字独占一个区域”是指文字在组件中单独占据一个子区域。

本申请提出了一种示例性的组件类型划分规则，具体如表1所示：

表1

其中，媒体类型组件又可以被称为区域类型组件，其具有组件元素单一、占据屏幕大面积连续区域等特点，通常至少包括用于承载图片的组件、用于承载视频的组件、用于承载音频的组件、轮播组件，一种示例性的媒体类型组件如图5中的(a)所示；针对某目标组件确定其只包含一种元素、且沾满屏幕宽度、且在屏幕长度方向上连续、且不图文组合、且文字不独占一个区域时，可以相应地确定该目标组件为媒体类型组件。

表单类型组件至少包括用于承载输入框控件的组件，一种示例性的表单类型组件如图5中的(b)所示；针对某目标组件确定其不只包含一种元素、且沾满屏幕宽度、且在屏幕长度方向上不连续、且不图文组合、且文字不独占一个区域时，可以相应地确定该目标组件为表单类型组件。

类文本类型组件通常是由文字内容排列组合而成的组件，其至少包括包括用于承载文本内容的组件，一种示例性的文本类型组件如图5中的(c)所示；针对某目标组件确定其只包含一种元素、且不沾满屏幕宽度、且在屏幕长度方向上不连续、且不图文组合、且文字独占一个区域时，可以相应地确定该目标组件为类文本类型组件。

按钮类型组件通常只占据屏幕中的一小块区域，其至少包括用于承载功能按钮的组件、用于承载跳转链接的组件、用于承载程序跳转接口的组件、用于承载智能电话的组件，一种示例性的按钮类型组件如图5中的(d)所示；针对某目标组件确定其不只包含一种元素、且不沾满屏幕宽度、且在屏幕长度方向上不连续、且不图文组合、且文字不独占一个区域时，可以相应地确定该目标组件为按钮类型组件。

组合类型组件通常包括图文组合布局，具有明确的排布方向，其至少包括用于承载多种元素组合的组件，如货架组件，一种示例性的组合类型组件如图5中的(e)所示；针对某目标组件确定其不只包含一种元素、且不沾满屏幕宽度、且在屏幕长度方向上不连续、且图文组合、且文字独占一个区域时，可以相应地确定该目标组件为组合类型组件。

应理解，上文中表1所示的组件类型划分规则仅为示例，在实际应用中，还可以根据实际需求设置其它类型的组件类型划分规则，本申请在此不对该组件类型划分规则做任何限定。

步骤402：针对每个所述目标组件，基于所述骨架屏描述协议确定与所述目标组件的组件类型对应的目标组件特征描述模板；根据所述目标组件的布局位置和布局样式、以及所述目标组件特征描述模板，生成所述目标组件对应的骨架屏元素描述信息。

步骤403：组合所述目标详情页面中各所述目标组件各自对应的骨架屏元素描述信息，生成所述目标骨架屏描述信息。

服务器确定出目标详情页面中的目标组件后，可以针对每个目标组件，基于骨架屏描述协议确定与该目标组件所属的组件类型对应的组件特征描述模板，作为目标组件特征描述模板；进而，基于该目标组件特征描述模板，根据目标组件的布局样式和布局位置，生成该目标组件对应的骨架屏元素描述信息。最终，将各目标组件各自对应的骨架屏元素描述信息组合起来，即可得到该目标详情页面对应的目标骨架屏描述信息。

一种示例性的骨架屏描述协议如表2所示，其中包括：媒体类型组件对应的组件特征描述模板、表单类型组件对应的组件特征描述模板、类文本类型组件对应的组件特征描述模板、按钮类型组件对应的组件特征描述模板、组合类型组件对应的组件特征描述模板。

表2

基于表2所示的骨架屏描述协议，针对图6所示的目标详情页面生成对应的目标骨架屏描述信息时，服务器可以先针对该目标详情页面中位于最顶部的用于承载图片的媒体类型组件，生成器对应的骨架屏元素描述信息；具体的，服务器先确定媒体类型组件对应的组件特征描述模板为“media-height”，由于该媒体类型组件的高度为600，因此可以相应地生成骨架屏元素描述信息“media-600”，并且基于其在目标详情页面中的布局位置，将该骨架屏元素描述信息“media-600”放置在目标骨架屏描述信息的第一位。然后，针对目标详情页面中位于第二位的用于承载文本的类文本类型组件，生成器对应的骨架屏元素描述信息；具体的，服务器先确定类文本类型组件对应的组件特征描述模板为“text-fontsize-lines-align”，进而基于该类文本类型组件的布局样式，相应地生成骨架屏元素描述信息“text-36-3-0”，并且基于其在目标详情页面中的布局位置，将该骨架屏元素描述信息“text-36-3-0”放置在目标骨架屏描述信息的第二位。以此类推，服务器可以进一步针对目标详情页面中位于第三位的用于承载功能按钮的按钮类型组件、以及位于第四位的用于承载元素组合的组合类型组件，分别生成对应的骨架屏元素描述信息“btn-28-28”和“mix-L-1-340”，并将其相应地放置在目标骨架屏描述信息的第三位和第四位。如此，最终生成该目标详情页面对应的目标骨架屏描述信息为“media-600|text-36-3-0|btn-28-2 8|mix-L-2-340”。

应理解，上述骨架屏描述协议仅为示例，在实际应用中，骨架屏描述协议还可以表现为其它形式，并且该骨架屏描述协议可以根据实际需求进行扩展，本申请在此不对该骨架屏描述协议的形式做任何限定。此外，上述生成骨架屏描述信息的方式也仅为实例，在实际应用中，服务器也可以采用其它方式基于各目标组件各自对应的骨架屏元素描述信息，生成对应的骨架屏描述信息。

通过上述方法生成目标详情页面对应的目标骨架屏描述信息后，服务器后续可以进一步基于该目标骨架屏描述信息，生成该目标详情页面对应的跳转入口，即生成用于引导跳转显示该目标详情页面的目标推广信息。具体的，服务器检测到用户通过推广信息投放客户端触发的基于该目标详情页面生成目标推广信息的操作时，服务器可以获取该目标详情页面对应的目标骨架屏描述信息，并将该目标骨架屏描述信息和目标详情页面的跳转路径，相应地添加至该目标推广信息的详情页面跳转参数中，从而生成可作为该目标详情页面的跳转入口的目标推广信息。

示例性的，在目标详情页面为目标小程序版广告落地页的情况下，服务器可以通过以下方式生成目标推广信息：确定通过广告投放客户端在候选小程序版广告落地页中选择的目标小程序版广告落地页，然后获取该目标小程序版广告落地页对应的目标骨架屏描述信息；进而，将该目标骨架屏描述信息和目标小程序版广告落地页的跳转路径，配置在目标推广信息的详情页面跳转参数中。

具体的，服务器创建用于跳转显示小程序版广告落地页的小程序卡片(即目标推广信息)时，可以先确定广告投放用户通过广告投放客户端在候选小程序版广告落地页中选择的目标小程序广告落地页；进而，获取服务器此前基于该目标小程序广告落地页生成的目标骨架屏描述信息，并将该目标骨架屏描述信息写入该目标推广信息的详情页面跳转参数中，如“pages/index/index？skeletonprotocol＝media-600|text-36-3-0|btn-28-28|mix-L-1-400”，如此生成对应的目标推广信息。

应理解，对于其它类型的目标详情页面，服务器也可以采用类似的方式生成对应的目标推广信息。

通过上述方法，服务器可以基于目标详情页面中的组件布局结构，生成对应的目标骨架屏描述信息，并且可以基于该目标骨架屏描述信息，进一步生成目标推广信息。对于布局结构多样的推广信息详情页面来说，通过上述方式描述推广信息详情页面对应的骨架屏页面，并将骨架屏描述信息携带在推广信息的详情页面跳转参数中，可以使得投放该推广信息的应用程序顺利地渲染推广信息详情页面对应的骨架屏页面，有助于提高用户等待推广信息详情页面加载时的观感体验。

为了便于进一步理解本申请实施例提供的方法，下面以本申请实施例提供的方法用于渲染小程序版广告落地页对应的骨架屏页面为例，对本申请实施例提供的方法进行整体示例性介绍。

首先，需要对小程序版广告落地页中的组件进行分类；此处可以采用规则学习算法从大量小程序版广告落地页中学习出用于对未见示例进行判别的规则，即学习出组件类型划分规则。一种示例性的组件类型划分规则表达式如下式所示：

组件类型←只包含一种元素＝(是/否)Λ沾满屏幕宽度＝(是/否)∧屏幕长度方向连续＝(是/否)∧图文组合＝(是/否)∧文字独占一个区域＝(是/否)

具体的组件类型划分规则可以参见上文中表1所示的内容。

确定出适用于小程序版广告落地页的组件类型划分规则后，可以进一步基于该组件类型划分规则制定骨架屏描述协议，一种示例性的骨架屏描述协议可以参见上文中表2所示的内容，该骨架屏描述协议可以根据实际需求进行扩展。

进而，服务器可以基于所确定的组件类型划分规则和骨架屏描述协议，针对用户创建编辑的目标小程序版广告落地页，生成对应的目标骨架屏描述信息。具体实现时，服务器可以先确定目标小程序版广告落地页的首屏页面中包括的组件作为目标组件，然后，针对每个目标组件，基于上述组件类型划分规则确定其所属的组件类型；进而，基于骨架屏描述协议，根据该目标组件所属的组件类型以及布局样式和布局位置，生成该目标组件对应的骨架屏元素描述信息；最终，组合各目标组件各自对应的骨架屏元素描述信息，得到该目标小程序版广告落地页对应的目标骨架屏描述信息，如“media-600|text-36-3-0|btn-28-28|mix-L-1-340”。

服务器检测到用户通过广告投放客户端，基于上述目标小程序版广告落地页，创建用于跳转显示该目标小程序版广告落地页的小程序卡片(即目标广告)时，服务器可以将该目标小程序版广告落地页对应的目标骨架屏描述信息，写入该目标广告的详情页面跳转参数中，如“pages/index/index？skeletonprotocol＝media-600|text-36-3-0|btn-28-28|mix-L-1-400”；并且，将该目标小程序版广告落地页的跳转路径也写入该目标广告的详情页面跳转参数。

该目标广告被投放至目标应用程序中后，用户可以通过点击该目标广告触发查看该目标小程序版广告落地页；终端设备检测到用户点击该目标广告后，可以初始化落地页小程序的运行环境，该落地页小程序启动后，可以从启动参数的query中取得详情页面跳转参数中skeletonprotocol的内容，解析目标骨架屏描述信息，进而，基于该目标骨架屏描述信息描述的各骨架屏元素的布局样式和布局位置，相应地渲染显示目标小程序版广告落地页对应的目标骨架屏页面。

与此同时，落地页小程序还会根据详情页面跳转参数中目标小程序版广告落地页的跳转路径，请求服务器提供该目标小程序版广告落地页的页面渲染数据，落地页小程序获取到该目标小程序版广告落地页的页面渲染数据后，隐藏目标骨架屏页面，基于页面渲染数据渲染显示目标小程序版广告落地页。

针对上文描述的页面渲染方法，本申请还提供了对应的页面渲染装置，以使上述页面渲染方法在实际中得以应用及实现。

参见图7，图7是上文图2所示的页面渲染方法对应的一种页面渲染装置700的结构示意图。如图7所示，该页面渲染装置700包括：

信息获取模块701，用于响应于针对目标推广信息触发的详情查看操作，从所述目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息；所述目标骨架屏描述信息是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的，所述骨架屏描述协议包括组件类型与组件特征描述模板之间的映射关系，所述目标详情页面为所述目标推广信息对应的详情页面；

信息解析模块702，用于解析所述目标骨架屏描述信息，确定所述目标详情页面中的目标组件对应的骨架屏元素、以及所述骨架屏元素的布局位置和布局样式；

骨架屏渲染模块703，用于基于所述骨架屏元素、以及所述骨架屏元素的布局位置和布局样式，渲染显示所述目标详情页面对应的目标骨架屏页面。

可选的，在图7所示的页面渲染装置的基础上，参见图8，图8为本申请实施例提供的另一种页面渲染装置800的结构示意图。如图8所示，该装置还包括：骨架屏描述信息生成模块801；所述骨架屏描述信息生成模块801包括：

组件信息确定单元8011，用于确定所述目标详情页面中各所述目标组件各自的组件类型、以及各所述目标组件各自的布局位置和布局样式；

骨架屏元素信息生成单元8012，用于针对每个所述目标组件，基于所述骨架屏描述协议确定与所述目标组件的组件类型对应的目标组件特征描述模板；根据所述目标组件的布局位置和布局样式、以及所述目标组件特征描述模板，生成所述目标组件对应的骨架屏元素描述信息；

骨架屏描述信息生成单元8013，用于组合所述目标详情页面中各所述目标组件各自对应的骨架屏元素描述信息，生成所述目标骨架屏描述信息。

可选的，在图8所示的页面渲染装置的基础上，当所述目标详情页面为目标小程序版广告落地页时，所述目标小程序版广告落地页是需要通过落地页小程序渲染显示的广告详情页面；所述组件信息确定单元8011具体用于：

获取通过落地页编辑器创建的所述目标小程序版广告落地页；

从所述目标小程序版广告落地页中位于最顶部的组件起，按照从上到下的顺序针对所述目标小程序版广告落地页中的组件，判断所述组件的高度与位于所述组件上方的各组件各自的高度的和值是否超过首屏页面高度，若否，则确定所述组件为所述目标组件；

确定各所述目标组件各自的组件类型、以及各所述目标组件各自在首屏页面中的布局位置和布局样式。

可选的，在图8所示的页面渲染装置的基础上，所述组件信息确定单元8011具体用于：

基于组件类型划分规则根据所述目标组件对应的目标特征，确定所述目标组件的组件类型；所述目标组件对应的目标特征包括以下至少一种：所述目标组件中包括的元素类型、所述目标组件中包括的元素的布局情况、所述目标组件在页面宽度方向上的布局情况、所述目标组件在页面长度方向上的布局情况。

可选的，在图7或图8所示的页面渲染装置的基础上，所述骨架屏描述协议至少包括：媒体类型组件对应的组件特征描述模板、表单类型组件对应的组件特征描述模板、类文本类型组件对应的组件特征描述模板、按钮类型组件对应的组件特征描述模板、组合类型组件对应的组件特征描述模板；

所述媒体类型组件至少包括用于承载图片的组件、用于承载视频的组件、用于承载音频的组件、轮播组件；所述表单类型组件至少包括用于承载输入框控件的组件；所述类文本类型组件至少包括用于承载文本内容的组件；所述按钮类型组件至少包括用于承载功能按钮的组件、用于承载跳转链接的组件、用于承载程序跳转接口的组件；所述组合类型组件至少包括用于承载多种元素组合的组件。

可选的，在图7所示的页面渲染装置的基础上，参见图9，图9为本申请实施例提供的另一种页面渲染装置900的结构示意图。如图9所示，所述信息获取模块701包括：

程序启动单元901，用于响应于针对所述目标推广信息触发的详情查看操作，启动页面渲染程序；

信息获取单元902，用于通过所述页面渲染程序，解析所述目标推广信息的详情页面跳转参数，获取所述目标骨架屏描述信息。

可选的，在图9所示的页面渲染装置的基础上，当所述目标详情页面为目标小程序版广告落地页时，所述目标小程序版广告落地页是需要通过落地页小程序渲染显示的广告详情页面；所述程序启动单元901具体用于：

响应于针对所述目标推广信息触发的详情查看操作，触发启动所述落地页小程序；

所述信息获取单元902具体用于：

通过所述落地页小程序的查询query通道，从所述目标推广信息的详情页面跳转参数中获取所述目标骨架屏描述信息。

可选的，在图8或图9所示的页面渲染装置的基础上，参见图10，图10为本申请实施例提供的另一种页面渲染装置1000的结构示意图。如图10所示，该装置还包括：

推广信息生成模块1001，用于确定通过广告投放客户端在候选小程序版广告落地页中选择的所述目标小程序版广告落地页；获取所述目标小程序版广告落地页对应的所述目标骨架屏描述信息；将所述目标骨架屏描述信息和所述目标小程序版广告落地页的跳转路径配置在所述目标推广信息的详情页面跳转参数中。

可选的，在图7所示的页面渲染装置的基础上，所述信息解析模块702具体用于：

解析所述目标骨架屏描述信息，得到所述目标组件对应的骨架屏元素描述信息；

根据所述骨架屏元素描述信息表征的组件类型，确定所述目标组件对应的目标骨架屏元素的基本样式；根据所述骨架屏元素描述信息表征的所述目标组件的布局样式，调整所述基本样式得到所述目标骨架屏元素的目标布局样式；将所述骨架屏元素描述信息表征的所述目标组件的布局位置，确定为所述目标骨架屏元素的目标布局位置。

可选的，在图7所示的页面渲染装置的基础上，参见图11，图11为本申请实施例提供的另一种页面渲染装置1100的结构示意图。如图11所示，该装置还包括：

跳转路径获取模块1101，用于从所述目标推广信息的详情页面跳转参数中获取所述目标详情页面的跳转路径；

渲染数据获取模块1102，用于基于所述跳转路径获取所述目标详情页面的页面渲染数据；

详情页面渲染模块1103，用于获取到所述页面渲染数据后，隐藏所述目标骨架屏页面，基于所述页面渲染数据渲染显示所述目标详情页面。

上述页面渲染装置创新性地提出了一种骨架屏描述协议，基于该骨架屏描述协议可以生成推广信息详情页面对应的骨架屏描述信息，并且该骨架屏描述信息可以被添加到推广信息的详情页面跳转参数中；当检测到用户针对该推广信息触发详情查看操作时，可以从该推广信息的详情页面跳转参数中获取该骨架屏描述信息，基于该骨架屏描述信息渲染推广信息详情页面对应的骨架屏页面。对于布局结构多样的推广信息详情页面来说，通过上述方式描述推广信息详情页面对应的骨架屏页面，并将骨架屏描述信息携带在推广信息的详情页面跳转参数中，可以使得投放该推广信息的应用程序顺利地渲染推广信息详情页面对应的骨架屏页面，有助于提高用户等待推广信息详情页面加载时的观感体验。

本申请实施例还提供了一种用于渲染页面的设备，该设备具体可以是终端设备；本申请实施例还提供了一种用于生成骨架屏描述信息的设备，该设备具体可以是服务器；下面将从硬件实体化的角度对本申请实施例提供的终端设备和服务器进行介绍。

参见图12，图12是本申请实施例提供的终端设备的结构示意图。如图12所示，为了便于说明，仅示出了与本申请实施例相关的部分，具体技术细节未揭示的，请参照本申请实施例方法部分。该终端可以为包括手机、平板电脑、个人数字助理(英文全称：PersonalDigital Assistant，英文缩写：PDA)、销售终端(英文全称：Point of Sales，英文缩写：POS)、车载电脑等任意终端设备，以终端为计算机为例：

图12示出的是与本申请实施例提供的终端相关的计算机的部分结构的框图。参考图12，计算机包括：射频(英文全称：Radio Frequency，英文缩写：RF)电路1210、存储器1220、输入单元1230、显示单元1240、传感器1250、音频电路1260、无线保真(英文全称：wireless fidelity，英文缩写：WiFi)模块1270、处理器1280、以及电源1290等部件。本领域技术人员可以理解，图12中示出的计算机结构并不构成对计算机的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

存储器1220可用于存储软件程序以及模块，处理器1280通过运行存储在存储器1220的软件程序以及模块，从而执行计算机的各种功能应用以及数据处理。存储器1220可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据计算机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器1220可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

处理器1280是计算机的控制中心，利用各种接口和线路连接整个计算机的各个部分，通过运行或执行存储在存储器1220内的软件程序和/或模块，以及调用存储在存储器1220内的数据，执行计算机的各种功能和处理数据，从而对计算机进行整体监控。可选的，处理器1280可包括一个或多个处理单元；优选的，处理器1280可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器1280中。

在本申请实施例中，该终端所包括的处理器1280还具有以下功能：

响应于针对目标推广信息触发的详情查看操作，从所述目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息；所述目标骨架屏描述信息是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的，所述骨架屏描述协议包括组件类型与组件特征描述模板之间的映射关系，所述目标详情页面为所述目标推广信息对应的详情页面；

解析所述目标骨架屏描述信息，确定所述目标详情页面中的目标组件对应的骨架屏元素、以及所述骨架屏元素的布局位置和布局样式；

基于所述骨架屏元素、以及所述骨架屏元素的布局位置和布局样式，渲染显示所述目标详情页面对应的目标骨架屏页面。

可选的，所述处理器1280还用于执行本申请实施例提供的页面渲染方法的任意一种实现方式的步骤。

参见图13，图13为本申请实施例提供的一种服务器1300的结构示意图。该服务器1300可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上中央处理器(central processing units，CPU)1322(例如，一个或一个以上处理器)和存储器1332，一个或一个以上存储应用程序1342或数据1344的存储介质1330(例如一个或一个以上海量存储设备)。其中，存储器1332和存储介质1330可以是短暂存储或持久存储。存储在存储介质1330的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对服务器中的一系列指令操作。更进一步地，中央处理器1322可以设置为与存储介质1330通信，在服务器1300上执行存储介质1330中的一系列指令操作。

服务器1300还可以包括一个或一个以上电源1326，一个或一个以上有线或无线网络接口1350，一个或一个以上输入输出接口1358，和/或，一个或一个以上操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM等等。

上述实施例中由服务器所执行的步骤可以基于该图13所示的服务器结构。

其中，CPU 1322用于执行如下步骤：

确定所述目标详情页面中各所述目标组件各自的组件类型、以及各所述目标组件各自的布局位置和布局样式；

针对每个所述目标组件，基于所述骨架屏描述协议确定与所述目标组件的组件类型对应的目标组件特征描述模板；根据所述目标组件的布局位置和布局样式、以及所述目标组件特征描述模板，生成所述目标组件对应的骨架屏元素描述信息；

组合所述目标详情页面中各所述目标组件各自对应的骨架屏元素描述信息，生成所述目标骨架屏描述信息。

可选的，CPU 1322还可以用于执行本申请实施例提供的骨架屏信息生成方法的任意一种实现方式的步骤。

本申请实施例还提供一种计算机可读存储介质，用于存储计算机程序，该计算机程序用于执行前述各个实施例所述的页面渲染方法和骨架屏信息生成方法中的任意一种实施方式。

本申请实施例还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行前述各个实施例所述的页面渲染方法和骨架屏信息生成方法中的任意一种实施方式。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(英文全称：Read-OnlyMemory，英文缩写：ROM)、随机存取存储器(英文全称：Random Access Memory，英文缩写：RAM)、磁碟或者光盘等各种可以存储计算机程序的介质。

应当理解，在本申请中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：只存在A，只存在B以及同时存在A和B三种情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。

以上所述，以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (15)

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

响应于针对目标推广信息触发的详情查看操作，从所述目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息；所述目标骨架屏描述信息是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的，所述骨架屏描述协议包括组件类型与组件特征描述模板之间的映射关系，所述目标详情页面为所述目标推广信息对应的详情页面；

解析所述目标骨架屏描述信息，确定所述目标详情页面中的目标组件对应的骨架屏元素、以及所述骨架屏元素的布局位置和布局样式；

基于所述骨架屏元素、以及所述骨架屏元素的布局位置和布局样式，渲染显示所述目标详情页面对应的目标骨架屏页面。

2.根据权利要求1所述的方法，其特征在于，通过以下方式生成所述目标骨架屏描述信息：

确定所述目标详情页面中各所述目标组件各自的组件类型、以及各所述目标组件各自的布局位置和布局样式；

针对每个所述目标组件，基于所述骨架屏描述协议确定与所述目标组件的组件类型对应的目标组件特征描述模板；根据所述目标组件的布局位置和布局样式、以及所述目标组件特征描述模板，生成所述目标组件对应的骨架屏元素描述信息；

组合所述目标详情页面中各所述目标组件各自对应的骨架屏元素描述信息，生成所述目标骨架屏描述信息。

3.根据权利要求2所述的方法，其特征在于，当所述目标详情页面为目标小程序版广告落地页时，所述目标小程序版广告落地页是需要通过落地页小程序渲染显示的广告详情页面；

所述确定所述目标详情页面中各所述目标组件各自的组件类型、以及各所述目标组件各自的布局位置和布局样式，包括：

获取通过落地页编辑器创建的所述目标小程序版广告落地页；

从所述目标小程序版广告落地页中位于最顶部的组件起，按照从上到下的顺序针对所述目标小程序版广告落地页中的组件，判断所述组件的高度与位于所述组件上方的各组件各自的高度的和值是否超过首屏页面高度，若否，则确定所述组件为所述目标组件；

确定各所述目标组件各自的组件类型、以及各所述目标组件各自在首屏页面中的布局位置和布局样式。

4.根据权利要求2或3所述的方法，其特征在于，所述确定所述目标详情页面中各所述目标组件各自的组件类型，包括：

基于组件类型划分规则根据所述目标组件对应的目标特征，确定所述目标组件的组件类型；所述目标组件对应的目标特征包括以下至少一种：所述目标组件中包括的元素类型、所述目标组件中包括的元素的布局情况、所述目标组件在页面宽度方向上的布局情况、所述目标组件在页面长度方向上的布局情况。

5.根据权利要求1至3任一项所述的方法，其特征在于，

所述骨架屏描述协议至少包括：媒体类型组件对应的组件特征描述模板、表单类型组件对应的组件特征描述模板、类文本类型组件对应的组件特征描述模板、按钮类型组件对应的组件特征描述模板、组合类型组件对应的组件特征描述模板；

所述媒体类型组件至少包括用于承载图片的组件、用于承载视频的组件、用于承载音频的组件、轮播组件；所述表单类型组件至少包括用于承载输入框控件的组件；所述类文本类型组件至少包括用于承载文本内容的组件；所述按钮类型组件至少包括用于承载功能按钮的组件、用于承载跳转链接的组件、用于承载程序跳转接口的组件；所述组合类型组件至少包括用于承载多种元素组合的组件。

6.根据权利要求1所述的方法，其特征在于，所述响应于针对目标推广信息触发的详情查看操作，从所述目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息，包括：

响应于针对所述目标推广信息触发的详情查看操作，启动页面渲染程序；

通过所述页面渲染程序，解析所述目标推广信息的详情页面跳转参数，获取所述目标骨架屏描述信息。

7.根据权利要求6所述的方法，其特征在于，当所述目标详情页面为目标小程序版广告落地页时，所述目标小程序版广告落地页是需要通过落地页小程序渲染显示的广告详情页面，所述响应于针对所述目标推广信息触发的详情查看操作，启动页面渲染程序，包括：

响应于针对所述目标推广信息触发的详情查看操作，触发启动所述落地页小程序；

所述通过所述页面渲染程序，解析所述目标推广信息的详情页面跳转参数，获取所述目标骨架屏描述信息，包括：

通过所述落地页小程序的查询query通道，从所述目标推广信息的详情页面跳转参数中获取所述目标骨架屏描述信息。

8.根据权利要求3或7所述的方法，其特征在于，通过以下方式生成所述目标推广信息：

确定通过广告投放客户端在候选小程序版广告落地页中选择的所述目标小程序版广告落地页；

获取所述目标小程序版广告落地页对应的所述目标骨架屏描述信息；

将所述目标骨架屏描述信息和所述目标小程序版广告落地页的跳转路径配置在所述目标推广信息的详情页面跳转参数中。

9.根据权利要求1所述的方法，其特征在于，所述解析所述目标骨架屏描述信息，确定所述目标详情页面中的目标组件对应的骨架屏元素、以及所述骨架屏元素的布局位置和布局样式，包括：

解析所述目标骨架屏描述信息，得到所述目标组件对应的骨架屏元素描述信息；

根据所述骨架屏元素描述信息表征的组件类型，确定所述目标组件对应的目标骨架屏元素的基本样式；根据所述骨架屏元素描述信息表征的所述目标组件的布局样式，调整所述基本样式得到所述目标骨架屏元素的目标布局样式；将所述骨架屏元素描述信息表征的所述目标组件的布局位置，确定为所述目标骨架屏元素的目标布局位置。

10.根据权利要求1所述的方法，其特征在于，所述方法还包括：

从所述目标推广信息的详情页面跳转参数中获取所述目标详情页面的跳转路径；

基于所述跳转路径获取所述目标详情页面的页面渲染数据；

获取到所述页面渲染数据后，隐藏所述目标骨架屏页面，基于所述页面渲染数据渲染显示所述目标详情页面。

11.一种页面渲染装置，其特征在于，所述装置包括：

信息获取模块，用于响应于针对目标推广信息触发的详情查看操作，从所述目标推广信息的详情页面跳转参数中获取目标骨架屏描述信息；所述目标骨架屏描述信息是基于骨架屏描述协议根据目标详情页面中的组件布局结构生成的，所述骨架屏描述协议包括组件类型与组件特征描述模板之间的映射关系，所述目标详情页面为所述目标推广信息对应的详情页面；

信息解析模块，用于解析所述目标骨架屏描述信息，确定所述目标详情页面中的目标组件对应的骨架屏元素、以及所述骨架屏元素的布局位置和布局样式；

骨架屏渲染模块，用于基于所述骨架屏元素、以及所述骨架屏元素的布局位置和布局样式，渲染显示所述目标详情页面对应的目标骨架屏页面。

12.根据权利要求11所述的装置，其特征在于，所述装置还包括：骨架屏描述信息生成模块；所述骨架屏描述信息生成模块包括：

组件信息确定单元，用于确定所述目标详情页面中各所述目标组件各自的组件类型、以及各所述目标组件各自的布局位置和布局样式；

骨架屏元素信息生成单元，用于针对每个所述目标组件，基于所述骨架屏描述协议确定与所述目标组件的组件类型对应的目标组件特征描述模板；根据所述目标组件的布局位置和布局样式、以及所述目标组件特征描述模板，生成所述目标组件对应的骨架屏元素描述信息；

骨架屏描述信息生成单元，用于组合所述目标详情页面中各所述目标组件各自对应的骨架屏元素描述信息，生成所述目标骨架屏描述信息。

13.根据权利要求12所述的装置，其特征在于，当所述目标详情页面为目标小程序版广告落地页时，所述目标小程序版广告落地页是需要通过落地页小程序渲染显示的广告详情页面；

所述组件信息确定单元具体用于：

获取通过落地页编辑器创建的所述目标小程序版广告落地页；

从所述目标小程序版广告落地页中位于最顶部的组件起，按照从上到下的顺序针对所述目标小程序版广告落地页中的组件，判断所述组件的高度与位于所述组件上方的各组件各自的高度的和值是否超过首屏页面高度，若否，则确定所述组件为所述目标组件；

确定各所述目标组件各自的组件类型、以及各所述目标组件各自在首屏页面中的布局位置和布局样式。

14.一种设备，其特征在于，所述设备包括处理器及存储器；

所述存储器用于存储计算机程序；

所述处理器用于根据所述计算机程序执行权利要求1至10中任一项所述的页面渲染方法。

15.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质用于存储计算机程序，所述计算机程序用于执行权利要求1至10中任一项所述的页面渲染方法。

Images