CN112417346A - 渲染方法、装置、电子设备及存储介质 - Google Patents

渲染方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN112417346A
CN112417346A CN202110093209.7A CN202110093209A CN112417346A CN 112417346 A CN112417346 A CN 112417346A CN 202110093209 A CN202110093209 A CN 202110093209A CN 112417346 A CN112417346 A CN 112417346A
Authority
CN
China
Prior art keywords
rendering
page element
objects
page
generating
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110093209.7A
Other languages
English (en)
Inventor
崔宝秋
吴华
王瑞端
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Xiaomi Mobile Software Co Ltd
Original Assignee
Beijing Xiaomi Mobile Software Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Xiaomi Mobile Software Co Ltd filed Critical Beijing Xiaomi Mobile Software Co Ltd
Priority to CN202110093209.7A priority Critical patent/CN112417346A/zh
Publication of CN112417346A publication Critical patent/CN112417346A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本公开关于一种渲染方法、装置、电子设备及存储介质,其中,方法包括:获取当前视口之中页面元素的状态,其中,页面元素对应一个渲染对象集合,且渲染对象集合之中包括多个渲染对象;如果页面元素的状态为预设状态,则从多个渲染对象之中选择部分渲染对象;以及根据选择的部分渲染对象生成页面元素的预览视图,并显示在当前视口之中。该方法在页面元素的状态为预设状态时,从页面元素对应的多个渲染对象之中选择部分渲染对象,以根据部分渲染对象将页面元素进行显示,有利于在降低流量消耗的基础上,提高页面元素的显示的可靠性,改善用户的观看效果。

Description

渲染方法、装置、电子设备及存储介质
技术领域
本公开涉及互联网技术领域,尤其涉及一种渲染方法、装置、电子设备及存储介质。
背景技术
目前,随着电子设备,例如智能设备功能的不断强大,对于智能设备的功能要求也越来越多,因此智能设备所需要显示的页面内容也越来越多,越来越丰富。然而,页面内容的丰富也会带来加载时间长等问题。
相关技术之中,在页面被渲染之后,且在页面的滑动过程之中,不停的有新的渲染对象进入到当前视口,如果页面一直处于滑动状态,页面元素则以占位图的方式进行添加,因此就会导致页面元素的显示可靠性较低、用户观感较差,影响用户观看效果。
发明内容
本公开旨在至少在一定程度上解决相关技术中的技术问题之一。
为此,本公开提出了如下技术方案。
本公开第一方面实施例提出了一种渲染方法,包括:获取当前视口之中页面元素的状态,其中,所述页面元素对应一个渲染对象集合,且所述渲染对象集合之中包括多个渲染对象;如果所述页面元素的状态为预设状态,则从所述多个渲染对象之中选择部分渲染对象;以及根据选择的部分渲染对象生成所述页面元素的预览视图,并显示在所述当前视口之中。
另外,根据本公开上述实施例的渲染方法还可以具有如下附加的技术特征。
根据本公开的一个实施例,渲染方法,还包括:如果所述页面元素的状态不为预设状态,则根据所述渲染对象集合之中的多个渲染对象生成所述页面元素的正常视图,并显示在所述当前视口之中。
根据本公开的一个实施例,所述多个渲染对象包括内容渲染对象和多个属性渲染对象,所述多个属性渲染对象包括:显示效果处理渲染对象、操作处理渲染对象、动画处理渲染对象、布局渲染对象之中的多种。
根据本公开的一个实施例,所述从所述多个渲染对象之中选择部分渲染对象,包括:将所述布局渲染对象作为选择的部分渲染对象。
根据本公开的一个实施例,述页面元素对应的所述渲染对象集合通过以下步骤获得:获取待处理页面的数据;从所述待处理页面的数据之中提取多个页面元素;分别获得每个所述页面元素的内容和多个属性;根据每个所述页面元素的内容和多个属性生成每个所述页面元素对应的渲染对象集合。
根据本公开的一个实施例,所述根据每个所述页面元素的内容和多个属性生成每个所述页面元素对应的渲染对象集合,包括:根据所述页面元素的内容生成内容渲染对象,并将所述内容渲染对象添加至所述渲染对象集合;根据所述页面元素的多个属性生成所述页面元素的多个属性渲染对象,并将所述页面元素的多个属性渲染对象添加至所述渲染对象集合。
根据本公开的一个实施例,渲染方法,还包括:根据所述多个页面元素对应的多个所述渲染对象集合生成渲染树;根据所述渲染树进行渲染。
根据本公开的一个实施例,所述根据所述多个页面元素对应的多个所述渲染对象集合生成渲染树,包括:获取所述多个属性和所述内容渲染对象分别对应的等级;根据所述多个属性对应的等级和所述内容渲染对象的等级,对所述页面元素对应的所述渲染对象集合之中的多个渲染对象进行排序;根据每个所述渲染对象集合之中排序后的多个渲染对象,生成每个所述渲染对象集合所对应的渲染对象子树;以及根据所述多个渲染对象集合分别所对应的多个渲染对象子树生成所述渲染树。
根据本公开的一个实施例,所述根据所述多个渲染对象集合分别所对应的多个渲染对象子树生成所述渲染树,包括:获取每个所述页面元素的层级;根据每个所述页面元素的层级生成每个所述页面元素所对应的渲染对象子树的层级;将所述多个渲染对象子树按照所述每个渲染对象子树对应的层级进行拼接,以生成所述渲染树。
根据本公开的一个实施例,所述预设状态为滚动状态、滑动状态、加载状态或者闪烁状态。
根据本公开的一个实施例,渲染方法,还包括:对多个所述页面元素分别对应的多个渲染对象集合进行并行渲染。
本公开第二方面实施例提出了一种渲染装置,包括:第一获取模块,用于获取当前视口之中页面元素的状态,其中,所述页面元素对应一个渲染对象集合,且所述渲染对象集合之中包括多个渲染对象;第一选择模块,用于如果所述页面元素的状态为预设状态,则从所述多个渲染对象之中选择部分渲染对象;第一生成模块,用于根据选择的部分渲染对象生成所述页面元素的预览视图,并显示在所述当前视口之中。
另外,根据本公开上述实施例的渲染装置还可以具有如下附加的技术特征。
根据本公开的一个实施例,渲染装置,还包括:第二生成模块,用于如果所述页面元素的状态不为预设状态,则根据所述渲染对象集合之中的多个渲染对象生成所述页面元素的正常视图,并显示在所述当前视口之中。
根据本公开的一个实施例,所述多个渲染对象包括内容渲染对象和多个属性渲染对象,所述多个属性渲染对象包括:显示效果处理渲染对象、操作处理渲染对象、动画处理渲染对象、布局渲染对象之中的多种。
根据本公开的一个实施例,所述第一选择模块,包括:第一确定单元,用于将所述布局渲染对象作为选择的部分渲染对象。
根据本公开的一个实施例,渲染装置,还包括:第二获取模块,用于获取待处理页面的数据;第一提取模块,用于从所述待处理页面的数据之中提取多个页面元素;第三获取模块,用于分别获得每个所述页面元素的内容和多个属性;第二生成模块,用于根据每个所述页面元素的内容和多个属性生成每个所述页面元素对应的渲染对象集合。
根据本公开的一个实施例,所述第二生成模块,包括:第一生成单元,用于根据所述页面元素的内容生成内容渲染对象,并将所述内容渲染对象添加至所述渲染对象集合;第二生成单元,用于根据所述页面元素的多个属性生成所述页面元素的多个属性渲染对象,并将所述页面元素的多个属性渲染对象添加至所述渲染对象集合。
根据本公开的一个实施例,渲染装置,还包括:第三生成模块,用于根据所述多个页面元素对应的多个所述渲染对象集合生成渲染树;第一渲染模块,用于根据所述渲染树进行渲染。
根据本公开的一个实施例,所述第三生成模块,包括:第一获取单元,用于获取所述多个属性和所述内容渲染对象分别对应的等级;第一排序单元,用于根据所述多个属性对应的等级和所述内容渲染对象的等级,对所述页面元素对应的所述渲染对象集合之中的多个渲染对象进行排序;第三生成单元,用于根据每个所述渲染对象集合之中排序后的多个渲染对象,生成每个所述渲染对象集合所对应的渲染对象子树;以及第四生成单元,用于根据所述多个渲染对象集合分别所对应的多个渲染对象子树生成所述渲染树。
根据本公开的一个实施例,所述第四生成单元,具体用于:获取每个所述页面元素的层级;根据每个所述页面元素的层级生成每个所述页面元素所对应的渲染对象子树的层级;将所述多个渲染对象子树按照所述每个渲染对象子树对应的层级进行拼接,以生成所述渲染树。
根据本公开的一个实施例,所述预设状态为滚动状态、滑动状态、加载状态或者闪烁状态。
根据本公开的一个实施例,还包括:第二渲染模块,用于对多个所述页面元素分别对应的多个渲染对象集合进行并行渲染。
本公开第三方面实施例提出了一种电子设备,包括:处理器;用于存储所述处理器的可执行指令的存储器;其中,所述处理器被配置为调用并执行所述存储器存储的可执行指令,以实现本公开第一方面实施例提出的渲染方法。
本公开第四方面实施例提出了一种非临时性计算机可读存储介质,当所述存储介质中的指令由电子设备的处理器执行时,使得电子设备能够执行本公开第一方面实施例提出的渲染方法。
本公开第五方面实施例提出了一种计算机程序产品,该计算机程序由电子设备的处理器执行时,使得电子设备能够执行本公开第一方面实施例提出的渲染方法。
本公开实施例的技术方案,在页面元素的状态为预设状态时,从页面元素对应的多个渲染对象之中选择部分渲染对象,以根据部分渲染对象将页面元素进行显示,有利于在降低流量消耗的基础上,提高页面元素的显示的靠性,改善用户的观看效果。例如,根据本公开实施例,可以在页面元素的状态为滑动状态时,无需将页面元素以占位图的方式显示,而是基于该页面元素的部分渲染对象进行页面元素的显示,在降低流量消耗的基础上,可以提高页面元素的显示的可靠性,改善用户的观看效果。
本公开附加的方面和优点将在下面的描述中部分给出,部分将从下面的描述中变得明显,或通过本公开的实践了解到。
附图说明
图1是根据本公开实施例的渲染方法的流程图。
图2是根据本公开一个实施例的生成页面元素对应的渲染对象集合的流程图。
图3是根据本公开一个示例的生成渲染对象集合的流程图。
图4是根据本公开一个示例的多个页面元素与渲染对象的对应关系图。
图5是根据本公开一个实施例的对页面元素进行渲染的流程图。
图6是根据本公开一个实施例的根据属性和内容渲染对象对应的等级生成渲染树的流程图。
图7是根据本公开一个示例的渲染树的示意图。
图8是根据本公开一个示例的根据多个渲染对象子树生成渲染树的流程图。
图9是根据本公开实施例的渲染装置的结构示意图。
图10是根据本公开实施例的电子设备的结构示意图。
具体实施方式
下面详细描述本公开的实施例,所述实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,旨在用于解释本公开,而不能理解为对本公开的限制。
下面参考附图描述本公开实施例的渲染方法、装置、电子设备及存储介质。
图1是根据本公开实施例的渲染方法的流程图,执行主体可以为电子设备,具体的,电子设备可以是但不限于计算机、移动终端,移动终端可以是但不限于个人电脑、智能手机、IPAD等。
如图1所示,该渲染方法包括以下步骤S101至S103。
S101,获取当前视口之中页面元素的状态,其中,页面元素对应一个渲染对象集合,且渲染对象集合之中包括多个渲染对象。
其中,视口可以理解为浏览器显示页面元素的屏幕区域,视口可包括布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。
本公开实施例中的页面元素,可以是组成页面的基本元素,例如文字、图像、表格、超链接等等。其中,页面,可以是指互联网产品中的页面,例如网页页面、应用程序页面等等,相应的,本公开实施例中的渲染方法的执行主体,为搭载该互联网产品的电子设备。
页面元素的状态,可以包括静止状态和运动状态(处于移动状态),运动状态可以包括滑动或者滚动(左右滚动、上下滚动)状态。
实际应用中,用户可以通过相关操作(比如触屏操作、滚动操作等)对页面进行触发控制,例如,用户可通过滚动操作触发页面滚动,页面的滚动操作例如可以是:鼠标左键单击并拖拽滚动条的操作,或者,可以是滚动鼠标的操作,或者、还可以是在触摸屏中执行的滑动操作等,本公开实施例对此不做限定。视口中的页面元素可根据用户的操作处于某一状态,电子设备可对视口或者页面元素的状态进行实时监控,以在监控到视口或者页面元素的状态发生变化时,获取当前视口之中页面元素的状态。
本公开实施例中,无需为每个页面元素创建一个全功能的渲染对象,而是为一个页面元素创建一个包括多个渲染对象的渲染对象集合,通过渲染对象集合实现对页面元素的渲染,因此,提高了页面元素的渲染对象的创建速度,对页面元素的渲染,可以根据页面元素对应的多个渲染对象同时进行渲染,从而提高了页面元素的渲染速度,减少掉帧的可能性。
S102,如果页面元素的状态为预设状态,则从多个渲染对象之中选择部分渲染对象。
本公开实施例中,预设状态,可以理解为引起页面元素来不及清晰显示的任何状态,例如,滑动或者滚动(上下滚动或者左右滚动)状态、加载状态、闪烁状态等等。
具体地,在获取到页面元素的状态后,(获取到页面元素的同时可获取到页面元素对应的渲染对象集合),可判断页面元素的状态是否为预设状态,如果是,则从该页面元素的n(n>1)个渲染对象之中选择部分渲染对象,部分渲染对象的数量可以是m个(1≤m<n)。
S103,根据选择的部分渲染对象生成页面元素的预览视图,并显示在当前视口之中。
本公开实施例中,可将不完整(不是清楚可见的)的页面元素所在的视图称为预览视图,相对应的,与预览视图对应的正常视图,则清楚、完整的显示页面元素。
具体地,在获取到部分渲染对象之后,可将部分渲染对象集合起来生成页面元素的预览视图,并显示在当前视口之中。由于在基于页面元素对应的所有渲染对象显示页面元素时,页面元素才可以完全清楚可见的显示,同时需要较长的加载时间和较高的流量消耗,而此处部分渲染对象集合起来生成页面元素的预览视图(该预览视图可以理解为缩略图),即并不是根据所有渲染对象进行页面元素的显示,因此在减少了加载时间和流量消耗的基础上,保证了页面元素的部分显示,使得页面元素的状态处于预设状态时,用户可以观看到页面元素的部分渲染对象,提高了观看效果。
需要说明的是,预览视图的显清晰度可以和部分渲染对象的数量有关,即部分渲染对象的数量越少,预览视图的显示清晰度越低;反之,部分渲染对象的数量越多,预览视图的显示清晰度越高。
举例而言,如果页面元素:文本框的状态为快速移动状态,且文本框对应的多个渲染对象为背景渲染对象、字体渲染对象、下划线渲染对象及动画渲染对象,那么,可选择其中的背景渲染对象和字体渲染对象,进而根据背景渲染对象和字体渲染对象生成携带背景渲对象和字体渲染对象的缩略图,将该缩略图显示在当前视口中,以使用户观看到背景部分和字体部分。
由此,在页面元素的状态为预设状态时,从页面元素对应的多个渲染对象之中选择部分渲染对象,以根据部分渲染对象将页面元素进行显示,有利于在降低流量消耗的基础上,提高页面元素的显示的可靠性,改善用户的观看效果。
需要说明的是,本公开实施例中,还可进一步地根据预设状态的相关特征,例如速度特征(快慢特征)、持续时间特征等,判断是否需要显示预览视图。例如,在页面元素的状态为预设状态和/或预设状态的持续时间较长或者变化速度较快时,可获取页面元素的部分渲染对象,之后,可将部分渲染对象集合起来生成页面元素的预览视图,并显示在当前视口之中。
如前所述,本公开实施例在页面元素处于预设状态时,通过预览视图实现页面元素的初步显示;而在页面元素不处于预设状态时,则无需通过预览视图实现页面元素的初步显示,而是直接显示清楚、完整的页面元素,即显示页面元素的正常视图。
即在本公开的一个实施例中,渲染方法,还可包括:如果页面元素的状态不为预设状态,则根据渲染对象集合之中的多个渲染对象生成页面元素的正常视图,并显示在当前视口之中。
具体地,在获取到页面元素和页面元素对应的一个渲染对象集合之后,根据渲染对象集合之中的多个(n个)渲染对象生成页面元素的正常视图,并显示在当前视口之中。
举例而言,如果页面元素:文本框的状态为静止状态(即不是移动状态),且页面元素对应的多个渲染对象为背景渲染对象、字体渲染对象、下划线渲染对象及动画渲染对象,那么,可根据背景渲染对象、字体渲染对象、下划线渲染对象及动画渲染对象生成文本框的正常视图,将该正常图显示在当前视口中,以使用户观看到清楚、完整的文本框。
相较于根据页面元素的一个全功能的渲染对象实现页面元素的显示,本公开实施例,根据页面元素的多个渲染对象实现页面元素的显示,可以避免因渲染速度缓慢带来的显示或者加载速度缓慢的现象,改善了用户观看体验。
需要说明的是,就页面元素的渲染而言,本公开实施例,为了解决一个全功能的渲染对象过于繁重带来的渲染速度缓慢的问题,针对每个页面元素创建一个包含多个渲染对象的渲染对象集合。其中,多个渲染对象的创建依据(方式)可以是页面元素的内容、页面元素的属性、页面元素的生成时间等任何与页面元素相关联的特征,本公开实施例对此并不限定。但是为了便于清楚说明,本公开实施例通过下列一个实施例进行描述。
在本公开的一个实施例中,多个渲染对象包括内容渲染对象和多个属性渲染对象,多个属性渲染对象包括:显示效果处理渲染对象、操作处理渲染对象、动画处理渲染对象、布局渲染对象之中的多种。
其中,属性可以是页面元素的基本属性,可包括:显示效果属性、操作处理属性、动画处理属性及布局渲染属性等。
具体地,可根据页面元素的内容生成内容渲染对象,可根据页面元素的每个属性生成一个属性渲染对象,该属性渲染对象可以是显示效果处理渲染对象、操作处理渲染对象、动画处理渲染对象或者布局渲染对象。其中,显示效果处理渲染对象可用于进行页面元素的显示效果的渲染,例如,将显示效果渲染为火焰显示;操作处理渲染对象可用于进行页面元素的操作处理的渲染,动画处理渲染对象可用于进行页面元素的动画渲染,布局渲染对象可用于进行页面元素的布局方式渲染,例如将布局方式渲染为网格布局或者起泡布局。
具体而言,如果页面元素的状态为预设状态,那么在页面元素对应的内容渲染对象和多个属性渲染对象中选择部分渲染对象,以根据部分渲染对象生成页面元素的预览视图,并显示在当前视口之中。
例如,在页面元素:图片的状态为预设状态,比如加载状态、且图片对应的渲染对象为:内容渲染对象、显示效果处理渲染对象、操作处理渲染对象及布局渲染对象时,可基于显示效果渲染对象和布局渲染对象生成图片的缩略图,并显示在当前视口之中。
再例如,如果图片的部分渲染对象是显示效果渲染对象:火焰效果,则生成具有火焰效果的缩略图,并将其进行显示。
在本公开的一个示例中,上述步骤S102中的,从多个渲染对象之中选择部分渲染对象,可包括:将布局渲染对象作为选择的部分属性渲染对象。
具体而言,在获取到页面元素的状态后,(获取到页面元素即可获取到页面元素对应的渲染对象集合),如果页面元素的状态为预设状态,则从该页面元素的n(n>1)个渲染对象之中选择布局渲染对象作为部分属性渲染对象之后,根据该部分属性渲染对象生成页面元素的预览视图,并显示在当前视口之中。
需要说明的是,布局渲染对象可根据在页面中布局的方位,包括垂直布局渲染对象和水平布局渲染对象。实际应用中,可选择垂直布局渲染对象和/或水平布局渲染对象作为部分属性渲染对象。
例如,如果页面元素图片的内容为鸟儿的画像,对应的多个属性渲染对象为:内容渲染对象:鸟儿、显示效果渲染对象:飞翔效果、及布局渲染对象:水平弹窗布局,那么,可将经具有水平弹窗布局对象的图片显示在当前视口中。
由此,在页面元素的状态为预设状态时,采用布局渲染对象实现页面元素的初步显示,进一步降低了流量的消耗,且改善了用户的观看效果。
下面描述页面元素的多个渲染对象是如何生成的。
在本公开的一个实施例中,如图2所示,页面元素对应的渲染对象集合通过以下步骤(步骤S201至步骤S204)获得。
S201,获取待处理页面的数据。
本公开实施例,可将需要渲染的页面称为待处理页面,该页面可以是浏览网站的浏览页面,也可以是用户正在处理、已经处理的文本页面或者终端上的应用程序页面等等,对于页面的类型不做限制。
具体地,在需要对待处理页面进行渲染时,可发送渲染请求,以使电子设备根据渲染请求获取待处理页面的数据,例如文本数据、图片数据、表格数据、视频数据等。其中,渲染请求可以是用户通过遥控器、按钮、鼠标、触摸等操作方式发送的,也可以是电子设备根据用户的需求自动发送的,即监控到用户对页面有渲染需求时发送渲染请求。
需要说明的是,待处理页面的数据可以是至少一种,例如,可以仅仅是文本数据,也可以是文本数据和图片数据,还可以是文本数据、图片数据及视频数据,对于具体的数据类型,本公开实施例不做限制。
S202,从待处理页面的数据之中提取多个页面元素。
具体地,在获取到待处理页面的数据之后,可将数据进行解析处理,以从数据中提取出多个页面元素。例如,如果页面的数据为文本数据及图像数据,那么可从表格数据中提取出多个文字或者文本,可从图像数据中提取出多个文字或者图片,从而获取到待处理页面的多个页面元素。
S203,分别获得每个页面元素的内容和多个属性。
其中,页面元素的内容可以是指页面元素所包含的视觉上能看到的内容,可以是文字中包含的内容,例如“五颜六色的花朵开满了整个花园”,也可以是图像中包含的内容,例如图像中的动物、树木、花朵等。
其中,页面元素的属性可包括但不限于效果属性、背景属性、颜色属性等,不同的页面元素可包括不同的属性,例如,当页面元素为文本时,可包括字体大小、颜色、背景色、下划线等属性。
本公开实施例,可预先设置包括页面元素和对应的多个属性的属性库或者属性表,也即该属性库或者属性表可包含任何页面元素及对应的多个属性。
具体地,在获取到多个页面元素之后,可通过自然语言处理技术确定出页面元素的内容,同时,可通过查询预先设置的属性库或者属性表,得到页面元素对应的多个属性。
需要说明的是,该步骤S203中获取页面元素的内容和属性的方式还可以是相关技术中的其他方式,只要可以实现步骤S203即可,本公开实施例对此不做具体限制。
S204,根据每个页面元素的内容和多个属性生成每个页面元素对应的渲染对象集合。
本公开实施例中,一个页面元素的每个属性对应一个渲染对象,例如一个文本属性、一个按钮属性或一个列表属性。进而一个页面的多个属性对应相应的多个渲染对象(组成渲染对象集合),多个页面元素对应多个渲染对象集合。
需要说明的是,对页面元素渲染最终的目的是使页面元素对应的内容以渲染效果的方式显示于页面,例如,将页面中的内容(图片)以“飞入”的方式显示于页面,因而渲染需要结合页面元素具体的内容,基于此,本公开实施例可将页面元素的内容和页面元素对应的多个属性结合起来,生成多个属性对应的多个渲染对象,该多个渲染对象组成一个页面元素的渲染对象集合。
进一步地,如图3所示,上述步骤S204,可包括以下步骤S301和S302。
S301,根据页面元素的内容生成内容渲染对象,并将内容渲染对象添加至渲染对象集合。
S302,根据页面元素的多个属性生成页面元素的多个属性渲染对象,并将页面元素的多个属性渲染对象添加至渲染对象集合。
本公开实施例中,多个属性渲染对象包括:显示效果处理渲染对象、操作处理渲染对象、动画处理渲染对象、布局渲染对象之中的多种。
具体地,本公开实施例,可预先设置空的渲染对象集合,在获取到页面元素的内容和多个属性之后,根据每个页面元素的内容生成一个内容渲染对象,并将内容渲染对象添加至渲染对象集合,还可根据每个页面元素的每个属性生成一个属性渲染对象,从而生成页面元素的多个属性渲染对象,并将页面元素的多个属性渲染对象添加至渲染对象集合,从而得到渲染对象集合。
举例而言,如图4所示,如果3个页面元素Y1、Y2、Y3,其内容分别为N1、N2、N3,其中Y1对应5个属性、Y2对应4个属性、Y3对应3个属性,那么,可对应内容N1生成一个内容渲染对象d1、可对应内容N2生成一个内容渲染对象d2、可对应内容N3生成一个内容渲染对象d3,对应12个属性分别生成属性渲染对象s1、s2、s3、s4、s5、s6、s7、s8、s9、s10、s11及s12,将内容渲染对象及属性渲染对象均添加至渲染对象集合,从而形成渲染对象集合{d1,d2,d3,s1,s2,s3,s4,s5,s6,s7,s8,s9,s10,s11,s12}。
由此,分别对应页面元素的内容和属性进行渲染对象的生成,不仅提高了渲染对象的创建速度,而且保证了覆盖所有可能的渲染效果,丰富了渲染对象。
本公开实施例,在生成渲染对象集合之后,可根据多个渲染对象对页面元素进行渲染,即在本公开的一个实施例中,如图5所示,渲染方法还可包括步骤S505及步骤S506。
S505,根据多个页面元素对应的多个渲染对象集合生成渲染树。
在上述步骤S204之后,即在生成每个页面元素对应的渲染对象集合之后,可根据多个渲染对象集合包括的多个渲染对象生成渲染树。
S506,根据渲染树进行渲染。
举例而言,如果待处理页面包含3个页面元素Y1、Y2、Y3,其中Y1对应5个属性(图2中的属性1表示第一个属性)、Y2对应4个属性、Y3对应3个属性,那么,可对应Y1 生成包括5个渲染对象的渲染集合J1(图2中的渲染对象1表示第一个渲染对象)、对应Y2生成包括4个渲染对象的渲染集合J2、对应Y3生成包括3个渲染对象的渲染集合J3,进而3个页面元素Y1、Y2、Y3分别对应3个渲染对象集合J1、J2、J3(该3个渲染对象集合包括12个渲染对象)。之后,根据3个渲染对象集合J1、J2、J3包含的12个渲染对象生成渲染树,进而根据渲染树对该12个渲染对象进行渲染,以实现对页面元素的渲染。
也就是说,对每一个页面元素建立多个渲染对象,相较于建立一个全能力的渲染对象,提高了页面元素的渲染对象的创建速度,对页面元素的渲染,可以根据页面元素对应的多个渲染对象同时进行渲染,从而提高了页面元素的渲染速度,减少掉帧的可能性。
本公开实施例的渲染方法,无需为每个页面元素创建一个全功能的渲染对象,只需要根据该页面元素的多个属性创建相应的多个渲染对象。在该实施例之中,每个渲染对象可处理一种属性,因此该页面元素具有多少属性,对应创建多少渲染对象即可,因此可以显著地提高渲染对象的创建速度,进而提高页面的渲染速度,减少掉帧的可能性。
在执行完上述步骤S301和S302后,即可执行上述步骤S505。本公开实施例中,上述步骤S505中渲染树的生成,可以根据页面元素的属性等级和/或内容等级生成,也可以根据页面元素的层级生成。对此,通过下列实施例进行描述。
在本公开的一个实施例中,如图6所示,上述步骤S505,可包括以下步骤S601至S604。
S601,获取多个属性和内容渲染对象分别对应的等级。
本公开实施例中,每个页面元素的多个属性分别对应一个等级,属性对应的等级可以用来表征属性的重要程度,该重要程度可对应属性的渲染顺序。每个页面元素对应的内容渲染对象对应一个等级,内容渲染对象对应的等级可以用来表征页面元素的渲染顺序。
具体地,可预先设置包含任何属性及对应等级的属性等级库或者属性等级表,以在获取到每个页面元素对应的多个属性之后,可通过查询属性等级库或者属性等级表,得到多个属性对应的等级;还可预先设置包含任何内容渲染对象及对应的等级的内容等级库,以在获取到多个页面元素对应的多个内容渲染对象之后,可通过查询内容等级库得到多个内容渲染对象分别对应的等级。
除此之外,多个属性和内容渲染对象分别对应的等级,还可以是根据用户实际需求设置的。即在确定出多个属性和内容渲染对象之后,根据用户的需求设置多个属性的等级、及多个内容渲染对象的等级。
S602,根据多个属性对应的等级和内容渲染对象的等级,对页面元素对应的渲染对象集合之中的多个渲染对象进行排序。
具体地,可先根据多个内容渲染对象的等级,对渲染对象集合之中的多个内容渲染对象进行排序,然后根据每个页面元素对应的多个属性对应的等级,对每个渲染对象集合之中的多个属性内容渲染对象进行排序。排序时,可以进行顺序排序,等级越高,渲染顺序越靠前,从而排序越靠前;反之,等级越低,渲染顺序越靠后,从而排序越靠后。
S603,根据每个渲染对象集合之中排序后的多个渲染对象,生成每个渲染对象集合所对应的渲染对象子树。
对每个页面元素对应的渲染对象集合之中的多个渲染对象进行排序之后,即可得到排序后的多个渲染对象,根据每个渲染对象集合之中排序后的多个渲染对象,生成每个渲染对象集合所对应的渲染对象子树,从而生成多个渲染对象子树。
S604,根据多个渲染对象集合分别所对应的多个渲染对象子树生成渲染树。
举例而言,如果页面对应2个内容渲染对象A1、A2、且2个页面元素均对应3个属性b1、b2、b3,分别对应的属性渲染对象为B1、B2、B3,A1、A2的等级为A1高于A2,b1、b2、b3对应的等级从高到低依次为b2→b1→b3,那么,可按照渲染的先后顺序将多个渲染对象进行顺序排序,进而根据排序后的多个渲染对象生成如图7所示的渲染树,以根据渲染树对页面进行渲染。
在本公开的一个示例中,如图8所示,上述步骤S604,可包括以下步骤S801至S803。
S801,获取每个页面元素的层级。
本公开实施例,可将每个页面元素进行分层处理,即每个页面元素包括多个层级,例如页面元素文本从上到下的层次依次是:背景色、情景色、触摸操作事件处理层、透明度处理层、按压效果层、阴影层、页面布局层(padding(内边距)、margin(外边距)及border(边框))。
在获取到页面元素之后,可判断对应的属性位于页面的哪一个层级中。
可以理解的是,上述页面的分层实施例仅为示例,不构成对本公开的限制,实际上在实现时,可以根据需要对页面元素进行任意形式的层级划分,在此不再赘述。
S802,根据每个页面元素的层级生成每个页面元素所对应的渲染对象子树的层级。
可将每个页面元素的层级确定为该页面元素所对应的渲染对象子树的层级。从而得到多个渲染对象子树分别对应的层级。
S803,将多个渲染对象子树按照每个渲染对象子树对应的层级进行拼接,以生成渲染树。在进行拼接时,可按照从下到上的层级顺序进行拼接。
例如,如果页面元素W1的属性层级从高到低依次为:c1(比如透明度层)、c2(比如按压效果层)、c3(比如阴影层)、c4(比如布局层),且按照先后顺序将c1对应的渲染对象子树、c2对应的渲染对象子树、c3对应的渲染对象子树、c4对应的渲染对象子树进行依次拼接,拼接完成后,即得到渲染树。
再例如,如果页面元素W1、W2、W3的层级分别为第一层、第二层、第三层,那么可确定W1对应的渲染对象子树U1的层级为第一层、W2对应的渲染对象子树U2的层级为第二层、W3对应的渲染对象子树U3的层级为第三层,进而将U1、U2、U3根据第一、第二、第三的层级进行拼接,即依次拼接U1 、U2、U3,拼接完成后,即得到渲染树。
由此,根据属性等级和内容渲染对象的渲染对象子树,基于多个页面元素的层级根据渲染对象子树实现渲染树的生成,提高了渲染树的可靠性,从而保证了渲染的可靠性。
为了更加清楚的说明,下面以预设状态为滚动状态、滑动状态、加载状态或者闪烁状态进对本公开实施例进行详细描述:即在本公开的一个实施例中,预设状态为滚动状态、滑动状态、加载状态或者闪烁状态。
相关技术之中,在页面的滑动过程之中,不停的有新的渲染对象进入到当前视口,如果页面一直处于滑动状态,页面元素则以占位图的方式进行添加,因此就会导致页面元素的显示可靠性较低、用户观感较差,影响用户观看效果。
而在本公开实施例中,在监控到页面元素的状态为滚动(上下滚动或者左右滚动)状态、滑动状态、加载状态或者闪烁状态时,页面元素不是以占位图的方式进行初步显示,而是以具备部分渲染对象的预览视图初步显示。
具体而言,对页面元素的状态进行实时监控,在页面元素处于几乎静止不动的状态时,可根据该页面元素的多个(n个)渲染对象生成页面元素的正常视图,并将该正常视图显示在当前视口中;在页面元素开始滚动或者处于滚动状态、滑动状态、加载状态或者闪烁状态时,从该页面元素的n(n>1)个渲染对象之中选择部分渲染对象,部分渲染对象的数量可以是m个(1≤m<n)之后,可将m个渲染对象集合起来生成页面元素的预览视图,并显示在当前视口之中。继续监控页面元素的状态,在页面元素停止滚动、滑动,加载或者闪烁时,根据该页面元素的多个(n个)渲染对象生成页面元素的正常视图,并将该正常视图显示在当前视口中。
举例而言,如果页面元素:图片的状态为滚动状态、滑动状态、加载状态或者闪烁状态,且该图片对应的多个渲染对象为背景渲染对象、字体渲染对象、下划线渲染对象及动画渲染对象,那么,可选择其中的背景渲染对象和字体渲染对象,进而根据背景渲染对象和字体渲染对象生成携带背景渲对象和字体渲染对象的缩略图,将该缩略图显示在当前视口中,以使用户初步观看到背景部分和字体部分;在图片停止滚动、滑动,加载或者闪烁时,根据背景渲染对象、字体渲染对象、下划线渲染对象及动画渲染对象生成图片的正常视图,以进一步实现图片清楚、完整的显示。
需说明的是,本公开实施例中,在页面元素处于滚动状态时,还可进一步的确定页面元素的滚动速度或者连续滚动时间,当滚动速度较大或者连续滚动时间较长时,可从该页面元素的n(n>1)个渲染对象之中选择部分渲染对象,部分渲染对象的数量可以是m个(1≤m<n)之后,可将m个渲染对象集合起来生成页面元素的预览视图,并显示在当前视口之中。在页面元素的滚动速度较小(几乎没有滚动)或者滚动时间较短时,根据该页面元素的多个(n个)渲染对象生成页面元素的正常视图,并将该正常视图显示在当前视口中。
在加载页面的图片(例如网络图片)时,一般情况下从开始加载到加载成功往往需要等待一段时间,在这一段时间里,根据本公开实施例的渲染方法,可以通过图片的部分渲染对象实现图片的缩略图显示,直至加载在成功时,才进行图片的完整、清楚的正常显示。也就是说,在图片的滚动过程中,只加载出快捷、粗略的样式渲染,只要停止滚动,才加载出全部样式,进行正常显示。
由此,针对页面元素的状态实现页面元素的样式渲染显示,既可以减少流量消耗,又可以在一定程度上提高用户的个观看效果,提高用户体验。
需要说明的是,相关技术中,由于页面元素的渲染是串行的,因此会导致页面的渲染更加缓慢,从而导致掉帧的可能性增加,而且,容易导致卡顿。而本公开实施例中,对每一个页面元素建立多个渲染对象,该多个渲染对象构成一个渲染对象集合,即多个页面元素分别对应多个渲染对象集合,从而在进行渲染时,可对页面对应的多个渲染对象集合进行并行渲染,以加快渲染速度,减少掉帧的可能性,并减少或者避免卡顿现象。即在本公开的一个实施例中,渲染方法,还可包括:对多个页面元素分别对应的多个渲染对象集合进行并行渲染。其中,每个页面元素对应一个渲染对象集合。
具体地,在根据每个页面元素的内容和多个属性生成每个页面元素对应的渲染对象集合之后,可对多个页面元素分别对应的多个渲染对象集合进行并行渲染,以实现对页面的多个页面元素的并行渲染,相较于相关技术中串行渲染的方式,加快了渲染速度,减少了掉帧的可能性,并减少或者避免了卡顿现象。
例如,如果待处理页面包含3个页面元素Y1、Y2、Y3,其中Y1对应5个属性、Y2对应4个属性、Y3对应3个属性,那么,可对应Y1 生成包括5个渲染对象的渲染集合J1、对应Y2生成包括4个渲染对象的渲染集合J2、对应Y3生成包括3个渲染对象的渲染集合J3,进而3个页面元素Y1、Y2、Y3分别对应3个渲染对象集合J1、J2、J3(该3个渲染对象集合包括12个渲染对象)。之后,根据3个渲染对象集合J1、J2、J3包含的12个渲染对象生成渲染树,进而可以对该12个渲染对象进行并行渲染,以实现对对页面元素Y1、Y2、Y3的并行渲染。
由此,通过并行渲染实现渲染,可以加快渲染速度,减少掉帧的可能性,并减少或者避免卡顿现象。
本公开实施例还提出了一种渲染装置,图9是根据本公开实施例的渲染装置的结构示意图。
如图9所示,该渲染装置100包括:第一获取模块110、第一选择模块120及第一生成模块130。
其中,第一获取模块110,用于获取当前视口之中页面元素的状态,其中,页面元素对应一个渲染对象集合,且渲染对象集合之中包括多个渲染对象;第一选择模块120,用于如果页面元素的状态为预设状态,则从多个渲染对象之中选择部分渲染对象;第一生成模块130,用于根据选择的部分渲染对象生成页面元素的预览视图,并显示在当前视口之中。
在一个实施例中,渲染装置100还可包括:第二生成模块,用于如果页面元素的状态不为预设状态,则根据渲染对象集合之中的多个渲染对象生成页面元素的正常视图,并显示在当前视口之中。
在一个实施例中,多个渲染对象包括内容渲染对象和多个属性渲染对象,多个属性渲染对象包括:显示效果处理渲染对象、操作处理渲染对象、动画处理渲染对象、布局渲染对象之中的多种。
在一个实施例中,第一选择模块120,可包括:第一确定单元,用于将布局渲染对象作为选择的部分渲染对象。
在一个实施例中,渲染装置100还可包括:第二获取模块,用于获取待处理页面的数据;第一提取模块,用于从待处理页面的数据之中提取多个页面元素;第三获取模块,用于分别获得每个页面元素的内容和多个属性;第二生成模块,用于根据每个页面元素的内容和多个属性生成每个页面元素对应的渲染对象集合。
在一个实施例中,第二生成模块,可包括:第一生成单元,用于根据页面元素的内容生成内容渲染对象,并将内容渲染对象添加至渲染对象集合;第二生成单元,用于根据页面元素的多个属性生成页面元素的多个属性渲染对象,并将页面元素的多个属性渲染对象添加至渲染对象集合。
在一个实施例中,渲染装置100还可包括:第三生成模块,用于根据多个页面元素对应的多个渲染对象集合生成渲染树;第一渲染模块,用于根据渲染树进行渲染。
在一个实施例中,第三生成模块,可包括:第一获取单元,用于获取多个属性和内容渲染对象分别对应的等级;第一排序单元,用于根据多个属性对应的等级和内容渲染对象的等级,对页面元素对应的渲染对象集合之中的多个渲染对象进行排序;第三生成单元,用于根据每个渲染对象集合之中排序后的多个渲染对象,生成每个渲染对象集合所对应的渲染对象子树;第四生成单元,用于根据多个渲染对象集合分别所对应的多个渲染对象子树生成渲染树。
在一个实施例中,第四生成单元,具体可用于:获取每个页面元素的层级;根据每个页面元素的层级生成每个页面元素所对应的渲染对象子树的层级;将多个渲染对象子树按照每个渲染对象子树对应的层级进行拼接,以生成渲染树。
在一个实施例中,预设状态为滚动状态、滑动状态、加载状态或者闪烁状态。
在一个实施例中,渲染装置100,还可包括:第二渲染模块,用于对多个页面元素分别对应的多个渲染对象集合进行并行渲染。
需要说明的是,该渲染装置的具体实施方式可参见上述渲染方法的具体实施方式,为避免冗余,此处不再详细赘述。
本公开实施例的渲染装置,在页面元素的状态为预设状态时,从页面元素对应的多个渲染对象之中选择部分渲染对象,以根据部分渲染对象将页面元素进行显示,有利于在降低流量消耗的基础上,提高页面元素的显示的靠性,改善用户的观看效果。
图10是根据本公开实施例的电子设备的结构框图。
如图10所示,该电子设备200包括:存储器210和处理器220,连接不同组件(包括存储器210和处理器220)的总线230。
其中,存储器210用于存储处理器220的可执行指令;处理器201被配置为调用并执行存储器202存储的可执行指令,以实现本公开上述实施例提出的渲染方法。
总线230表示几类总线结构中的一种或多种,包括存储器总线或者存储器控制器,外围总线,图形加速端口,处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说,这些体系结构包括但不限于工业标准体系结构(ISA)总线,微通道体系结构(MAC)总线,增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。
电子设备200典型地包括多种电子设备可读介质。这些介质可以是任何能够被电子设备200访问的可用介质,包括易失性和非易失性介质,可移动的和不可移动的介质。
存储器210还可以包括易失性存储器形式的计算机系统可读介质,例如随机存取存储器(RAM)240和/或高速缓存存储器250。电子设备200可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例,存储系统260可以用于读写不可移动的、非易失性磁介质(图10未显示,通常称为“硬盘驱动器”)。尽管图10中未示出,可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器,以及对可移动非易失性光盘(例如CD-ROM, DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下,每个驱动器可以通过一个或者多个数据介质接口与总线230相连。存储器210可以包括至少一个程序产品,该程序产品具有一组(例如至少一个)程序模块,这些程序模块被配置以执行本公开各实施例的功能。
具有一组(至少一个)程序模块270的程序/实用工具280,可以存储在例如存储器210中,这样的程序模块270包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据,这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块270通常执行本公开所描述的实施例中的功能和/或方法。
电子设备200也可以与一个或多个外部设备290(例如键盘、指向设备、显示器291等)通信,还可与一个或者多个使得用户能与该电子设备200交互的设备通信,和/或与使得该电子设备200能与一个或多个其它计算设备进行通信的任何设备(例如网卡,调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口292进行。并且,电子设备200还可以通过网络适配器293与一个或者多个网络(例如局域网(LAN),广域网(WAN)和/或公共网络,例如因特网)通信。如图所示,网络适配器293通过总线230与电子设备200的其它模块通信。应当明白,尽管图中未示出,可以结合电子设备200使用其它硬件和/或软件模块,包括但不限于:微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
处理器220通过运行存储在存储器210中的程序,从而执行各种功能应用以及数据处理。
需要说明的是,本公开实施例的电子设备的实施过程参见前述对本公开实施例的渲染方法的解释说明,此处不再赘述。
本公开实施例的电子设备,在页面元素的状态为预设状态时,从页面元素对应的多个渲染对象之中选择部分渲染对象,以根据部分渲染对象将页面元素进行显示,有利于在降低流量消耗的基础上,提高页面元素的显示的靠性,改善用户的观看效果。
为了实现上述实施例,本公开实施例还提出了一种非临时性计算机可读存储介质,该存储介质中的指令由电子设备的处理器执行时,使得电子设备能够执行如前所述的渲染方法。
为了实现上述实施例,本公开实施例还提供一种计算机程序产品,该计算机程序由电子设备的处理器执行时,使得电子设备能够执行如前所述的渲染方法。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。

Claims (24)

1.一种渲染方法,其特征在于,包括:
获取当前视口之中页面元素的状态,其中,所述页面元素对应一个渲染对象集合,且所述渲染对象集合之中包括多个渲染对象;
如果所述页面元素的状态为预设状态,则从所述多个渲染对象之中选择部分渲染对象;以及
根据选择的部分渲染对象生成所述页面元素的预览视图,并显示在所述当前视口之中。
2.如权利要求1所述的方法,其特征在于,还包括:
如果所述页面元素的状态不为预设状态,则根据所述渲染对象集合之中的多个渲染对象生成所述页面元素的正常视图,并显示在所述当前视口之中。
3.如权利要求1所述的方法,其特征在于,所述多个渲染对象包括内容渲染对象和多个属性渲染对象,所述多个属性渲染对象包括:显示效果处理渲染对象、操作处理渲染对象、动画处理渲染对象、布局渲染对象之中的多种。
4.如权利要求3所述的方法,其特征在于,所述从所述多个渲染对象之中选择部分渲染对象,包括:
将所述布局渲染对象作为选择的部分渲染对象。
5.如权利要求1所述的方法,其特征在于,所述页面元素对应的所述渲染对象集合通过以下步骤获得:
获取待处理页面的数据;
从所述待处理页面的数据之中提取多个页面元素;
分别获得每个所述页面元素的内容和多个属性;
根据每个所述页面元素的内容和多个属性生成每个所述页面元素对应的渲染对象集合。
6.如权利要求5所述的方法,其特征在于,所述根据每个所述页面元素的内容和多个属性生成每个所述页面元素对应的渲染对象集合,包括:
根据所述页面元素的内容生成内容渲染对象,并将所述内容渲染对象添加至所述渲染对象集合;
根据所述页面元素的多个属性生成所述页面元素的多个属性渲染对象,并将所述页面元素的多个属性渲染对象添加至所述渲染对象集合。
7.如权利要求6所述的方法,其特征在于,还包括:
根据所述多个页面元素对应的多个所述渲染对象集合生成渲染树;
根据所述渲染树进行渲染。
8.如权利要求7所述的方法,其特征在于,所述根据所述多个页面元素对应的多个所述渲染对象集合生成渲染树,包括:
获取所述多个属性和所述内容渲染对象分别对应的等级;
根据所述多个属性对应的等级和所述内容渲染对象的等级,对所述页面元素对应的所述渲染对象集合之中的多个渲染对象进行排序;
根据每个所述渲染对象集合之中排序后的多个渲染对象,生成每个所述渲染对象集合所对应的渲染对象子树;以及
根据多个所述渲染对象集合分别所对应的多个渲染对象子树生成所述渲染树。
9.如权利要求8所述的方法,其特征在于,所述根据所述多个渲染对象集合分别所对应的多个渲染对象子树生成所述渲染树,包括:
获取每个所述页面元素的层级;
根据每个所述页面元素的层级生成每个所述页面元素所对应的渲染对象子树的层级;
将所述多个渲染对象子树按照每个所述渲染对象子树对应的层级进行拼接,以生成所述渲染树。
10.如权利要求1所述的方法,其特征在于,所述预设状态为滚动状态、滑动状态、加载状态或者闪烁状态。
11.如权利要求1所述的方法,其特征在于,还包括:
对多个所述页面元素分别对应的多个渲染对象集合进行并行渲染。
12.一种渲染装置,其特征在于,包括:
第一获取模块,用于获取当前视口之中页面元素的状态,其中,所述页面元素对应一个渲染对象集合,且所述渲染对象集合之中包括多个渲染对象;
第一选择模块,用于如果所述页面元素的状态为预设状态,则从所述多个渲染对象之中选择部分渲染对象;
第一生成模块,用于根据选择的部分渲染对象生成所述页面元素的预览视图,并显示在所述当前视口之中。
13.如权利要求12所述的装置,其特征在于,还包括:
第二生成模块,用于如果所述页面元素的状态不为预设状态,则根据所述渲染对象集合之中的多个渲染对象生成所述页面元素的正常视图,并显示在所述当前视口之中。
14.如权利要求12所述的装置,其特征在于,所述多个渲染对象包括内容渲染对象和多个属性渲染对象,所述多个属性渲染对象包括:显示效果处理渲染对象、操作处理渲染对象、动画处理渲染对象、布局渲染对象之中的多种。
15.如权利要求14所述的装置,其特征在于,所述第一选择模块,包括:
第一确定单元,用于将所述布局渲染对象作为选择的部分渲染对象。
16.如权利要求12所述的装置,其特征在于,还包括:
第二获取模块,用于获取待处理页面的数据;
第一提取模块,用于从所述待处理页面的数据之中提取多个页面元素;
第三获取模块,用于分别获得每个所述页面元素的内容和多个属性;
第二生成模块,用于根据每个所述页面元素的内容和多个属性生成每个所述页面元素对应的渲染对象集合。
17.如权利要求16所述的装置,其特征在于,所述第二生成模块,包括:
第一生成单元,用于根据所述页面元素的内容生成内容渲染对象,并将所述内容渲染对象添加至所述渲染对象集合;
第二生成单元,用于根据所述页面元素的多个属性生成所述页面元素的多个属性渲染对象,并将所述页面元素的多个属性渲染对象添加至所述渲染对象集合。
18.如权利要求17所述的装置,其特征在于,还包括:
第三生成模块,用于根据所述多个页面元素对应的多个所述渲染对象集合生成渲染树;
第一渲染模块,用于根据所述渲染树进行渲染。
19.如权利要求18所述的装置,其特征在于,所述第三生成模块,包括:
第一获取单元,用于获取所述多个属性和所述内容渲染对象分别对应的等级;
第一排序单元,用于根据所述多个属性对应的等级和所述内容渲染对象的等级,对所述页面元素对应的所述渲染对象集合之中的多个渲染对象进行排序;
第三生成单元,用于根据每个所述渲染对象集合之中排序后的多个渲染对象,生成每个所述渲染对象集合所对应的渲染对象子树;以及
第四生成单元,用于根据多个所述渲染对象集合分别所对应的多个渲染对象子树生成所述渲染树。
20.如权利要求19所述的装置,其特征在于,所述第四生成单元,具体用于:
获取每个所述页面元素的层级;
根据每个所述页面元素的层级生成每个所述页面元素所对应的渲染对象子树的层级;
将所述多个渲染对象子树按照每个所述渲染对象子树对应的层级进行拼接,以生成所述渲染树。
21.如权利要求12所述的装置,其特征在于,所述预设状态为滚动状态、滑动状态、加载状态或者闪烁状态。
22.如权利要求12所述的装置,其特征在于,还包括:
第二渲染模块,用于对多个所述页面元素分别对应的多个渲染对象集合进行并行渲染。
23.一种电子设备,其特征在于,包括:
处理器;
用于存储所述处理器的可执行指令的存储器;
其中,所述处理器被配置为调用并执行所述存储器存储的可执行指令,以实现如权利要求1-11中任一项所述的渲染方法。
24.一种非临时性计算机可读存储介质,当所述存储介质中的指令由电子设备的处理器执行时,使得电子设备能够执行如权利要求1-11中任一项所述的渲染方法。
CN202110093209.7A 2021-01-25 2021-01-25 渲染方法、装置、电子设备及存储介质 Pending CN112417346A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110093209.7A CN112417346A (zh) 2021-01-25 2021-01-25 渲染方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110093209.7A CN112417346A (zh) 2021-01-25 2021-01-25 渲染方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
CN112417346A true CN112417346A (zh) 2021-02-26

Family

ID=74782585

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110093209.7A Pending CN112417346A (zh) 2021-01-25 2021-01-25 渲染方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN112417346A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115268720A (zh) * 2022-08-16 2022-11-01 北京尽微致广信息技术有限公司 一种页面渲染方法、装置、设备及可读存储介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104951317A (zh) * 2014-03-26 2015-09-30 北京奇虎科技有限公司 图片加载装置及方法
WO2015153677A1 (en) * 2014-03-31 2015-10-08 Open Garden Inc. System and method for improving webpage loading speeds
CN105786352A (zh) * 2014-12-26 2016-07-20 阿里巴巴集团控股有限公司 快速定位页面内容的方法、装置及移动终端
CN106293311A (zh) * 2015-05-26 2017-01-04 阿里巴巴集团控股有限公司 基于移动应用的页面显示方法、客户端、服务器及平台
CN107450911A (zh) * 2017-07-05 2017-12-08 口碑(上海)信息技术有限公司 动画元素的播放方法、装置以及电子设备
US9922007B1 (en) * 2014-05-22 2018-03-20 Amazon Technologies, Inc. Split browser architecture capable of determining whether to combine or split content layers based on the encoding of content within each layer
CN109388317A (zh) * 2018-09-30 2019-02-26 武汉斗鱼网络科技有限公司 一种图片加载方法、终端设备及存储介质
CN112100546A (zh) * 2020-09-11 2020-12-18 东软集团股份有限公司 表单的加载方法、装置、存储介质和电子设备

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104951317A (zh) * 2014-03-26 2015-09-30 北京奇虎科技有限公司 图片加载装置及方法
WO2015153677A1 (en) * 2014-03-31 2015-10-08 Open Garden Inc. System and method for improving webpage loading speeds
US9922007B1 (en) * 2014-05-22 2018-03-20 Amazon Technologies, Inc. Split browser architecture capable of determining whether to combine or split content layers based on the encoding of content within each layer
CN105786352A (zh) * 2014-12-26 2016-07-20 阿里巴巴集团控股有限公司 快速定位页面内容的方法、装置及移动终端
CN106293311A (zh) * 2015-05-26 2017-01-04 阿里巴巴集团控股有限公司 基于移动应用的页面显示方法、客户端、服务器及平台
CN107450911A (zh) * 2017-07-05 2017-12-08 口碑(上海)信息技术有限公司 动画元素的播放方法、装置以及电子设备
CN109388317A (zh) * 2018-09-30 2019-02-26 武汉斗鱼网络科技有限公司 一种图片加载方法、终端设备及存储介质
CN112100546A (zh) * 2020-09-11 2020-12-18 东软集团股份有限公司 表单的加载方法、装置、存储介质和电子设备

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115268720A (zh) * 2022-08-16 2022-11-01 北京尽微致广信息技术有限公司 一种页面渲染方法、装置、设备及可读存储介质

Similar Documents

Publication Publication Date Title
US10984177B2 (en) System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout
CN110096277B (zh) 一种动态页面展示方法、装置、电子设备及存储介质
KR101733943B1 (ko) 계층적-체계화된 컨트롤 갤러리 제공 기법
CN103092612B (zh) 实现安卓操作系统3d桌面贴图的方法及电子装置
US20040100509A1 (en) Web page partitioning, reformatting and navigation
CN110569096B (zh) 去代码化制作人机交互界面的系统、方法、介质及设备
CN111432264A (zh) 基于媒体信息流的内容展示方法、装置、设备及存储介质
CN105979392A (zh) 网页显示方法和浏览器
CN111596919A (zh) 图文绘制结果的展示方法、装置、计算机设备及存储介质
CN111985203A (zh) 文档处理方法、文档处理装置和电子设备
KR20100124708A (ko) 그래픽 정보를 표시하기 위한 방법, 모듈 및 장치
KR20160120128A (ko) 디스플레이장치 및 그 제어방법
CN103049430A (zh) 一种基于idf格式文件的页面显示方法
CN112417346A (zh) 渲染方法、装置、电子设备及存储介质
US8913076B1 (en) Method and apparatus to improve the usability of thumbnails
CN106407227A (zh) 一种动态网页显示方法和系统
CN112417345B (zh) 渲染方法、装置、电子设备及存储介质
CN109800039B (zh) 一种用户界面展示方法、装置、电子设备及存储介质
KR20100130186A (ko) 그래픽 디지털 문서의 동영상화 장치 및 방법
US8413062B1 (en) Method and system for accessing interface design elements via a wireframe mock-up
CN112417344B (zh) 渲染方法、装置、电子设备及存储介质
US9685140B1 (en) Optimized rendering of multimedia content
CN112700555A (zh) 高可配组态化3d数据可视化实现方法、电子设备、存储介质
Ito et al. Adaptable Web Presentation System with Layered Canvas Synchronization Mechanism for Scalability
CN103106079B (zh) 数字内容阅读器及其显示方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination