CN110807161A - 一种页面骨架渲染方法、装置、设备及介质 - Google Patents

Abstract

本发明实施例公开了一种页面骨架渲染方法、装置、设备及介质，所述页面骨架渲染方法包括：响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；查询待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架，并将所述页面骨架作为所述页面显示请求的响应信息。本发明实施例提供的页面骨架渲染方法通过查询节点标记确定节点对应的渲染方式，简化了页面骨架的生成过程，提高了页面响应速度。

Description

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

技术领域

本发明实施例涉及页面显示领域，尤其涉及一种页面骨架渲染方法、装置、设备及介质。

背景技术

骨架屏是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。目前骨架屏的常用实现方式有：一、在页面未渲染完成时截取页面渲染图片，根据截取的图片生成页面骨架；二、根据页面结构预先编写页面骨架生成代码，根据预先编写的代码生成页面骨架。上述方式中，截取图片生成页面骨架可能会影响程序功能，预先编写页面骨架生成代码较复杂，当页面变化率高时，需要编写大量不同的页面骨架生成代码，程序稳定性差。

发明内容

本发明实施例提供了一种页面骨架渲染方法、装置、设备及介质，以实现简化页面骨架的生成过程，提高页面响应速度。

第一方面，本发明实施例提供了一种页面骨架渲染方法，包括：

响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；

查询待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；

根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架。

第二方面，本发明实施例还提供了一种页面骨架渲染装置，包括：

待渲染页面确定模块，用于响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；

渲染方式确定模块，用于查询待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；

页面骨架生成模块，用于根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架。

第三方面，本发明实施例还提供了一种计算机设备，所述设备包括：

一个或多个处理器；

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

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明任意实施例所提供的页面骨架渲染方法。

第六方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任意实施例所提供的页面骨架渲染方法。

本发明实施例通过响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；查询待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架，并将所述页面骨架作为所述页面显示请求的响应信息，通过查询节点标记确定节点对应的渲染方式，简化了页面骨架的生成过程，提高了页面响应速度。

附图说明

图1是本发明实施例一所提供的一种页面骨架渲染方法的流程图；

图2是本发明实施例二所提供的一种页面骨架渲染装置的结构示意图；

图3是本发明实施例三所提供的计算机设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1是本发明实施例一所提供的一种页面骨架渲染方法的流程图。本实施例可适用于应用程序在响应客户端发起的页面显示请求，生成页面显示请求对应的页面骨架时的情形，尤其适用于小程序在响应检测到的页面显示请求，生成页面骨架时的情形。该方法可以由页面骨架渲染装置执行，该页面骨架渲染装置可以采用软件和/或硬件的方式实现，例如，该页面骨架渲染装置可配置于计算机设备中。如图1所示，所述方法包括：

S110、响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面。

在本实施例中，页面显示请求可以为用户通过客户端触发的，用于指示显示指定页面的请求。可选的，可以对页面显示请求进行解析，获得页面显示请求中包含的页面标识，根据页面标识确定页面显示请求对应的待渲染页面。

S120、查询所述待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式。

在本实施例中，为了简化小程序中页面骨架的生成过程，减小程序冗余度，可以预先根据待渲染页面的页面结构将待渲染页面划分为多个节点，分别针对每个节点进行渲染，最终得到渲染好的页面骨架。示例性的，若待渲染页面为游戏界面，则可以将游戏用户的头像区域作为一个节点。

在本发明的一种实施方式中，所述查询待渲染页面中节点标记为设定节点标记的节点，包括：通过调用节点查询接口查询待渲染页面中节点标记为设定节点标记的节点。可选的，考虑到小程序(如微信小程序)自身不具有遍历节点的功能，可以为页面中的节点设置节点标记，通过调用节点查询接口查询设定节点标记的节点，以实现根据节点标记实现对节点的不同方式的渲染。其中，节点查询接口可以为wx.createSelectorQuery()。

可选的，开发人员可以预先设定页面中每个节点的节点标记以及在生成页面骨架时需要渲染的节点标记(即设定节点标记)，当检测到页面显示请求时，查找页面显示请求对应的设定节点标记，并针对设定节点标记中的每一个节点标记，通过wx.createSelectorQuery()查找类为该节点标记的节点。可选的，可以根据节点的渲染形状确定节点的节点标记，如矩形色块标记为“skeleton-rect”，圆形色块标记为“skeleton-circle”等。在本实施例中，对节点标记的个数不做限制。

示例性的，若设定节点标记包括“skeleton-rect”和“skeleton-circle”，则针对分别查询出“skeleton-rect”对应的节点以及“skeleton-circle”对应的节点。可以理解的是，每个节点标记可能对应多个节点。示例性的，假设待渲染页面为游戏页面，其中的节点包括用户头像区域、游戏画面显示区域、游戏操作区域等节点。其中用户头像区域和游戏操作区域的节点标记均可以为“skeleton-circle”。

在本发明的一种实施方式中，所述根据所述节点标记确定所述节点的渲染方式，包括：通过查找预先设置的对应关系，确定所述节点标记对应的渲染形状，并将所述渲染形状作为所述节点的渲染方式。

在本实施例中，预先设定节点标记后，可以根据节点标记的渲染需求构建节点标记与渲染方式的对应关系，在进行页面骨架的渲染时，通过预先设置的对应关系，确定节点标记对应的渲染方式。可选的，渲染方式可以包括渲染形状、渲染颜色等渲染信息。示例性的，节点标记为“skeleton-rect”对应的渲染形状可以为矩形，节点标记“skeleton-circle”对应的渲染形状可以为圆形。

在本发明的一种实施方式中，所述根据所述节点的渲染方式对所述节点进行渲染，包括：获取所述节点的渲染参数，根据所述渲染参数以及所述渲染形状确定渲染区域，对所述渲染区域进行渲染。

在确定渲染方式后，可以根据节点的渲染参数以及渲染方式确定渲染区域。其中，节点的渲染参数可以包括节点的大小信息和/或所述节点的位置信息。节点的大小信息可以为节点的宽、高等参数，或节点的直径等参数，节点的位置信息可以为节点距离视口距离的绝对值。获取节点的渲染参数后，可以根据节点的渲染参数以及渲染形状确定节点的渲染区域。示例性的，若节点的大小信息为直径1厘米，节点的位置坐标为(5，5)，节点的渲染形状为圆形，则可以确定节点的渲染区域为以坐标点(5，5)为圆心，直径为1厘米的圆形区域。

在上述方案的基础上，所述根据所述渲染参数以及所述渲染方式确定渲染区域，包括：获取页面显示终端的屏幕显示参数，根据所述屏幕显示参数、所述渲染参数以及所述渲染形状确定渲染区域。

考虑到不同的终端的屏幕大小不同，为了使致所渲染出的页面骨架能够与不同大小屏幕均匹配，将屏幕显示参数作为渲染区域的确定参数之一。可选的，可以预先设定标准显示参数以及标准渲染参数，可以根据屏幕显示参数与标准显示参数的比值调整渲染区域的中心位置及大小，以使渲染出的页面骨架能够适配不同的显示设备。

S130、根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架，并将所述页面骨架作为所述页面显示请求的响应信息。

确定需要渲染的各节点以及各节点的渲染方式后，针对每个节点，以该节点对应的渲染方式对该节点对应的渲染区域进行渲染，得到渲染好的页面骨架，将得到的页面骨架作为页面显示请求的响应信息，发送至页面显示请求对应的终端进行显示。

本发明实施例通过响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；查询待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架，并将所述页面骨架作为所述页面显示请求的响应信息，通过查询节点标记确定节点对应的渲染方式，简化了页面骨架的生成过程，提高了页面响应速度。

在上述方案的基础上，还包括：获取待渲染页面的页面渲染数据，根据所述页面渲染数据生成目标显示页面，并使用所述目标显示页面替换所述页面骨架。可选的，在通过接口获取待渲染页面的实际页面渲染数据，并渲染生成实际的目标显示页面后，将目标显示页面发送至客户端，以使客户端使用目标显示页面替换页面骨架，完成目标页面的显示。

实施例二

图2是本发明实施例二所提供的一种页面骨架渲染装置的结构示意图。该页面骨架渲染装置可以采用软件和/或硬件的方式实现，例如该页面骨架渲染装置可以配置于计算机设备中。如图2所示，所述装置包括待渲染页面确定模块210、渲染方式确定模块220和页面骨架生成模块230，其中：

待渲染页面确定模块210，用于响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；

渲染方式确定模块220，用于查询待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；

页面骨架生成模块230，用于根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架，并将所述页面骨架作为所述页面显示请求的响应信息。

本发明实施例通过待渲染页面确定模块响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；渲染方式确定模块查询待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；页面骨架生成模块根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架，通过查询节点标记确定节点对应的渲染方式，简化了页面骨架的生成过程，提高了页面响应速度。

可选的，在上述方案的基础上，所述渲染方式确定模块220具体用于：

通过调用节点查询接口查询待渲染页面中节点标记为设定节点标记的节点。

可选的，在上述方案的基础上，所述渲染方式确定模块220具体用于：

通过查找预先设置的对应关系，确定所述节点标记对应的渲染形状，并将所述渲染形状作为所述节点的渲染方式。

可选的，在上述方案的基础上，所述页面骨架生成模块220具体用于：

获取所述节点的渲染参数，根据所述渲染参数以及所述渲染形状确定渲染区域，对所述渲染区域进行渲染。

可选的，在上述方案的基础上，所述页面骨架生成模块230具体用于：

获取页面显示终端的屏幕显示参数，根据所述屏幕显示参数、所述渲染参数以及所述渲染形状确定渲染区域。

可选的，在上述方案的基础上，所述渲染参数包括所述节点的大小信息和/或所述节点的位置信息。

可选的，在上述方案的基础上，所述装置还包括目标页面替换模块，用于：

获取待渲染页面的页面渲染数据，根据所述页面渲染数据生成目标显示页面，将所述目标显示页面发送至客户端，以使客户端使用所述目标显示页面替换所述页面骨架。

本发明实施例所提供的页面骨架渲染装置可执行本发明任意实施例所提供的页面骨架渲染方法，具备执行方法相应的功能模块和有益效果。

实施例三

图3是本发明实施例三所提供的计算机设备的结构示意图。图3示出了适于用来实现本发明实施方式的示例性计算机设备312的框图。图3显示的计算机设备312仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图3所示，计算机设备312以通用计算设备的形式表现。计算机设备312的组件可以包括但不限于：一个或者多个处理器316，***存储器328，连接不同***组件(包括***存储器328和处理器316)的总线318。

总线318表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，***总线，图形加速端口，处理器316或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及***组件互连(PCI)总线。

计算机设备312典型地包括多种计算机***可读介质。这些介质可以是任何能够被计算机设备312访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

***存储器328可以包括易失性存储器形式的计算机***可读介质，例如随机存取存储器(RAM)330和/或高速缓存存储器332。计算机设备312可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机***存储介质。仅作为举例，存储装置334可以用于读写不可移动的、非易失性磁介质(图3未显示，通常称为“硬盘驱动器”)。尽管图3中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线318相连。存储器328可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块332的程序/实用工具330，可以存储在例如存储器328中，这样的程序模块332包括但不限于操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块332通常执行本发明所描述的实施例中的功能和/或方法。

计算机设备312也可以与一个或多个外部设备314(例如键盘、指向设备、显示器324等)通信，还可与一个或者多个使得用户能与该计算机设备312交互的设备通信，和/或与使得该计算机设备312能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口322进行。并且，计算机设备312还可以通过网络适配器320与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器320通过总线318与计算机设备312的其它模块通信。应当明白，尽管图中未示出，可以结合计算机设备312使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID***、磁带驱动器以及数据备份存储***等。

处理器316通过运行存储在***存储器328中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的页面骨架渲染方法，该方法包括：

响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；

查询所述待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；

根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架，并将所述页面骨架作为所述页面显示请求的响应信息。

当然，本领域技术人员可以理解，处理器还可以实现本发明任意实施例所提供的页面骨架渲染方法的技术方案。

实施例四

本发明实施例四还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明实施例所提供的页面骨架渲染方法，该方法包括：

响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；

查询所述待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；

根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架，并将所述页面骨架作为所述页面显示请求的响应信息。

当然，本发明实施例所提供的一种计算机可读存储介质，其上存储的计算机程序不限于如上所述的方法操作，还可以执行本发明任意实施例所提供的页面骨架渲染方法的相关操作。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

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

响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；

查询所述待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；

根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架，并将所述页面骨架作为所述页面显示请求的响应信息。

2.根据权利要求1所述的方法，其特征在于，所述查询待渲染页面中节点标记为设定节点标记的节点，包括：

通过调用节点查询接口查询待渲染页面中节点标记为设定节点标记的节点。

3.根据权利要求2所述的方法，其特征在于，所述根据所述节点标记确定所述节点的渲染方式，包括：

通过查找预先设置的对应关系，确定所述节点标记对应的渲染形状，并将所述渲染形状作为所述节点的渲染方式。

4.根据权利要求1所述的方法，其特征在于，所述根据所述节点的渲染方式对所述节点进行渲染，包括：

获取所述节点的渲染参数，根据所述渲染参数以及所述渲染形状确定渲染区域，对所述渲染区域进行渲染。

5.根据权利要求4所述的方法，其特征在于，所述根据所述渲染参数以及所述渲染方式确定渲染区域，包括：

获取页面显示终端的屏幕显示参数，根据所述屏幕显示参数、所述渲染参数以及所述渲染形状确定渲染区域。

6.根据权利要求4所述的方法，其特征在于，所述渲染参数包括所述节点的大小信息和/或所述节点的位置信息。

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

获取待渲染页面的页面渲染数据，根据所述页面渲染数据生成目标显示页面，将所述目标显示页面发送至客户端，以使客户端使用所述目标显示页面替换所述页面骨架。

8.一种页面骨架渲染装置，其特征在于，包括：

待渲染页面确定模块，用于响应于检测到的页面显示请求，确定所述页面显示请求对应的待渲染页面；

渲染方式确定模块，用于查询待渲染页面中节点标记为设定节点标记的节点，根据所述节点标记确定所述节点的渲染方式；

页面骨架生成模块，用于根据所述节点的渲染方式对所述节点进行渲染，得到渲染好的页面骨架。

9.一种计算机设备，其特征在于，所述设备包括：

一个或多个处理器；

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

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

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

Images