CN103678631B - 页面渲染方法及装置 - Google Patents

页面渲染方法及装置 Download PDF

Info

Publication number
CN103678631B
CN103678631B CN201310704331.9A CN201310704331A CN103678631B CN 103678631 B CN103678631 B CN 103678631B CN 201310704331 A CN201310704331 A CN 201310704331A CN 103678631 B CN103678631 B CN 103678631B
Authority
CN
China
Prior art keywords
layer
rendered
target
texture
page
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.)
Active
Application number
CN201310704331.9A
Other languages
English (en)
Other versions
CN103678631A (zh
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.)
Huawei Technologies Co Ltd
Original Assignee
Huawei Technologies 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 Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Priority to CN201310704331.9A priority Critical patent/CN103678631B/zh
Publication of CN103678631A publication Critical patent/CN103678631A/zh
Priority to EP14864980.9A priority patent/EP2924590A4/en
Priority to KR1020157017261A priority patent/KR20150091132A/ko
Priority to PCT/CN2014/083008 priority patent/WO2015090064A1/zh
Priority to US14/740,970 priority patent/US20150279058A1/en
Application granted granted Critical
Publication of CN103678631B publication Critical patent/CN103678631B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/001—Texturing; Colouring; Generation of texture or colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/80—2D [Two Dimensional] animation, e.g. using sprites

Abstract

本发明实施例提供一种页面渲染方法及装置。该方法包括：根据页面对应的源文件中包含的动画元素标识确定动画元素；将所述动画元素或所述动画元素及所述动画元素的子元素作为待渲染的目标图层，对该目标图层进行渲染得到与所述待渲染的目标图层对应的纹理；将所述待渲染的目标图层对应的所述纹理与包括所述源文件中其它元素的图层对应的纹理进行合成，并显示到所述页面上。通过本发明实施例提供的方法，将来可能发生变化的一个或多个元素可以预先被标识出来，然后作为特殊的图层，当该些元素发生变化时，可以将该特殊图层进行单独处理，避免影响其他图层，有效提升了渲染性能。

Description

页面渲染方法及装置
技术领域
本发明实施例涉及计算机技术领域，尤其涉及一种页面渲染方法及装置。
背景技术
浏览器是目前使用最广泛的软件之一，主要功能是将用户选择的网络资源通过网页的形式呈现出来，通常称这个过程为页面渲染。实现页面渲染的关键模块是浏览器中的渲染引擎，渲染引擎将网页中包含的各种元素分为若干图层进行渲染，每一个图层由一组具有相同显示需求的元素组成，最终将每一个图层的内容按照一定规则进行合成显示。但是目前的图层划分规则造成在某些动画场景下，动态变化的元素分布于多个图层，因此当这些元素发生变化时，整个或大部分页面都需要进行重新渲染，而重新渲染过程计算复杂，耗时较大，因此对页面的渲染性能造成很大的影响。
发明内容
本发明实施例提供一种页面渲染方法及装置，在一定程度上提高页面的渲染性能。
第一方面，本发明实施例提供一种页面渲染方法，包括：
根据所述页面对应的源文件中包含的动画元素标识确定动画元素，其中，所述动画元素标识用于指示所述动画元素；
将所述动画元素，或，所述动画元素及所述动画元素的子元素作为待渲染的目标图层，对所述待渲染的目标图层进行渲染，得到与所述待渲染的目标图层对应的纹理；
将所述待渲染的目标图层对应的所述纹理与包括所述源文件中其它元素的图层对应的纹理进行合成，并显示到所述页面上。
结合第一方面，在第一方面的第一种可能的实施方式中，所述方法还包括：
当隐藏所述待渲染的目标图层包含的任意一个元素时，判断所述元素是否为纹理隐藏标识指示的元素，若所述元素为纹理隐藏标识指示的元素，则将所述待渲染的目标图层对应的所述纹理进行隐藏；
当重新显示所述隐藏的所述元素时，将所述隐藏的所述纹理重新进行显示。
结合第一方面或第一方面的第一种可能的实施方式，在第一方面的第二种可能的实施方式中，当所述待渲染的目标图层中任意一个或多个待渲染的目标图层的内容发生变化时，还包括：
根据所述待渲染的目标图层对应的属性信息确定所述待渲染的目标图层中发生变化的一个或多个待渲染的目标图层；
对所述发生变化的一个或多个待渲染的目标图层进行重新渲染，生成与所述发生变化的待渲染的目标图层对应的新的纹理；其中，所述页面中的其它未发生变化的待渲染的目标图层对应的纹理保持原来的状态；
将所述发生变化的待渲染的目标图层对应的所述新的纹理、其它未发生变化的待渲染的目标图层对应的纹理以及包括所述源文件中其它元素的图层对应的纹理合成后显示到所述页面上。
结合第一方面或第一方面的第一种可能的实施方式，在第一方面的第三种可能的实施方式中，
当所述待渲染的目标图层中任意一个或多个待渲染的目标图层的位置信息或透明度信息发生变化时，还包括：
根据所述待渲染的目标图层的位置信息或透明度信息确定发生变化的一个或多个待渲染的目标图层；
更改所述一个或多个待渲染的目标图层对应的纹理的纹理属性；
将所述一个或多个待渲染的目标图层对应的更改纹理属性后的纹理，其它未发生变化的待渲染的目标图层对应的纹理以及包括所述源文件中其它元素的图层对应的纹理合成后显示到所述页面上。
结合第一方面、第一方面的第一种至第三种可能的实施方式中的任一种可能的实现方式，在第一方面的第四种可能的实施方式中，所述对所述待渲染的目标图层进行渲染，得到与所述待渲染的目标图层对应的纹理，包括：
对所述待渲染的目标图层中包含的一个或多个元素进行布局；
根据布局后的所述待渲染的目标图层中包含的元素的绘制信息生成所述待渲染的目标图层的绘制命令；
根据所述待渲染的目标图层的绘制命令绘制与所述待渲染的目标图层对应的图像；
将所述待渲染的目标图层对应的图像转换为与所述待渲染的目标图层对应的纹理。
第二方面，本发明实施例提供一种页面渲染装置，包括：
第一确定模块，用于根据所述页面对应的源文件中包含的动画元素标识确定动画元素，其中，所述动画元素标识用于指示所述动画元素；
渲染生成模块，用于将所述第一确定模块确定的所述动画元素，或，所述动画元素及所述动画元素的子元素作为待渲染的目标图层，对所述待渲染的目标图层进行渲染，得到与所述待渲染的目标图层对应的纹理；
合成显示模块，用于将所述渲染生成模块得到的所述待渲染的目标图层对应的所述纹理与包括所述源文件中其它元素的图层对应的纹理进行合成，并显示到所述页面上。
结合第二方面，在第二方面的第一种可能的实施方式中，所述页面渲染装置还包括：
纹理隐藏模块，用于当隐藏所述待渲染的目标图层包含的任意一个元素时，判断所述元素是否为纹理隐藏标识指示的元素，若所述元素为纹理隐藏标识指示的元素，则将所述待渲染的目标图层对应的所述纹理进行隐藏；
重新显示模块，用于当重新显示所述纹理隐藏模块所隐藏的所述元素时，将所述隐藏的所述纹理重新进行显示。
结合第二方面或第二方面的第一种可能的实施方式，在第二方面的第二种可能的实施方式中，所述页面渲染装置还包括：
第二确定模块，用于当所述待渲染的目标图层中任意一个或多个待渲染的目标图层的内容发生变化时，根据所述待渲染的目标图层对应的属性信息确定所述待渲染的目标图层中发生变化的一个或多个待渲染的目标图层；
所述渲染生成模块还用于对所述第二确定模块确定的所述发生变化的一个或多个待渲染的目标图层进行重新渲染，生成与所述发生变化的待渲染的目标图层对应的新的纹理；其中，所述页面中的其它未发生变化的待渲染的目标图层对应的纹理保持原来的状态；
所述合成显示模块还用于将所述发生变化的待渲染的目标图层对应的所述新的纹理、其它未发生变化的待渲染的目标图层对应的纹理以及包括所述源文件中其它元素的图层对应的纹理合成后显示到所述页面上。
结合第二方面或第二方面的第二种可能的实施方式，在第二方面的第三种可能的实施方式中，所述页面渲染装置还包括：
属性更改模块，用于当所述待渲染的目标图层中任意一个或多个待渲染的目标图层的位置信息或透明度信息发生变化时，根据所述待渲染的目标图层的位置信息或透明度信息确定发生变化的一个或多个待渲染的目标图层；更改所述一个或多个待渲染的目标图层对应的纹理的纹理属性；
所述合成显示模块还用于将所述一个或多个待渲染的目标图层对应的更改纹理属性后的纹理，其它未发生变化的待渲染的目标图层对应的纹理以及包括所述源文件中其它元素的图层对应的纹理合成后显示到所述页面上。
结合第二方面、第二方面的第一种至第二方面的第三种可能的实施方式中的任一种可能的实施方式，在第二方面的第四种可能的实施方式中，所述渲染生成模块具体用于：对所述待渲染的目标图层中包含的一个或多个元素进行布局；根据布局后的所述待渲染的目标图层中包含的元素的绘制信息生成所述待渲染的目标图层的绘制命令；根据所述待渲染的目标图层的绘制命令绘制与所述待渲染的目标图层对应的图像；将所述待渲染的目标图层对应的图像转换为与所述待渲染的目标图层对应的纹理。
可见，本发明实施例提供的页面渲染方法及装置，根据页面对应的源文件中包含的动画元素标识确定动画元素，并将确定的的动画元素或动画元素及该动画元素的子元素作为待渲染的目标图层；并对该待渲染的目标图层进行单独渲染（其他元素组成的图层的纹理可以保持不变），生成与该待渲染的目标图层对应的纹理；最后将所生成的待渲染的目标图层的纹理与其他元素组成的图层对应的纹理进行合成后显示至页面上。本发明实施例提供的方法，使得用户可以根据自己的需求指定将来可能发生变化的一个或多个元素作为动画元素，并将该动画元素或动画元素及该动画元素的子元素作为特殊的图层，当这些元素发生变化时，可以将该特殊图层进行单独处理，避免影响其他图层，有效地提升了页面的渲染性能。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对本发明实施例中所需要使用的附图做一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的一种页面渲染方法的流程示意图；
图2为对待渲染的目标图层进行渲染并生成纹理的具体流程示意图；
图3为本发明实施例提供的另一种页面渲染方法的流程示意图；
图4为本发明实施例提供的再一种页面渲染方法的流程示意图；
图5为本发明实施例提供的一种页面渲染装置的结构示意图；
图6为本发明实施例提供的另一种页面渲染装置的结构示意图；
图7为本发明实施例提供的再一种页面渲染装置的结构示意图；
图8为本发明实施例提供的再一种页面渲染装置的结构示意图；
图9为本发明实施例提供的再一种页面渲染装置的结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参阅图1，为本发明提供的页面渲染方法实施例一的流程示意图。该方法可以应用于渲染引擎，较佳的，可以应用于Webkit、Geoko、Presto、Blink等浏览器渲染引擎，当然也可以应用于其他类型的渲染引擎，对此本发明实施例不做限定。如图1所示，该方法可以包括：
S101：根据页面对应的源文件中包含的动画元素标识确定动画元素，其中，该动画元素标识用于指示所述动画元素。
具体的，在浏览器窗口中所显示的页面实际包括多个图层，每个图层都包括一个或多个元素，并且其中的一些元素还可以包括一个或多个子元素，每个元素上都有其对应的属性信息和绘制信息，这里的属性信息是元素在页面中的位置或颜色等信息，绘制信息是与该元素的绘制形状相关的信息。
这些元素及元素的各种信息在页面显示之前会保存在页面对应的源文件中，例如：超文本标记语言（Hyper Text Mark-up Language，以下简称HTML）文件就是一种典型的源文件。在源文件中通过增加动画元素标识将一个或多个源文件中的元素指示为动画元素，该动画元素为未来可能发生变化的元素，并且该动画元素可以包括相应的子元素，该子元素的个数大于等于0，动画元素是否具备子元素可以根据源文件的结构来判定。
S102：将上述动画元素，或，动画元素及该动画元素的子元素作为待渲染的目标图层，对该待渲染的目标图层进行渲染，得到与该待渲染的目标图层对应的纹理。
渲染引擎可以从相应的服务器中获取该页面对应的源文件，在对源文件进行解析的过程中通过识别动画元素标识确定动画元素，当动画元素具备子元素时，也要确定这些子元素，然后将该动画元素，或者，该动画元素及其子元素确定为待渲染的目标图层。需要注意的是，如果有多个动画元素，则该多个动画元素中的每个动画元素作为一个待渲染的目标图层，或，将每个动画元素及每个动画元素的子元素单独地作为一个待渲染的目标图层，即最后得到的待渲染的目标图层可以为多个。
进一步地，将上述所确定的待渲染的目标图层进行单独渲染，可选的，可以利用相应的软件命令实现，将该待渲染的目标图层放入一个单独渲染模块中来执行渲染过程。
S103：将上述待渲染的目标图层对应的纹理与包括上述源文件中其它元素的图层对应的纹理进行合成，并显示到页面上。
具体的，在上述页面渲染过程中，仅对该待渲染的目标图层进行单独渲染，生成待渲染的目标图层对应的纹理，其他元素所在的图层对应的纹理不变。在最后进行显示时，只需要将上述生成的待渲染的目标图层的纹理与包括其他元素的图层对应的纹理进行合成并显示至页面上即可。
可见，本发明实施例提供的页面渲染方法，根据页面对应的源文件中包含的动画元素标识确定动画元素，并将确定的的动画元素或动画元素及该动画元素的子元素作为待渲染的目标图层；并对该待渲染的目标图层进行单独渲染（其他元素组成的图层的纹理可以保持不变），生成与该待渲染的目标图层对应的纹理；最后将所生成的待渲染的目标图层的纹理与其他元素组成的图层对应的纹理进行合成后显示至页面上。本发明实施例提供的方法，使得用户可以根据自己的需求指定将来可能发生变化的一个或多个元素作为动画元素，并将该动画元素或动画元素及该动画元素的子元素作为特殊的图层，当这些元素发生变化时，可以将该特殊图层进行单独处理，避免影响其他图层，有效地提升了页面的渲染性能。
在上述图1所示实施例的基础上，作为本发明实施例的一种可行的实施方式，图2为对待渲染的目标图层进行渲染并生成纹理的具体流程示意图。参考图2，该步骤包括：
S201：对上述待渲染的目标图层中包含的一个或多个元素进行布局。
具体的，当页面发生动画时，由于通过本发明实施例事先标识出了发生动画的这些元素，这些元素都包含在该待渲染的目标图层中，所以只需要对该待渲染的目标图层中的一个或多个元素进行布局，即对这些元素的位置信息、高度信息等进行相应的布局。
S202：根据布局后的待渲染的目标图层中包含的元素的绘制信息生成待渲染的目标图层的绘制命令。
S203：根据待渲染的目标图层的绘制命令绘制与待渲染的目标图层对应的图像。
具体的，每个元素相应的都有自己的绘制信息，该绘制信息为表示该元素在对应到页面上的形状的信息。为了使得渲染引擎在后期的图像绘制过程中能够将待渲染的目标图层的元素准确绘制出来，需要将这些元素的绘制信息转换为相应的绘制命令，从而根据该绘制命令绘制出相应的图像，这里的图像实际上就是该些元素对应的实际的图形。
S204：将待渲染的目标图层对应的图像转换为与待渲染的目标图层对应的纹理。
具体的，在上述图像（可以是位图图像，也可以是矢量图像）绘制完成以后，可选的，渲染引擎可以对这些图像进行保存，对于保存的形式，可以是分块保存，也可以是其他形式的保存，本发明实施例对此并不做限制。之后，渲染引擎将上述图像转换成相应的纹理，与其它纹理进行合成后显示至页面上。
需要说明的是，以上步骤S201-S204的渲染过程可以参考现有技术实现，本发明实施例中不再详细描述。
图3为本发明提供的页面渲染方法实施例二的流程图。本实施例涉及的场景是在待渲染的目标图层的某个元素需要隐藏时的处理过程。如图3所示，该方法可以包括：
S301：当隐藏上述待渲染的目标图层包含的任意一个元素时，判断该元素是否为纹理隐藏标识指示的元素；若该元素为纹理隐藏标识指示的元素，则将上述待渲染的目标图层对应的纹理进行隐藏。
S302：当重新显示隐藏的该元素时，将上述隐藏的纹理重新进行显示。
具体的，当用户需要隐藏待渲染的目标图层中包含的任意一个元素时，若该元素为预先在源文件中利用纹理隐藏标识指示出来的元素，则渲染引擎将上述待渲染的目标图层对应的纹理进行隐藏。其中，上述纹理隐藏标识用于指示包含该纹理隐藏标识指示的元素所在的图层对应的纹理不需要被删除。具体的，例如通过自动改变该纹理对应的属性为“隐藏”，使得计算机获知到该属性从而将该纹理进行隐藏，但与该纹理对应的数据仍然保留。
另外需要说明的是，上述通过纹理隐藏标识指示出来的元素可以是上述动画元素，也可以为待渲染的目标图层中的其他元素。纹理隐藏标识用来指示计算机它所标识的元素在需要隐藏时不需要被删除，仅需隐藏即可。
现有技术中，当要隐藏某个元素时，所做的处理是将该元素所在的图层对应的纹理删除，在需要重新显示该元素时，需要将该元素所在的图层进行重新渲染，从而增加了计算机的开销。但是，在本发明实施例中，当用户需要再次显示该元素时（该元素即上述被纹理隐藏标识指示出来的元素），渲染引擎所做的操作是将之前隐藏的待渲染的目标图层的纹理进行重新显示，无需渲染引擎对待渲染的目标图层的纹理进行再次渲染，从而大大降低了计算机的开销。
可见，本发明实施例提供的页面渲染方法，通过用户将待渲染的目标图层中的某一元素预先利用纹理隐藏标识指示出来，在渲染引擎需要隐藏该元素时，渲染引擎根据纹理隐藏标识隐藏并保存该元素，在重新显示时，只需将待渲染的目标图层的纹理重新进行显示即可，避免了现有技术通过删除待渲染的目标图层的纹理才能达到隐藏待渲染的目标图层中的某一元素，大大降低了计算机的开销，更加有效的提升了渲染性能。
图4为本发明提供的页面渲染方法实施例三的流程图，作为本发明实施例的一种可行的实施方式，本实施例提供的方法涉及的是当待渲染的目标图层中的任意一个图层发生变化时如何处理。
具体的，当上述确定出来的待渲染的目标图层为多个时，该待渲染的目标图层中任意一个或多个待渲染的目标图层的内容可能会发生变化，当发生变化时，请参阅图4，本发明实施例提供的页面渲染方法还可以包括：
S401：根据上述待渲染的目标图层对应的内容属性信息确定上述待渲染的目标图层中发生变化的一个或多个待渲染的目标图层。
具体的，渲染引擎根据动画元素标识所指示的动画元素确定出多个待渲染的目标图层，渲染引擎在最初均会对所确定的多个待渲染的目标图层进行渲染，获取相应的纹理；并且，其他元素所在的图层的纹理依然保持原来的状态。进一步的，当用户在页面上执行相应的操作致使页面的内容发生变化，并且所发生的变化位于上述待渲染的目标图层中的一个或多个待渲染的目标图层，也就是说上述多个待渲染的目标图层中的一个或多个待渲染的目标图层的内容此时发生了变化，则该待渲染的目标图层对应的内容属性信息将会发生改变，渲染引擎根据该内容属性信息即可确定上述多个待渲染的目标图层中发生变化的待渲染的目标图层。
需要说明的是，这里的待渲染的目标图层对应的内容属性信息为向渲染引擎指示上述一个或多个的待渲染的目标图层所发生的变化是内容上的变化的信息。该内容属性信息会随着待渲染的目标图层的内容的变化发生改变，从而使得渲染引擎获知到这些内容发生变化的待渲染的目标图层，进而对这些内容发生变化的待渲染的目标图层的纹理进行重新绘制。
本发明实施例所说的图层的内容变化是指图层中包含的元素的增加、删除或修改等操作，图层整体发生的变化，例如图层位置变化或透明度变化等不包含在所谓的内容变化中。例如：当待渲染的目标图层中的某些元素的增加或减少，这些增加或减少的元素对应到实际的页面上可能是页面上增加了某个图片或减少了某个图片，因此该待渲染的目标图层发生的变化实际上是内容的变化，需要渲染引擎对发生变化的待渲染的目标图层的纹理进行重新绘制，因此，该发生内容变化的待渲染的目标图层就会通过改变自己的内容属性信息告知渲染引擎自己需要进行生成新的纹理。
S402：对该发生变化的一个或多个待渲染的目标图层进行重新渲染，生成与上述发生变化的待渲染的目标图层对应的新的纹理；其中，上述页面中的其它未发生变化的待渲染的目标图层对应的纹理保持原来的状态。
具体的，渲染引擎对所确定的发生变化的一个或多个待渲染的目标图层进行重新渲染，以获取这些发生变化的待渲染的目标图层对应的新的纹理，并且，对于上述所确定的待渲染的目标图层中的其他未发生变化的待渲染的目标图层，其纹理保持原来的状态。
对上述发生变化的一个或多个待渲染的目标图层进行重新渲染，以获取该些发生变化的待渲染的目标图层对应的新的纹理的具体过程可以参见上述图2所示的实施例，在此不再赘述。
S403：将上述发生变化的待渲染的目标图层对应的新的纹理、其它未发生变化的待渲染的目标图层对应的纹理以及包括上述源文件中其它元素的图层对应的纹理合成后显示到上述页面上。
可见，本发明实施例提供的页面渲染方法，用户通过页面对应的源文件中包含的动画元素标识确定动画元素，渲染引擎根据所确定的动画元素或该动画元素及其子元素确定待渲染的目标图层，并将该待渲染的目标图层对应的纹理显示至页面后，当该待渲染的目标图层中的一个或多个待渲染的目标图层的内容发生变化时，仅需要对这些内容发生变化的待渲染的目标图层进行重新渲染，从而避免了对所有待渲染的目标图层进行重新渲染的过程，进一步提升了渲染的性能，也节约了计算机的开销。
在另一种场景下，用户在页面执行相应的操作导致上述待渲染的目标图层中任意一个或多个待渲染的目标图层的位置信息或透明度信息发生变化，则渲染引擎根据所述待渲染的目标图层的位置信息或透明度信息确定发生变化的一个或多个待渲染的目标图层，然后更改发生变化的待渲染的目标图层对应的纹理的纹理属性；将该更改属性后的纹理、其它未发生变化的待渲染的目标图层对应的纹理以及包括上述源文件中其它元素的图层对应的纹理合成后显示到上述页面上。
需要说明的是，这里的待渲染的目标图层的位置信息或透明度信息和前述实施例中提到的待渲染的目标图层对应的内容属性信息是不同的概念，待渲染的目标图层对应的内容属性信息主要指示的是待渲染的目标图层的内容是否发生变化，这里的待渲染的目标图层的位置信息或透明度信息指示的是待渲染的目标图层发生的变化是非内容上的变化。
可见，本发明实施例提供的页面渲染方法，用户通过页面对应的源文件中包含的动画元素标识确定动画元素，渲染引擎根据所确定的动画元素或该动画元素及其子元素确定待渲染的目标图层，并将该待渲染的目标图层对应的纹理显示至页面后，当该多个待渲染的目标图层中的一个或多个待渲染的目标图层的位置信息或形状信息发生变化时，仅需要更改发生变化的待渲染的目标图层对应的原来纹理的纹理属性，从而避免了对所有待渲染的目标图层进行重新渲染的过程，进一步提升了渲染的性能，也节约了计算机的开销。
为了能够更加清楚的说明本发明实施例在相应的渲染引擎进行页面渲染时带来的有益效果，接下来的实施例以渲染引擎为webkit为例介绍本发明提供的页面渲染方法。可以理解的是，本发明实施例并不局限于webkit渲染引擎。
实施例四
为了便于理解，首先介绍一下webkit渲染引擎执行页面渲染时的基本过程：webkit引擎从网络服务器中请求网络资源并对其进行解析，获得多个元素和各元素的层叠样式表（Cascading Style Sheets，以下简称CSS）属性；根据上述获得的多个元素构造文档对象模型(Document Object Model，以下简称DOM）树；将上述各个元素的CSS属性附加至上述DOM树后生成渲染树（render tree），其中，渲染树可以包括一个根层（render view）和renderview下的多个图层，可选的，这些图层下可以有一个或多个子图层。即，render view对应一个根元素（根元素下包括父元素，父元素下包括子元素），渲染树中的每个图层对应一个父元素及该父元素下的子元素。之后，对渲染树中的所有图层进行布局，实际上是对该些图层对应的父元素及该父元素下的子元素进行布局。根据布局后的各个元素的绘制信息生成相应的绘制命令，根据该绘制命令绘制为图像，并将图像转换为相应的纹理（Texture）；最后将上述纹理进行合成后显示到页面上。
基于webkit渲染引擎，本发明实施例提供的页面渲染方法包括：
1)webkit渲染引擎获取所述页面的源HTML文件，该HTML文件中包括多个元素以及元素的相关信息，并且，开发者在HTML文件中利用动画元素标识指示出未来可能发生变化的某些元素为动画元素。动画元素标识用于指示该元素在后面的处理过程中可以被包括在待渲染的目标图层中，这里的待渲染的目标图层即为动画层（下面的实施例中所提到的动画层均为待渲染的目标图层，动画层标识均为动画元素标识）。
需说明的是，这里的动画元素标识具体可以采用布尔变量，例如isAnimationLayer就是一个布尔变量，当isAnimationLayer=true时标识该元素为动画元素，当isAnimationLayer=false时标识该元素不是动画元素；也可以当一个元素后有isAnimationLayer标识时确定该元素为动画元素，当没有该标识时确定该元素不是动画元素。
2)webkit渲染引擎解析HTML文件生成DOM树；将相应的CSS文件也执行解析并附加到该DOM树上生成渲染树（render tree）。该渲染树包括至少两个渲染层（render layer），每一个渲染层包含一个父元素及该父元素的子元素（没有子元素也是可以的），这里的父元素和子元素可以统称为元素。
需要注意的是，在本发明实施例中，这棵渲染树中的某些元素上已经有了动画层标识。
3)webkit渲染引擎对该渲染树进行解析，提取有动画层标识的一个元素及其子元素，将它们确定为动画层。最终确定的动画层可以是一个，也可以是多个，本发明实施例对此不做限制。当确定出多个动画层时，可以通过一个动画层列表（AnimationList）来维护所有的动画层的信息，其中，该动画层列表中记录的可以是动画层标识与其当初所在的渲染层的映射关系。
现有技术中，当页面中发生动画时，由于动画层和其它渲染层没有区分，所以会触发所有元素进行重新渲染，计算时间较长，渲染性能较差。但采用本发明实施例提供的方案之后，所有可能发生变化的元素已经放到动画层中，因此当页面发生变化时，只需要对动画层进行单独的渲染。
4)当页面发生变化时，webkit渲染引擎对确定出的动画层进行渲染，以获取该动画层对应的纹理。
具体的，首先，对动画层中所包含的元素进行布局，该布局过程包括元素的绝对位置信息的确定、颜色信息确定等；其次，根据布局后的动画层中所包含的所有元素的绘制信息生成该动画层的绘制命令，并将该绘制命令保存至动画层树(AnimationLayersTree)中的SKPicture中，该AnimationLayersTree和SKPicture可以看做是软件实现时的一个命令模块；最后，根据该绘制命令绘制图像（SKPbitmap），并将图像转换为与动画层对应的纹理，可选的，可以将该些纹理可以分块（Tile）进行保存。
5)将动画层的纹理与其他元素所在的图层对应的纹理进行合成后显示至页面上。
可见，本发明实施例提供的页面渲染方法，根据页面对应的源文件中用户利用动画元素标识指示出的动画元素或该动画元素和该动画元素的子元素确定待渲染的目标图层；并对该待渲染的目标图层进行单独渲染（其他元素组成的图层的纹理保持不变），生成与该待渲染的目标图层对应的纹理；最后将所生成的待渲染的目标图层的纹理与其他图层对应的纹理进行合成后显示至页面上。本发明实施例提供的方法，使得用户可以根据自己的需求指定将来可能发生变化的一个或多个元素作为动画元素，并将该动画元素或动画元素及该动画元素的子元素作为特殊的图层，当该些元素发生变化时，可以将该特殊图层进行单独处理，避免影响其他图层，有效地提升了渲染效率和性能。
实施例五
具体的，本实施例可以对应上述图3所示的实施例。在本发明实施例中，用户可以通过动画元素标识在源文件中指示出动画元素，还可以通过纹理隐藏标识在源文件中指示出待隐藏的元素，并且该动画元素和待隐藏的元素可以是同一个元素，也可以不是同一个元素。具体的，若以webkit渲染引擎为例，该纹理隐藏标识可以为纹理保存标识（reservetexture）。
一般的，上述待隐藏的元素有“visibility”标识，该标识的值默认为visible，表明该待隐藏的元素此时是需要显示的，相应的，该元素所在的动画层可以具备isHidden标识，该标识的值默认为False。当该元素需要被隐藏时，该元素的“visibility”会被置为hidden。若按照现有技术处理，webkit渲染引擎会将之前生成的动画层的纹理进行删除以达到隐藏的目的，并且在需要重新显示该元素时，浏览器会对动画层的所有元素进行重新渲染以获取动画层的纹理，进而重新在页面上显示该动画层。但是，本发明实施例中，渲染引擎会检测“reservetexture”的值，当“reservetexture”的值为True时，表示该元素被隐藏时（visibility=hidden）只需隐藏之前所渲染的动画层的纹理，并将动画层的isHidden属性置为True，以使该动画层的纹理不显示在页面上，而并不需要删除之前绘制的动画层的纹理，这样做的好处是在页面需要再次显示该元素时，只需要该元素所在的动画层的isHidden属性改为False，可以重用之前保存的该动画层的纹理数据，提升整体渲染性能。
可见，本发明实施例提供的页面渲染方法，通过用户将待渲染的目标图层中的某一元素预先利用纹理隐藏标识指示出来，在该元素需要被隐藏时，浏览器根据纹理隐藏标识隐藏并保存该元素，在重新显示时，只需将待渲染的目标图层的纹理重新进行显示即可，避免了现有技术通过删除待渲染的目标图层的纹理才能达到隐藏待渲染的目标图层中的某一元素，大大降低了计算机的开销，更加有效的提升了渲染性能。
实施例六
具体的，本实施例对应上述图4所示的实施例。
当webkit渲染引擎根据用户在HTML文件中通过“isAnimationlayer”指示出的动画元素确定的动画层为多个时，webkit渲染引擎对所确定的多个动画层的纹理进行绘制后，与其他元素所在的图层对应的纹理进行合成并显示至页面上。当用户在页面上执行了某一操作后，webkit渲染引擎会根据渲染树的的“isAnimationLayoutOnly”标识判断所发生的变化是不是位于上述所确定的多个动画层上，当“isAnimation LayoutOnly”标识为True，表明所发生的变化仅位于上述所确定的多个动画层上；当“isAnimationLayoutOnly”为False时，表明所发生的变化还位于其他元素所在的图层上，需要对所有的图层进行重新布局。
当所发生的变化仅位于上述所确定的多个动画层上时，webkit渲染引擎根据上述多个动画层的属性信息（即“isDirty”标识）确定该多个动画层中的哪些动画层发生了内容变化，当该多个动画层中某些动画层的“isDirty”标识的值为True时，表明这些动画层的内容发生了变化，需要对该些动画层进行重新渲染，获取新的纹理；当该多个动画层中某些动画层的“isDirty”标识的值为False时，表明该些动画层内容未发生变化，继续沿用之前所绘制的纹理。
最后，webkit渲染引擎将上述发生变化的动画层对应的新的纹理，其他未发生变化的动画层对应的纹理以及上述源文件中其他元素所在的图层对应的纹理进行合成显示到页面上。
当所发生的变化还位于其他元素所在的图层上时，webkit渲染引擎需要对所有的图层进行重新布局，并且这些图层的纹理仍然按照现有技术进行绘制，即当页面其他内容变化（非动画层的内容）后，还是会准备其他图层的新纹理以及最后的页面绘制，不过这个过程就不会把动画层的纹理绘制出来（动画层有其单独的纹理绘制过程）；另一方面，继续对动画层进行单独绘制，优选的，可以采取isReady标识来标识动画层的图像纹理是否已经绘制好，当isReady为true时，表示该动画层的纹理已经绘制成功，当isReady为false时，表示该动画层的纹理还没有绘制成功。在对动画层的纹理进行绘制的过程中，不需要所有动画层的图像准备好后才开始绘制纹理，但是，当动画层树中存在部分动画层的isReady标识还是false的情况，表明还未完成整个页面的渲染（即部分动画层的纹理未准备好，也没有绘制到屏幕上），则此时需要把纹理绘制过程中的返回值设置为真，使得webkit渲染引擎获知还需要对上述未准备好纹理的动画层继续进行绘制，以确保页面的整体渲染和显示。
可见，本发明实施例提供的页面渲染方法，用户通过页面对应的源文件中包含的动画元素标识确定动画元素，渲染引擎根据所确定的动画元素或该动画元素及其子元素确定待渲染的目标图层，并将该待渲染的目标图层对应的纹理显示至页面后，当该待渲染的目标图层中的一个或多个待渲染的目标图层的内容发生变化时，仅需要对这些内容发生变化的待渲染的目标图层进行重新渲染，从而避免了对所有待渲染的目标图层进行重新渲染的过程，进一步提升了渲染的性能，也节约了计算机的开销。
实施例七
具体的，本实施例对应的是上述待渲染的目标图层中任意一个或多个待渲染的目标图层的位置信息或透明度信息发生变化时，渲染引擎进行相应处理的实施例。
具体的，当webkit渲染引擎确定页面发生的变化位于上述多个动画层上，webkit渲染引擎可以通过上述多个动画层的“hasOpacity”标识或“hasTransfrom”标识判断是否含有内容未变的动画效果，即是否是上述多个动画层的位置信息或透明度信息发生变化。当“hasOpacity”标识或“hasTransfrom”标识的值为True时，表明动画层含有内容未变的动画效果，当“hasOpacity”标识和“hasTransfrom”标识的值为False时，表明动画层没有内容未变的动画效果。
当上述多个动画层的位置信息或透明度信息发生变化时，则webkit渲染引擎更改该发生变化的动画层对应的纹理的纹理属性。最后，webkit渲染引擎将该发生变化的动画层对应的更改纹理属性后的纹理、其它未发生变化的动画层对应的纹理以及上述源文件中其它元素组成的图层对应的纹理合成后显示到上述页面上。
可见，本发明实施例提供的页面渲染方法，用户通过页面对应的源文件中包含的动画元素标识确定动画元素，渲染引擎根据所确定的动画元素或该动画元素及其子元素确定待渲染的目标图层，并将该待渲染的目标图层对应的纹理显示至页面后，当该待渲染的目标图层中的一个或多个待渲染的目标图层的位置信息或形状信息发生变化时，仅需要更改发生变化的待渲染的目标图层对应的原来纹理的纹理属性，从而避免了对所有待渲染的目标图层进行重新渲染的过程，进一步提升了渲染的性能，也节约了计算机的开销。
本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM（Read-Only Memory,只读存储器）、RAM（RandomAccess Memory,随机存储器）、磁碟或者光盘等各种可以存储程序代码的介质。
请参阅图5，为本发明提供的页面渲染装置实施例一的结构示意图。如图5所示，该页面渲染装置30包括：
第一确定模块10，用于根据所述页面对应的源文件中包含的动画元素标识确定动画元素，其中，所述动画元素标识用于指示所述动画元素。
渲染生成模块11，用于对上述第一确定模块10确定的动画元素，或，该动画元素及该动画元素的子元素作为待渲染的目标图层，对该待渲染的目标图层进行渲染，得到与待渲染的目标图层对应的纹理。
合成显示模块12，用于将上述渲染生成模块11得到的待渲染的目标图层对应的所述纹理与包括上述源文件中其它元素组成的图层对应的纹理合成后显示到页面上。
本实施例涉及的页面渲染装置可以执行上述方法实施例，其实现原理和技术效果类似，在此不再赘述。
可见，本发明实施例提供的页面渲染装置，根据页面对应的源文件中包含的动画元素标识确定动画元素，并将确定的的动画元素或动画元素及该动画元素的子元素作为待渲染的目标图层；并对该待渲染的目标图层进行单独渲染（其他元素组成的图层的纹理可以保持不变），生成与该待渲染的目标图层对应的纹理；最后将所生成的待渲染的目标图层的纹理与其他元素组成的图层对应的纹理进行合成后显示至页面上，使得用户可以根据自己的需求指定将来可能发生变化的一个或多个元素作为动画元素，并将该动画元素或动画元素及该动画元素的子元素作为特殊的图层，当这些元素发生变化时，可以将该特殊图层进行单独处理，避免影响其他图层，有效地提升了页面的渲染性能。
图6为本发明提供的页面渲染装置实施例二的结构示意图，在上述图5所示实施例的基础上，进一步地，该页面渲染装置30还可以包括：
纹理隐藏模块13，用于当隐藏上述待渲染的目标图层包含的任意一个元素时，判断该元素是否为纹理隐藏标识指示的元素，若该元素为纹理隐藏标识指示的元素，则将上述待渲染的目标图层对应的纹理进行隐藏。
重新显示模块14，用于当重新显示所述纹理隐藏模块13所隐藏的元素时，将隐藏的所述纹理重新进行显示。
本实施例涉及的页面渲染装置可以执行上述方法实施例，其实现原理和技术效果类似，在此不再赘述。
可见，本发明实施例提供的页面渲染装置，通过用户将待渲染的目标图层中的某一元素预先利用纹理隐藏标识指示出来，在渲染引擎需要隐藏该元素时，渲染引擎根据纹理隐藏标识隐藏并保存该元素，在重新显示时，只需将待渲染的目标图层的纹理重新进行显示即可，避免了现有技术通过删除待渲染的目标图层的纹理才能达到隐藏待渲染的目标图层中的某一元素，大大降低了计算机的开销，更加有效的提升了渲染性能。
图7为本发明提供的页面渲染装置实施例三的结构示意图，在上述图6所示实施例的基础上，进一步地，上述页面渲染装置30还可以包括：
第二确定模块15，用于当上述待渲染的目标图层中任意一个或多个待渲染的目标图层的内容发生变化时，根据上述待渲染的目标图层对应的属性信息确定上述待渲染的目标图层中发生变化的一个或多个待渲染的目标图层。
渲染生成模块11还用于对第二确定模块15确定的上述发生变化的一个或多个待渲染的目标图层进行重新渲染，生成与该发生变化的待渲染的目标图层对应的新的纹理。其中，上述页面中的其它未发生变化的待渲染的目标图层对应的纹理保持原来的状态。
上述合成显示模块12还用于将该发生变化的待渲染的目标图层对应的新的纹理、其它未发生变化的待渲染的目标图层对应的纹理以及包括上述源文件中其它元素组成的图层对应的纹理合成后显示到页面上。
本实施例涉及的页面渲染装置可以执行上述方法实施例，其实现原理和技术效果类似，在此不再赘述。
图8为本发明提供的页面渲染装置实施例四的结构示意图，在上述图7所述实施例的基础上，进一步地，上述页面渲染装置30还可以包括：
属性更改模块16，用于当所述待渲染的目标图层中任意一个或多个待渲染的目标图层的位置信息或透明度信息发生变化时，根据所述待渲染的目标图层的位置信息或透明度信息确定发生变化的一个或多个待渲染的目标图层；更改所述一个或多个待渲染的目标图层对应的纹理的纹理属性。
相应的，所述合成显示模块还用于将所述一个或多个待渲染的目标图层对应的更改纹理属性后的纹理，其它未发生变化的待渲染的目标图层对应的纹理以及包括所述源文件中其它元素的图层对应的纹理合成后显示到所述页面上。
本实施例涉及的页面渲染装置可以执行上述方法实施例，其实现原理和技术效果类似，在此不再赘述。
进一步地，在上述实施例的基础上，上述渲染生成模块11具体用于对上述待渲染的目标图层中包含的一个或多个元素进行布局；根据布局后的待渲染的目标图层中包含的元素的绘制信息生成待渲染的目标图层的绘制命令；并根据该待渲染的目标图层的绘制命令绘制与待渲染的目标图层对应的图像；并将待渲染的目标图层对应的图像转换为与待渲染的目标图层对应的纹理。
本实施例涉及的页面渲染装置可以执行上述方法实施例，其实现原理和技术效果类似，在此不再赘述。
可见，本发明实施例提供的页面渲染装置，当上述待渲染的目标图层中的一个或多个待渲染的目标图层的内容发生变化时，仅需要对这些内容发生变化的待渲染的目标图层进行重新渲染；该上述待渲染的目标图层中的一个或多个待渲染的目标图层的位置信息或形状信息发生变化时，仅需要更改发生变化的待渲染的目标图层对应的原来纹理的纹理属性，从而避免了对所有待渲染的目标图层进行重新渲染的过程，进一步提升了渲染的性能，也节约了计算机的开销。
图9为本发明提供的页面渲染装置实施例五的结构示意图。如图9所示，该页面渲染装置30包括：处理器20、存储器21以及用户接口22，三者通过总线23连接。当然，除此之外，本发明实施例提供的页面渲染装置还可以包括用于与其它设备通信的通信接口等。图9所示的页面渲染装置具体可以为手机、平板电脑、台式计算机、便携式计算机、服务器等电子设备。
总线23用于实现处理器20、存储器21以及用户接口22之间的连接通信。该总线可以是ISA（Industry Standard Architecture，工业标准体系结构）总线、PCI（Peripheral Component Interconnect，外部设备互连）总线或EISA（Extended Industry Standard Architecture，扩展工业标准体系结构）总线等。所述总线可以是一条或多条物理线路，当是多条物理线路时可以分为地址总线、数据总线、控制总线等。
用户接口22用于接收用户的操作，或向用户展示页面。例如，在本发明实施例中，用户通过用户接口22操作页面，使得页面上的内容发生变化，从而触发处理器20对该页面进行重新渲染。
存储器21用于存储计算机程序，可以包括应用程序和操作系统程序。
处理器20，用于从存储器21中读取计算机程序并用于执行以下操作，具体为：
根据所述页面对应的源文件中包含的动画元素标识确定动画元素，其中，该动画元素标识用于指示动画元素；将该动画元素，或，动画元素及该动画元素的子元素作为待渲染的目标图层，对该待渲染的目标图层进行渲染，得到与该待渲染的目标图层对应的纹理；将该待渲染的目标图层对应的纹理与包括源文件中其它元素的图层对应的纹理进行合成，并显示到页面上。
可选的，上述处理器20还可以用于当隐藏上述待渲染的目标图层包含的任意一个元素时，判断该元素是否为纹理隐藏标识指示的元素，若该元素为纹理隐藏标识指示的元素，则将上述待渲染的目标图层对应的纹理进行隐藏；当重新显示上述隐藏的元素时，将上述隐藏的纹理重新进行显示。
可选的，当上述待渲染的目标图层中任意一个或多个待渲染的目标图层的内容发生变化时，上述处理器20还可以用于根据上述上待渲染的目标图层对应的属性信息确定待渲染的目标图层中发生变化的一个或多个待渲染的目标图层；并对该发生变化的一个或多个待渲染的目标图层进行重新渲染，生成与该发生变化的待渲染的目标图层对应的新的纹理；其中，上述页面中的其它未发生变化的待渲染的目标图层对应的纹理保持原来的状态；并将上述发生变化的待渲染的目标图层对应的新的纹理、其它未发生变化的待渲染的目标图层对应的纹理以及包括上述源文件中其它元素组成的图层对应的纹理合成后显示到页面上。
在另一种实现方式下，若上述待渲染的目标图层中任意一个或多个待渲染的目标图层的位置信息或透明度信息发生变化，则上述处理器20还可以用于根据所述待渲染的目标图层的位置信息或透明度信息确定发生变化的一个或多个待渲染的目标图层；更改所述一个或多个待渲染的目标图层对应的纹理的纹理属性；将所述一个或多个待渲染的目标图层对应的更改纹理属性后的纹理，其它未发生变化的待渲染的目标图层对应的纹理以及包括所述源文件中其它元素的图层对应的纹理合成后显示到所述页面上。
可选的，上述处理器20在对待渲染的目标图层进行渲染以生成待渲染的目标图层对应的纹理时，具体用于对上述待渲染的目标图层中包含的一个或多个元素进行布局；并根据布局后的待渲染的目标图层中包含的元素的绘制信息生成上述待渲染的目标图层的绘制命令；并根据该待渲染的目标图层的绘制命令绘制与该待渲染的目标图层对应的图像；并将该待渲染的目标图层对应的图像转换为与该待渲染的目标图层对应的纹理。
本实施例涉及的页面渲染装置可以执行上述方法实施例，其中包含的计算机程序可以按照前述装置实施例介绍的模块形式划分，也可以按照其它模块划分方式，也可以不划分模块。具体实现方法参考前述实施例，在此不再赘述。
综上所述，本发明实施例提供的页面渲染方法及装置，根据页面对应的源文件中包含的动画元素标识确定动画元素，并将确定的的动画元素或动画元素及该动画元素的子元素作为待渲染的目标图层；并对该待渲染的目标图层进行单独渲染（其他元素组成的图层的纹理可以保持不变），生成与该待渲染的目标图层对应的纹理；最后将所生成的待渲染的目标图层的纹理与其他元素组成的图层对应的纹理进行合成后显示至页面上，使得用户可以根据自己的需求指定将来可能发生变化的一个或多个元素作为动画元素，并将该动画元素或动画元素及该动画元素的子元素作为特殊的图层，当这些元素发生变化时，可以将该特殊图层进行单独处理，避免影响其他图层，有效地提升了页面的渲染性能。
进一步的，通过用户将待渲染的目标图层中的某一元素预先利用纹理隐藏标识指示出来，在渲染引擎需要隐藏该元素时，渲染引擎根据纹理隐藏标识隐藏并保存该元素，在重新显示时，只需将待渲染的目标图层的纹理重新进行显示即可，避免了现有技术通过删除待渲染的目标图层的纹理才能达到隐藏待渲染的目标图层中的某一元素，大大降低了计算机的开销，更加有效的提升了渲染性能。
更进一步的，当上述待渲染的目标图层中的一个或多个待渲染的目标图层的内容发生变化时，仅需要对这些内容发生变化的待渲染的目标图层进行重新渲染；当上述待渲染的目标图层中的一个或多个待渲染的目标图层的位置信息或形状信息发生变化时，仅需要更改发生变化的待渲染的目标图层对应的原来纹理的纹理属性，从而避免了对所有待渲染的目标图层进行重新渲染的过程，进一步提升了渲染的性能，也节约了计算机的开销。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (14)

1.一种页面渲染方法，其特征在于，包括：
根据所述页面对应的源文件中包含的动画元素标识确定动画元素，其中，所述动画元素标识用于指示所述动画元素；
将所述动画元素，或，所述动画元素及所述动画元素的子元素作为待渲染的目标图层，对所述待渲染的目标图层进行渲染，得到与所述待渲染的目标图层对应的纹理；
将所述待渲染的目标图层对应的所述纹理与包括所述源文件中其它元素的图层对应的纹理进行合成，并显示到所述页面上。
2.根据权利要求1所述的页面渲染方法，其特征在于，还包括：
当隐藏所述待渲染的目标图层包含的任意一个元素时，判断所述元素是否为纹理隐藏标识指示的元素，若所述元素为纹理隐藏标识指示的元素，则将所述待渲染的目标图层对应的所述纹理进行隐藏；
当重新显示所述隐藏的所述元素时，将所述隐藏的所述纹理重新进行显示。
3.根据权利要求1或2所述的页面渲染方法，其特征在于，当所述待渲染的目标图层中任意一个或多个待渲染的目标图层的内容发生变化时，还包括：
根据所述待渲染的目标图层对应的内容属性信息确定所述待渲染的目标图层中发生变化的一个或多个待渲染的目标图层；
对所述发生变化的一个或多个待渲染的目标图层进行重新渲染，生成与所述发生变化的待渲染的目标图层对应的新的纹理；其中，所述页面中的其它未发生变化的待渲染的目标图层对应的纹理保持原来的状态；
将所述发生变化的待渲染的目标图层对应的所述新的纹理、其它未发生变化的待渲染的目标图层对应的纹理以及包括所述源文件中其它元素的图层对应的纹理合成后显示到所述页面上。
4.根据权利要求1或2所述的页面渲染方法，其特征在于，当所述待渲染的目标图层中任意一个或多个待渲染的目标图层的位置信息或透明度信息发生变化时，还包括：
根据所述待渲染的目标图层的位置信息或透明度信息确定发生变化的一个或多个待渲染的目标图层；
更改所述一个或多个待渲染的目标图层对应的纹理的纹理属性；
将所述一个或多个待渲染的目标图层对应的更改纹理属性后的纹理，其它未发生变化的待渲染的目标图层对应的纹理以及包括所述源文件中其它元素的图层对应的纹理合成后显示到所述页面上。
5.根据权利要求1或2所述的页面渲染方法，其特征在于，所述对所述待渲染的目标图层进行渲染，得到与所述待渲染的目标图层对应的纹理，包括：
对所述待渲染的目标图层中包含的一个或多个元素进行布局；
根据布局后的所述待渲染的目标图层中包含的元素的绘制信息生成所述待渲染的目标图层的绘制命令；
根据所述待渲染的目标图层的绘制命令绘制与所述待渲染的目标图层对应的图像；
将所述待渲染的目标图层对应的图像转换为与所述待渲染的目标图层对应的纹理。
6.根据权利要求3所述的页面渲染方法，其特征在于，所述对所述待渲染的目标图层进行渲染，得到与所述待渲染的目标图层对应的纹理，包括：
对所述待渲染的目标图层中包含的一个或多个元素进行布局；
根据布局后的所述待渲染的目标图层中包含的元素的绘制信息生成所述待渲染的目标图层的绘制命令；
根据所述待渲染的目标图层的绘制命令绘制与所述待渲染的目标图层对应的图像；
将所述待渲染的目标图层对应的图像转换为与所述待渲染的目标图层对应的纹理。
7.根据权利要求4所述的页面渲染方法，其特征在于，所述对所述待渲染的目标图层进行渲染，得到与所述待渲染的目标图层对应的纹理，包括：
对所述待渲染的目标图层中包含的一个或多个元素进行布局；
根据布局后的所述待渲染的目标图层中包含的元素的绘制信息生成所述待渲染的目标图层的绘制命令；
根据所述待渲染的目标图层的绘制命令绘制与所述待渲染的目标图层对应的图像；
将所述待渲染的目标图层对应的图像转换为与所述待渲染的目标图层对应的纹理。
8.一种页面渲染装置，其特征在于，包括：
第一确定模块，用于根据所述页面对应的源文件中包含的动画元素标识确定动画元素，其中，所述动画元素标识用于指示所述动画元素；
渲染生成模块，用于将所述第一确定模块确定的所述动画元素，或，所述动画元素及所述动画元素的子元素作为待渲染的目标图层，对所述待渲染的目标图层进行渲染，得到与所述待渲染的目标图层对应的纹理；
合成显示模块，用于将所述渲染生成模块得到的所述待渲染的目标图层对应的所述纹理与包括所述源文件中其它元素的图层对应的纹理进行合成，并显示到所述页面上。
9.根据权利要求8所述的页面渲染装置，其特征在于，所述页面渲染装置还包括：
纹理隐藏模块，用于当隐藏所述待渲染的目标图层包含的任意一个元素时，判断所述元素是否为纹理隐藏标识指示的元素，若所述元素为纹理隐藏标识指示的元素，则将所述待渲染的目标图层对应的所述纹理进行隐藏；
重新显示模块，用于当重新显示所述纹理隐藏模块所隐藏的所述元素时，将所述隐藏的所述纹理重新进行显示。
10.根据权利要求8或9所述的页面渲染装置，其特征在于，所述页面渲染装置还包括：
第二确定模块，用于当所述待渲染的目标图层中任意一个或多个待渲染的目标图层的内容发生变化时，根据所述待渲染的目标图层对应的内容属性信息确定所述待渲染的目标图层中发生变化的一个或多个待渲染的目标图层；
所述渲染生成模块，还用于对所述第二确定模块确定的所述发生变化的一个或多个待渲染的目标图层进行重新渲染，生成与所述发生变化的待渲染的目标图层对应的新的纹理；其中，所述页面中的其它未发生变化的待渲染的目标图层对应的纹理保持原来的状态；
所述合成显示模块还用于将所述发生变化的待渲染的目标图层对应的所述新的纹理、其它未发生变化的待渲染的目标图层对应的纹理以及包括所述源文件中其它元素的图层对应的纹理合成后显示到所述页面上。
11.根据权利要求8或9所述的页面渲染装置，其特征在于，所述页面渲染装置还包括：
属性更改模块，用于当所述待渲染的目标图层中任意一个或多个待渲染的目标图层的位置信息或透明度信息发生变化时，根据所述待渲染的目标图层的位置信息或透明度信息确定发生变化的一个或多个待渲染的目标图层；更改所述一个或多个待渲染的目标图层对应的纹理的纹理属性；
所述合成显示模块还用于将所述一个或多个待渲染的目标图层对应的更改纹理属性后的纹理，其它未发生变化的待渲染的目标图层对应的纹理以及包括所述源文件中其它元素的图层对应的纹理合成后显示到所述页面上。
12.根据权利要求8或9所述的页面渲染装置，其特征在于，所述渲染生成模块具体用于：对所述待渲染的目标图层中包含的一个或多个元素进行重新布局；根据布局后的所述待渲染的目标图层中包含的元素的绘制信息生成所述待渲染的目标图层的绘制命令；根据所述待渲染的目标图层的绘制命令绘制与所述待渲染的目标图层对应的图像；将所述待渲染的目标图层对应的图像转换为与所述待渲染的目标图层对应的纹理。
13.根据权利要求10所述的页面渲染装置，其特征在于，所述渲染生成模块具体用于：对所述待渲染的目标图层中包含的一个或多个元素进行重新布局；根据布局后的所述待渲染的目标图层中包含的元素的绘制信息生成所述待渲染的目标图层的绘制命令；根据所述待渲染的目标图层的绘制命令绘制与所述待渲染的目标图层对应的图像；将所述待渲染的目标图层对应的图像转换为与所述待渲染的目标图层对应的纹理。
14.根据权利要求11所述的页面渲染装置，其特征在于，所述渲染生成模块具体用于：对所述待渲染的目标图层中包含的一个或多个元素进行重新布局；根据布局后的所述待渲染的目标图层中包含的元素的绘制信息生成所述待渲染的目标图层的绘制命令；根据所述待渲染的目标图层的绘制命令绘制与所述待渲染的目标图层对应的图像；将所述待渲染的目标图层对应的图像转换为与所述待渲染的目标图层对应的纹理。
CN201310704331.9A 2013-12-19 2013-12-19 页面渲染方法及装置 Active CN103678631B (zh)

Priority Applications (5)

Application Number Priority Date Filing Date Title
CN201310704331.9A CN103678631B (zh) 2013-12-19 2013-12-19 页面渲染方法及装置
EP14864980.9A EP2924590A4 (en) 2013-12-19 2014-07-25 METHOD AND APPARATUS FOR PAGE RENDERING
KR1020157017261A KR20150091132A (ko) 2013-12-19 2014-07-25 페이지 렌더링 방법 및 장치
PCT/CN2014/083008 WO2015090064A1 (zh) 2013-12-19 2014-07-25 页面渲染方法及装置
US14/740,970 US20150279058A1 (en) 2013-12-19 2015-06-16 Page Rendering Method and Apparatus

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201310704331.9A CN103678631B (zh) 2013-12-19 2013-12-19 页面渲染方法及装置

Publications (2)

Publication Number Publication Date
CN103678631A CN103678631A (zh) 2014-03-26
CN103678631B true CN103678631B (zh) 2016-10-05

Family

ID=50316176

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201310704331.9A Active CN103678631B (zh) 2013-12-19 2013-12-19 页面渲染方法及装置

Country Status (5)

Country Link
US (1) US20150279058A1 (zh)
EP (1) EP2924590A4 (zh)
KR (1) KR20150091132A (zh)
CN (1) CN103678631B (zh)
WO (1) WO2015090064A1 (zh)

Families Citing this family (39)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103678631B (zh) * 2013-12-19 2016-10-05 华为技术有限公司 页面渲染方法及装置
CN105335410B (zh) * 2014-07-31 2017-06-16 优视科技有限公司 一种基于合成渲染加速的网页更新方法和装置
CN104572967B (zh) * 2014-12-30 2018-01-19 北京奇虎科技有限公司 一种在页面绘制图形的方法和装置
CN104598103B (zh) * 2014-12-30 2018-06-26 北京奇虎科技有限公司 一种页面中处理图形的方法和装置
CN106156148B (zh) * 2015-04-14 2020-08-21 腾讯科技（深圳）有限公司 一种页面的渲染方法、装置和终端设备
US11295492B2 (en) 2015-07-31 2022-04-05 Samsung Electronics Co., Ltd. Electronic device and server related to rendering of web content and controlling method thereof
KR102384198B1 (ko) * 2015-07-31 2022-04-07 삼성전자주식회사 웹 컨텐츠의 렌더링과 관련된 전자 장치, 서버 및 제어 방법
CN106055294B (zh) * 2016-05-23 2019-02-01 福州瑞芯微电子股份有限公司 一种图层合成优化方法和装置
CN106210576A (zh) * 2016-07-13 2016-12-07 青岛海信电器股份有限公司 显示系统、内容显示装置以及内容显示方法
CN107707965B (zh) * 2016-08-08 2021-02-12 阿里巴巴（中国）有限公司 一种弹幕的生成方法和装置
CN107943805B (zh) * 2016-10-12 2022-02-25 阿里巴巴集团控股有限公司 一种动画渲染及发布方法、装置
US10296565B2 (en) 2017-01-18 2019-05-21 International Business Machines Corporation Optimized browser object rendering
CN107369197B (zh) * 2017-07-05 2022-04-15 腾讯科技（深圳）有限公司 图片处理方法、装置及设备
CN109683978B (zh) * 2017-10-17 2022-06-14 阿里巴巴集团控股有限公司 一种流式布局界面渲染的方法、装置以及电子设备
CN107918553A (zh) * 2017-12-07 2018-04-17 深圳市沃特沃德股份有限公司 车载系统的页面处理方法及装置
CN108495174B (zh) * 2018-04-09 2020-10-09 码卡(广州)科技有限公司 一种h5页面效果生成视频文件的方法及系统
CN108665520A (zh) * 2018-04-24 2018-10-16 微梦创科网络科技（中国）有限公司 一种页面动画渲染的方法及装置
CN109064540A (zh) * 2018-08-10 2018-12-21 （株）韩国诺仪器株式会社 视图渲染系统、频谱分析仪和渲染方法
CN110910477B (zh) * 2018-08-27 2022-06-07 北京京东尚科信息技术有限公司 页面动画显示方法、装置和计算机可读存储介质
CN110166842B (zh) * 2018-11-19 2020-10-16 深圳市腾讯信息技术有限公司 一种视频文件操作方法、装置和存储介质
CN109741413B (zh) * 2018-12-29 2023-09-19 超级魔方(北京)科技有限公司 一种场景中半透明物体的渲染方法、装置及电子设备
CN110007907B (zh) * 2019-01-04 2022-03-25 阿里巴巴集团控股有限公司 一种动画执行方法及装置
CN111611031A (zh) * 2019-02-26 2020-09-01 华为技术有限公司 一种图形绘制方法和电子设备
CN110209444B (zh) * 2019-03-20 2021-07-09 华为技术有限公司 一种图形渲染方法和电子设备
CN111111175A (zh) * 2019-12-18 2020-05-08 北京智明星通科技股份有限公司 一种游戏画面生成方法、装置和移动终端
CN111013144B (zh) * 2019-12-18 2023-10-27 北京智明星通科技股份有限公司 一种游戏画面绘制渲染方法、装置和移动终端
EP4085422A4 (en) * 2019-12-31 2023-10-18 Qualcomm Incorporated METHODS AND APPARATUS FOR FACILITATE REGION OF INTEREST TRACKING FOR MOVING IMAGES
CN111368235B (zh) * 2020-02-25 2023-11-14 北京达佳互联信息技术有限公司 页面渲染和展示方法、装置、服务器、存储介质
CN112287255B (zh) * 2020-07-13 2024-02-09 上海柯林布瑞信息技术有限公司 页面构建方法及装置、计算设备、计算机可读存储介质
CN111782215A (zh) * 2020-07-21 2020-10-16 致诚阿福技术发展(北京)有限公司 一种为目标对象动态添加标识特征的方法和装置
CN112711932B (zh) * 2020-12-29 2022-02-22 掌阅科技股份有限公司 基于排版引擎实现的书籍呈现方法、计算设备及存储介质
CN112417345B (zh) * 2021-01-25 2021-04-13 北京小米移动软件有限公司 渲染方法、装置、电子设备及存储介质
CN113268687B (zh) * 2021-05-25 2023-11-28 北京达佳互联信息技术有限公司 一种确定元素渲染位置的方法、装置及存储介质
CN113570733A (zh) * 2021-08-05 2021-10-29 稿定（厦门）科技有限公司 一种基于WebGL的图形渲染方法、装置及系统
CN113918258B (zh) * 2021-09-30 2023-12-19 北京达佳互联信息技术有限公司 页面滚动处理方法、装置、终端以及存储介质
CN114257868A (zh) * 2021-12-23 2022-03-29 中国农业银行股份有限公司 视频制作方法、装置、设备和存储介质
CN114527980A (zh) * 2022-02-25 2022-05-24 京东方科技集团股份有限公司 一种显示渲染方法、装置、电子设备和可读存储介质
CN115268720A (zh) * 2022-08-16 2022-11-01 北京尽微致广信息技术有限公司 一种页面渲染方法、装置、设备及可读存储介质
CN117667278A (zh) * 2022-08-31 2024-03-08 华为技术有限公司 一种界面显示方法、设备及系统

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6292194B1 (en) * 1995-08-04 2001-09-18 Microsoft Corporation Image compression method to reduce pixel and texture memory requirements in graphics applications
CN101887595A (zh) * 2009-05-14 2010-11-17 武汉如临其境科技创意有限公司 基于四叉树索引的三维数字地球空间数据组织渲染方法
CN103198505A (zh) * 2013-04-23 2013-07-10 四三九九网络股份有限公司 一种基于gpu渲染游戏角色及角色换装的方法和装置

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH11195132A (ja) * 1997-10-31 1999-07-21 Hewlett Packard Co <Hp> テクスチャマッピング用バッファ、３次元グラフィクス処理装置、３次元グラフィクス処理システム、３次元グラフィクス処理方法および処理プログラムが記憶された記憶媒体
US9418171B2 (en) * 2008-03-04 2016-08-16 Apple Inc. Acceleration of rendering of web-based content
CN101895622A (zh) * 2009-05-21 2010-11-24 陈武雄 一种移动设备浏览网页的方法及系统
CN101777066B (zh) * 2009-12-31 2013-08-28 优视科技有限公司 一种用于移动通讯设备终端的网页页面渲染浏览系统及其应用方法
CN101968887A (zh) * 2010-09-08 2011-02-09 东莞电子科技大学电子信息工程研究院 一种富媒体场景的局部渲染方法
CN101986289B (zh) * 2010-11-03 2014-08-13 中兴通讯股份有限公司 一种提高浏览器页面渲染速度的方法和装置
US20130007575A1 (en) * 2011-06-29 2013-01-03 Google Inc. Managing Map Data in a Composite Document
US9514242B2 (en) * 2011-08-29 2016-12-06 Vmware, Inc. Presenting dynamically changing images in a limited rendering environment
US9607420B2 (en) * 2011-11-14 2017-03-28 Microsoft Technology Licensing, Llc Animations for scroll and zoom
CN103678631B (zh) * 2013-12-19 2016-10-05 华为技术有限公司 页面渲染方法及装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6292194B1 (en) * 1995-08-04 2001-09-18 Microsoft Corporation Image compression method to reduce pixel and texture memory requirements in graphics applications
CN101887595A (zh) * 2009-05-14 2010-11-17 武汉如临其境科技创意有限公司 基于四叉树索引的三维数字地球空间数据组织渲染方法
CN103198505A (zh) * 2013-04-23 2013-07-10 四三九九网络股份有限公司 一种基于gpu渲染游戏角色及角色换装的方法和装置

Also Published As

Publication number Publication date
KR20150091132A (ko) 2015-08-07
CN103678631A (zh) 2014-03-26
US20150279058A1 (en) 2015-10-01
EP2924590A1 (en) 2015-09-30
WO2015090064A1 (zh) 2015-06-25
EP2924590A4 (en) 2016-01-13

Similar Documents

Publication Publication Date Title
CN103678631B (zh) 页面渲染方法及装置
US10497086B2 (en) Methods and apparatuses for providing a hardware accelerated web engine
US20200147491A1 (en) Method for rendering game, and method, apparatus and device for generating game resource file
CN104850388B (zh) 网页绘制方法及装置
CN106095437B (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
CN105528207A (zh) 一种虚拟现实系统及其中显示安卓应用图像的方法和装置
CN105096368B (zh) 三维对象处理方法和相关装置
CN104268229B (zh) 一种基于多进程浏览器的资源获得方法及装置
CN105335410B (zh) 一种基于合成渲染加速的网页更新方法和装置
CN106021421A (zh) 一种加速网页渲染的方法及装置
CN105824874A (zh) 移动终端及其网页渲染方法、装置
JP2023033496A (ja) 情報処理装置、情報処理プログラム及び情報処理方法
CN108228121A (zh) 一种浏览器分屏的方法、装置及移动终端
CN111476858B (zh) 一种基于WebGL的2d引擎渲染方法、装置及设备
CN112614210A (zh) 工程图纸显示方法、系统及相关装置
CN116503529A (zh) 渲染、3d画面控制方法、电子设备和计算机可读存储介质
CN111460342A (zh) 页面的渲染展示方法、装置、电子设备及计算机存储介质
CN106569816A (zh) 一种渲染方法及装置
CN106548501B (zh) 一种图像绘制方法及设备
CN112434267B (zh) 一种生成盲水印的方法、装置、介质和设备
CN107038176B (zh) 网络图页面渲染方法、装置及设备
CN111192339B (zh) 地理位置数据的渲染方法及装置
CN114758054A (zh) 光斑添加方法、装置、设备及存储介质
CN114637937A (zh) 页面显示方法、装置、电子设备及计算机可读存储介质
CN110399580A (zh) 浏览器中显示目标样式的方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C14 Grant of patent or utility model
GR01 Patent grant