CN105335410A - 一种基于合成渲染加速的网页更新方法和装置 - Google Patents

一种基于合成渲染加速的网页更新方法和装置 Download PDF

Info

Publication number
CN105335410A
CN105335410A CN201410373650.0A CN201410373650A CN105335410A CN 105335410 A CN105335410 A CN 105335410A CN 201410373650 A CN201410373650 A CN 201410373650A CN 105335410 A CN105335410 A CN 105335410A
Authority
CN
China
Prior art keywords
web page
attribute
thread
layer
synthesis
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.)
Granted
Application number
CN201410373650.0A
Other languages
English (en)
Other versions
CN105335410B (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.)
Alibaba China Co Ltd
Original Assignee
Ucweb Inc
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 Ucweb Inc filed Critical Ucweb Inc
Priority to CN201410373650.0A priority Critical patent/CN105335410B/zh
Priority to PCT/CN2015/081940 priority patent/WO2016015527A1/zh
Publication of CN105335410A publication Critical patent/CN105335410A/zh
Application granted granted Critical
Publication of CN105335410B publication Critical patent/CN105335410B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor

Abstract

本申请实施例公开了一种基于合成渲染加速的网页更新方法及装置。通过在合成线程的网页快照和内核线程的网页快照之间建立同步更新的机制,当浏览器运行JavaScript动态代码改变网页元素中对应与图层属性的CSS属性时,内核线程相应地更新其当前的网页快照中网页元素所在图层的属性,合成线程根据内核线程更新后的网页快照,相应地更新合成线程中当前的网页快照中对应图层的属性,然后根据更新后当前的网页快照进行合成操作,完成网页的更新。本申请实施例提供的技术方案节省了内核线程的重排版和网页快照拷贝,以及合成线程的预绘制步骤,提高了网页更新的处理效率和网页动态显示性能。

Description

一种基于合成渲染加速的网页更新方法和装置
技术领域
本发明涉及网页渲染技术领域,尤其涉及一种基于合成渲染加速的网页更新方法和装置。
背景技术
现阶段浏览器一般都采用多线程的渲染加速架构,以充分利用多核CPU(CentralProcessingUnit,中央处理器)和GPU(GraphicProcessingUnit,图形处理器)的硬件性能,和避免UI(UserInterface,用户界面)线程阻塞导致用户操作不流畅。其中,合成渲染加速是使用较多的渲染加速架构,通过将网页划分成多个图层来提升渲染性能。在合成渲染加速架构下,浏览器将所有的网页元素按照预定的规则分组,使其从属于某一特定图层,将所有图层以树状结构组织成图层树,网页快照则由图层树构成。
图层树中,图层包括内容和属性两部分。图层内容为从属于图层的所有网页元素的绘制描述。图层属性(即图层的属性)则跟其包含的网页元素的某些CSS属性对应,网页元素图层分组规则会保证从属于同一图层的所有网页元素在这些CSS属性上的值都是一样的,所以图层某一属性的值就来自于从属于它的网页元素跟这个图层属性相对应的CSS属性的值。例如:图层的CSSTransform(几何变换)属性、CSSAnimation(动画)属性和CSSOpacity(不透明度)属性跟图层包含的网页元素的这些CSS属性形成映射关系。合成渲染加速架构下的渲染加速引擎通常包括两个主要的线程:内核线程和合成线程。内核线程主要负责HTML(HyperTextMarkuplanguage,超文本标记语言)和CSS脚本的解析、JavaScript动态代码的执行和网页的排版等任务,内核线程持有当前网页的快照,在每次重新排版后更新该网页快照,并拷贝更新后的快照发送给合成线程。合成线程则负责预绘制从内核线程接收到的网页快照,所述预绘制为将每个图层的内容(绘制描述)光栅化为像素并存入缓存中,然后合成线程再根据预绘制得到的像素缓存和图层的属性合成为网页缓存输出至当前显示窗口的帧缓冲存储器(FrameBuffer,简称帧缓存)。显示控制器读取帧缓存则可以将网页呈现到屏幕上。
现在网页在运行时会通过JavaScript代码不断动态改变网页元素的CSS属性,其中一部分CSS属性跟网页元素所属图层的图层属性相对应,例如CSSTransform属性、CSSAnimation属性和CSSOpacity属性,一般而言这些属性的变更不会导致元素内容的变化,也就是说这些属性不影响元素是如何预绘制的。在现有的合成渲染加速架构下,在网页加载完毕以及首次排版和预绘制完成后,当图层的内容和属性发生变化需要更新网页时,内核线程都要重新排版生成新的网页快照,拷贝新的网页快照发送至合成线程,而合成线程则重新进行预绘制等处理步骤。但前述跟网页元素部分CSS属性相对应的图层属性只影响图层内容的展示,对网页排版无影响,也不影响图层光栅化的结果,上述需要重新排版和重新预绘制的网页更新过程会占据很多的系统资源,导致更新效率和速度低,由于网页更新的效率和速度低,也使得网页动态效果显示的帧率低,网页动态显示性能不佳。
发明内容
为克服相关技术中运行JavaScript动态代码使得网页元素的与图层属性对应的层叠样式表属性发生变化时,导致的网页更新效率低的问题,本申请提供一种基于合成渲染加速的网页更新方法和装置。
根据本申请实施例的第一方面,提供一种基于合成渲染加速的网页更新方法,包括:
当JavaScript动态代码使网页元素的与图层属性对应的层叠样式表属性发生变化时,内核线程更新源网页快照中对应网页元素所在图层的属性,所述源网页快照为内核线程中当前的网页快照;
内核线程向合成线程发送同步更新请求;
接收到所述同步更新请求后,合成线程根据所述源网页快照中图层的属性同步更新合成线程中当前的网页快照中对应图层的属性。
其中,所述与图层属性对应的层叠样式表属性,其变更不会导致网页元素内容的变化,不影响网页元素的预绘制。
其中,所述层叠样式表属性包括层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性。
可选的,所述根据根据源网页快照中图层的属性同步更新当前网页快照中对应图层的属性,包括:
比较当前网页快照的每个图层与源网页快照的每个对应图层,合成线程中当前的网页快照中存在与所述源网页快照中对应图层的属性不同的图层时,设置所述图层的属性与源网页快照中对应图层的属性相同。
可选的,所述根据所述源网页快照中图层的属性同步更新合成线程中当前的网页快照中对应图层的属性,包括:
比较合成线程中当前的网页快照中设置有层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性至少其中之一的网页元素,与所述源网页快照中对应的设置有层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性至少其中之一的网页元素;
当合成线程中当前的网页快照中存在几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性不同的网页元素时,设置所述网页元素所在图层的属性与所述源网页快照中对应网页元素的几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性属性相同。
所述基于合成渲染加速的网页更新方法,在根据所述源网页快照中图层的层叠样式表属性同步更新合成线程中当前的网页快照中对应的图层的层叠样式表属性之后,还包括:
合成线程根据更新后的当前网页快照进行合成操作生成网页缓存。
根据本申请实施例的第二方面,提供一种基于合成渲染加速的网页更新装置,包括:
内核线程快照更新模块,用于在内核线程中,当JavaScript动态代码使网页元素的与图层属性对应的层叠样式表属性发生变化时,内核线程更新源网页快照中对应网页元素所在图层的属性,所述源网页快照为内核线程中当前的网页快照;
内核线程请求发送模块,用于在内核线程中向合成线程发送同步更新请求消息;
合成线程请求接收模块,用于在合成线程中接收所述同步更新请求;
合成线程快照更新模块,用于在合成线程中根据所述源网页快照中图层的属性同步更新合成线程中当前的网页快照中对应图层的属性。
可选的,所述合成线程快照更新模块,包括:
内核线程访问模块,用于访问内核线程;
图层比较子模块,用于通过内核线程访问模块比较合成线程中当前的网页快照的每个图层与源网页快照的每个对应图层;
第一判断子模块,用于判断合成线程中当前的网页快照中每个图层的属性与所述源网页快照中每个对应图层的属性是否相同;
第一更新子模块,用于合成线程中当前的网页快照中存在与所述源网页快照中对应图层的属性不同的图层时,设置所述图层的属性与源网页快照中对应图层的属性相同。
可选的,所述合成线程快照更新模块,包括:
内核线程访问模块,用于访问内核线程;
第一查找子模块,用于查找合成线程中当前的网页快照中设置有层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性至少其中之一的网页元素;
第二查找子模块,用于通过访问内核线程模块查找源网页快照中设置有层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性至少其中之一的网页元素;
元素属性比较模块,用于比较第一查找子模块查找到的网页元素的层叠样式表属性和第二查找子模块查找到的网页元素的层叠样式表属性;
第二判断子模块,用于基于元素属性比较模块判断两个进行比较的网页元素的层叠样式表属性是否相同;
第二更新子模块,用于根据第二判断子模块的判断结果,当合成线程中当前的网页快照中存在层叠样式表几何变换属性、层叠样式表动画属性或层叠样式表不透明度属性不同的网页元素时,设置合成线程中当前的网页快照中所述网页元素所在图层的属性与源网页快照中对应网页元素的层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性相同。
所述基于合成渲染加速的网页更新装置,还包括:
合成模块,用于在合成线程中根据更新后的当前的网页快照进行合成操作生成网页缓存。
本申请实施例提供的技术方案,通过在合成线程的网页快照和内核线程的网页快照之间建立同步更新的机制,当浏览器运行JavaScript动态代码改变网页元素的与图层属性对应的层叠样式表属性时,内核线程只用相应地更新其当前的网页快照中网页元素所在图层的属性,并向合成线程发送同步更新请求。合成线程接收到同步更新请求后,根据内核线程更新后的网页快照,相应地更新合成线程中当前的网页快照中对应图层的属性,然后根据更新后当前的网页快照进行合成操作,即可以完成网页的更新。本申请实施例提供的技术方案可以包括以下有益效果:避免了内核线程的重排版和网页快照拷贝,以及避免了合成线程的预绘制步骤,提高了浏览器网页更新的处理效率和速度,由于更新效率和速度加快,相应地增加了网页动态效果显示的帧率,提高了网页动态显示性能。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本申请。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,对于本领域普通技术人员而言,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1为本申请一示例性实施例示出的一种基于合成渲染加速的网页更新方法的流程示意图。
图2为本申请一示例性实施例示出的一种基于合成渲染加速的网页更新装置的框图。
具体实施方式
这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
为了全面理解本申请,在以下详细描述中提到了众多具体的细节,但是本领域技术人员应该理解,本申请可以无需这些具体细节而实现。在其他实施例中,不详细描述公知的方法、过程、装置和模块,以免不必要地导致实施例模糊。
图1为本申请一示例性实施例示出的一种基于合成渲染加速的网页更新方法的流程示意图。如图1所示,所述方法包括:
在步骤S101中,当JavaScript动态代码使网页元素的与图层属性对应的CSS属性发生变化时,内核线程更新源网页快照中对应网页元素所在图层的属性。
其中,所述源网页快照为内核线程中当前的网页快照,所述与图层属性对应的CSS属性包括CSSTransform属性、CSSAnimation属性和CSSOpacity属性,其变更不会导致网页元素内容的变化,不影响网页元素的预绘制。
在合成渲染加速架构下,在网页加载完毕、内核线程的首次排版和合成线程的首次预绘制及合成操作完成后,当内核线程执行JavaScript动态代码,改变了一些网页元素的CSS属性后,内核线程根据被改变的网页元素的CSS属性,更新源网页快照中对应图层的属性,所述CSS属性包括CSSTransform属性、CSSAnimation属性和CSSOpacity属性。所述对应图层为被改变的网页元素在网页快照中所在的图层,所述更新为设置网页快照中对应图层的属性与网页元素对应的被JavaScript动态代码改变的CSS属性相同,例如,JavaScript动态代码改变了某个网页元素的CSSTransform属性,则相应的更新网页元素所在图层的CSSTransform属性,以此类推。浏览器的图层分组规则会保证从属于同一图层的所有网页元素中与图层属性对应的CSS属性都相同,图层属性与从属于它的网页元素的与图层属性对应的CSS属性相同,所以当网页元素的CSS属性被JavaScript动态代码更改时,内核线程找到所述网页元素在网页快照中所在的图层,设置所述图层的属性与所述网页元素被改变的与图层属性对应的CSS属性相同,从而更新所述图层属性,相应地也更新了网页快照。内核线程更新完毕后,源网页快照即为更新后的当前的网页快照。
由于图层属性只是对图层内容展示的规定,使网页更生动,例如文本或图片的几何变换、不透明度和动画效果,图层属性不影响图层内容,也不影响排版结果,因此当JavaScript动态代码改变网页元素的CSS属性后,步骤S101只需对发生变化的网页元素在网页快照中所在图层的属性进行更新,不需对整个网页重新排版生成新的网页快照,省略了排版步骤,节省了线程处理资源。
在步骤S102中,内核线程向合成线程发送同步更新请求;
内核线程可以使用线程通信中的消息传递方式,向合成线程发生同步更新请求。
在步骤S103中,合成线程接收到所述同步更新请求后,根据源网页快照中图层的属性同步更新合成线程当前的网页快照中对应图层的属性。
其中,所述根据源网页快照中图层的属性同步更新当前网页快照中对应图层的属性,在一种可能的实施方式中,为:合成线程访问内核线程,遍历合成线程中当前网页快照的每个图层和源网页快照中每个对应的图层,比较合成线程中当前网页快照的每个图层与内核线程中源网页快照中每个对应的图层。当存在属性不同的图层时,即合成线程中当前网页快照的某个图层与源网页快照中对应图层的属性不同时,设置合成线程中所述图层的属性与源网页快照中对应图层的属性相同。
其中,合成线程中当前的网页快照为首次预绘制之后合成线程持有的网页快照,由于预绘制只针对图层内容进行,因此图层属性的变化不影响图层预绘制的结果(预绘制生成的像素缓存)。当合成线程接收到内核线程发送的同步更新请求后,保持当前的网页快照的图层内容不变,只需更新合成线程中当前的网页快照的图层属性。然后根据已经生成的预绘制的结果和更新后的图层属性进行合成操作,便可以完成网页缓存的更新,达到网页更新的目的。
其中,合成线程访问内核线程可以使用线程之间数据共享的方式,即内核线程共享其当前的网页快照,供合成线程访问。
所述根据源网页快照中对应图层的属性同步更新合成线程当前的网页快照中对应图层的属性,在另一种可能的实施方式中,为:比较合成线程当前的网页快照中设置有与图层属性对应的CSS属性的网页元素,与源网页快照中对应的设置有和图层属性对应的CSS属性的网页元素,当进行所述比较后,如果参与比较的两个网页元素中和图层属性对应的CSS属性不同,则设置所述网页元素所在图层的属性与源网页快照中对应网页元素的和图层属性对应的CSS属性相同,如果参与比较的两个网页元素中和图层属性对应的CSS属性相同,则不更新。
更进一步,所述根据源网页快照中对应图层的属性同步更新合成线程当前的网页快照中对应图层的属性,在又一种可能的实施方式中,为:比较合成线程中当前的网页快照中设置有CSSTransform属性、CSSAnimation属性和CSSOpacity属性至少其中之一的网页元素,与源网页快照中对应的设置有CSSTransform属性、CSSAnimation属性和CSSOpacity属性至少其中之一的网页元素,当存在CSSTransform属性、CSSAnimation属性或CSSOpacity属性不同的网页元素时,即设置所述网页元素所在图层的属性与源网页快照中对应网页元素的CSSTransform属性、CSSAnimation属性和CSSOpacity属性相同。
其中,由于并非所有图层都有属性,也就是说,一些图层中没有图层内容的展示规定,例如,当一个图层仅仅只是用于展示无透明度的静态文本时,或者当一个图层中所有网页元素都没有设置CSSTransform属性、CSSAnimation属性和CSSOpacity属性时,图层的属性可能为空。通常对动态效果要求低的网页,属性为空的图层的比例会很高,因此可以不用对每个图层都进行比较,而是比较合成线程的当前网页快照中与源网页快照中设置有与图层属性对应的CSS属性的网页元素。更进一步的,由于通常图层属性为CSSTransform属性、CSSAnimation属性和CSSOpacity属性,因此可以比较合成线程当前的网页快照中与源网页快照中设置有CSSTransform属性、CSSAnimation属性和CSSOpacity属性至少其中之一的网页元素。比较设置有与图层属性对应的CSS属性的网页元素,相比比较每个图层,可以更好地提高更新速度和效率,节省线程处理资源。
在合成线程更新其当前网页快照后,合成线程根据更新后当前的网页快照的图层属性,和预绘制生成的像素缓存,进行合成操作生成网页缓存输出至帧缓存,完成网页的更新。
本申请实施例提供的基于合成渲染加速的网页更新方法,当网页元素中与图层属性对应的CSS属性被JavaScript动态代码改变时,内核线程只需更新网页元素在内核线程当前的网页快照中对应的图层的属性,不需重新排版,同时,合成线程只需相应地更新其当前网页快照对应图层的属性,不需要再重新进行预绘制操作。相比相关技术中的网页更新方法,可以省略内核线程重新排版和拷贝快照的过程,以及省略合成线程重新绘制的过程,加快网页更新速度,提高网页更新效率,相应地,可以增加网页动态效果显示的帧率,提高网页动态显示性能。以使用JavaScript不断改变网页元素的CSSTransform属性来形成惯性滚动的动态效果为例,本申请实施例提供的技术方案比相关技术中的方案在动态效果显示的帧率上可以提升20~30%左右,使惯性滚动的效果更流畅。
通过以上的方法实施例的描述,所属领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,并存储在一个存储介质中,包括若干指令用以使得一台智能设备执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:只读存储器(ROM)、随机存取存储器(RAM)、磁碟或者光盘等各种可以存储数据和程序代码的介质。
图2为本申请一示例性实施例示出的一种基于渲染加速的网页更新装置的框图。如图2所示,所述装置可以包括:
内核线程快照更新模块U201,用于在内核线程中,当JavaScript动态代码使网页元素的与图层属性对应的层叠样式表属性发生变化时,内核线程更新源网页快照中对应网页元素所在图层的属性,
其中,所述源网页快照为内核线程中当前的网页快照,所述与图层属性对应的CSS属性包括CSSTransform属性、CSSAnimation属性和CSSOpacity属性,其变更不会导致网页元素内容的变化,不影响网页元素的预绘制;
内核线程请求发送模块U202,与U201连接,用于在内核线程中向合成线程发送同步更新请求消息;
合成线程请求接收模块U210,用于在合成线程中接收所述同步更新请求,与内核线程请求发送模块U202进行线程间通信,通信方式可以使用消息传递方式,图2中以虚线表示U210和U202之间的通信关系;
合成线程快照更新模块U220,与U210连接,用于在合成线程中根据源网页快照中图层的属性同步更新合成线程中当前的网页快照中对应图层的属性。
所述的基于渲染加速的网页更新装置,还包括:
合成模块U230,与U220连接,用于在合成线程中根据更新后合成线程中当前的网页快照进行合成操作生成网页缓存
其中,所述合成线程快照更新模块U220,在一种可能的实施方式中,可以包括:
内核线程访问模块,用于访问内核线程;
图层比较子模块,用于通过内核线程访问模块比较合成线程中当前的网页快照的每个图层与源网页快照的每个对应图层;
第一判断子模块,用于判断合成线程中当前的网页快照中每个图层的属性与所述源网页快照中每个对应图层的属性是否相同;
第一更新子模块,用于合成线程中当前的网页快照中存在与所述源网页快照中对应图层的属性不同的图层时,设置所述图层的属性与源网页快照中对应图层的属性相同。
所述合成线程快照更新模块,在另一种可能的实施方式中,可以包括:
内核线程访问模块,用于访问内核线程;
第一查找子模块,用于查找当前网页快照中设置有CSSTransform属性、CSSAnimation属性和CSSOpacity属性至少其中之一的网页元素;
第二查找子模块,用于通过访问内核线程模块查找源网页快照中设置有CSSTransform属性、CSSAnimation属性和CSSOpacity属性至少其中之一的网页元素;
元素属性比较模块,用于比较第一查找子模块查找到的网页元素的CSS属性和第二查找子模块查找到的网页元素的CSS属性;
第二判断子模块,用于基于元素属性比较模块判断两个进行比较的网页元素的CSS属性是否相同;
第二更新子模块,用于当合成线程中当前的网页快照中存在CSS属性不同的网页元素时,设置合成线程当前的网页快照中所述网页元素所在图层的属性与源网页快照中对应网页元素的与图层属性对应的CSS属性相同。
为了描述的方便,描述以上装置时以功能分为各种模块分别描述。当然,在实施本申请时可以把各模块的功能在同一个或多个软件和/或硬件中实现。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于装置实施例而言,由于其基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。以上所描述的装置及系统实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
需要说明的是,在本文中,诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者逆序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、装置或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、装置或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、装置或者设备中还存在另外的相同要素。
以上所述仅是本申请的具体实施方式,使本领域技术人员能够理解或实现本申请。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的,本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下,在其它实施例中实现。因此,本申请将不会被限制于本文所示的这些实施例,而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种基于合成渲染加速的网页更新方法,其特征在于,包括:
当JavaScript动态代码使网页元素的与图层属性对应的层叠样式表属性发生变化时,内核线程更新源网页快照中对应网页元素所在图层的属性,所述源网页快照为内核线程中当前的网页快照;
内核线程向合成线程发送同步更新请求;
接收到所述同步更新请求后,合成线程根据所述源网页快照中图层的属性同步更新合成线程中当前的网页快照中对应图层的属性。
2.如权利要求1所述的基于合成渲染加速的网页更新方法,其特征在于,所述与图层属性对应的层叠样式表,其变更不会导致网页元素内容的变化,不影响网页元素的预绘制。
3.如权利要求2所述的基于合成渲染加速的网页更新方法,其特征在于,
所述与图层属性对应的层叠样式表属性包括层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性。
4.如权利要求3所述的基于合成渲染加速的网页更新方法,其特征在于,所述根据根据源网页快照中图层的属性同步更新当前网页快照中对应图层的属性,包括:
比较合成线程中当前的网页快照的每个图层与源网页快照的每个对应图层,当合成线程中当前的网页快照中存在与所述源网页快照中对应图层的属性不同的图层时,设置所述图层的属性与源网页快照中对应图层的属性相同。
5.如权利要求3所述的基于合成渲染加速的网页更新方法,其特征在于,所述根据所述源网页快照中图层的属性同步更新合成线程中当前的网页快照中对应图层的属性,包括:
比较合成线程中当前的网页快照中设置有层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性至少其中之一的网页元素,与所述源网页快照中对应的设置有层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性至少其中之一的网页元素;
当存在几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性不同的网页元素时,设置合成线程中当前的网页快照中所述网页元素所在图层的属性与所述源网页快照中对应网页元素的几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性属性相同。
6.如权利要求1-5任一所述的基于合成渲染加速的网页更新方法,其特征在于,在根据所述源网页快照中图层的层叠样式表属性同步更新合成线程中当前的网页快照中对应的图层的层叠样式表属性之后,还包括:
合成线程根据更新后合成线程中当前的网页快照进行合成操作生成网页缓存。
7.一种基于合成渲染加速的网页更新装置,其特征在于,包括:
内核线程快照更新模块,用于在内核线程中,当JavaScript动态代码使网页元素的与图层属性对应的层叠样式表属性发生变化时,内核线程更新源网页快照中对应网页元素所在图层的属性,所述源网页快照为内核线程中当前的网页快照;
内核线程请求发送模块,用于在内核线程中向合成线程发送同步更新请求消息;
合成线程请求接收模块,用于在合成线程中接收所述同步更新请求;
合成线程快照更新模块,用于在合成线程中根据所述源网页快照中图层的属性同步更新合成线程中当前的网页快照中对应图层的属性。
8.如权利要求7所述的基于合成渲染加速的网页更新装置,其特征在于,所述合成线程快照更新模块,包括:
内核线程访问模块,用于访问内核线程;
图层比较子模块,用于通过内核线程访问模块比较合成线程中当前的网页快照的每个图层与源网页快照的每个对应图层;
第一判断子模块,用于判断合成线程中当前的网页快照中每个图层的属性与所述源网页快照中每个对应图层的属性是否相同;
第一更新子模块,用于当合成线程中当前的网页快照中存在与所述源网页快照中对应图层的属性不同的图层时,设置所述图层的属性与源网页快照中对应图层的属性相同。
9.如权利要求7所述的基于合成渲染加速的网页更新装置,其特征在于,所述合成线程快照更新模块,包括:
内核线程访问模块,用于访问内核线程;
第一查找子模块,用于查找合成线程中当前的网页快照中设置有层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性至少其中之一的网页元素;
第二查找子模块,用于通过访问内核线程模块查找源网页快照中设置有层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性至少其中之一的网页元素;
元素属性比较模块,用于比较第一查找子模块查找到的网页元素的层叠样式表属性和第二查找子模块查找到的网页元素的层叠样式表属性;
第二判断子模块,用于基于元素属性比较模块判断两个进行比较的网页元素的层叠样式表属性是否相同;
第二更新子模块,用于根据第二判断子模块的判断结果,当存在层叠样式表几何变换属性、层叠样式表动画属性或层叠样式表不透明度属性不同的网页元素时,设置合成线程中当前的网页快照中所述网页元素所在图层的属性与源网页快照中对应网页元素的层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性相同。
10.如权利要求7-9任一所述的基于合成渲染加速的网页更新装置,其特征在于,还包括:
合成模块,用于在合成线程中根据更新后的当前的网页快照进行合成操作生成网页缓存。
CN201410373650.0A 2014-07-31 2014-07-31 一种基于合成渲染加速的网页更新方法和装置 Active CN105335410B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201410373650.0A CN105335410B (zh) 2014-07-31 2014-07-31 一种基于合成渲染加速的网页更新方法和装置
PCT/CN2015/081940 WO2016015527A1 (zh) 2014-07-31 2015-06-19 基于合成渲染加速的网页更新方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410373650.0A CN105335410B (zh) 2014-07-31 2014-07-31 一种基于合成渲染加速的网页更新方法和装置

Publications (2)

Publication Number Publication Date
CN105335410A true CN105335410A (zh) 2016-02-17
CN105335410B CN105335410B (zh) 2017-06-16

Family

ID=55216741

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410373650.0A Active CN105335410B (zh) 2014-07-31 2014-07-31 一种基于合成渲染加速的网页更新方法和装置

Country Status (2)

Country Link
CN (1) CN105335410B (zh)
WO (1) WO2016015527A1 (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106325875A (zh) * 2016-08-29 2017-01-11 浪潮软件集团有限公司 一种网页ui界面与网页设计图的对比方法
CN106611435A (zh) * 2016-12-22 2017-05-03 广州华多网络科技有限公司 动画处理方法和装置
CN107292945A (zh) * 2016-03-31 2017-10-24 阿里巴巴集团控股有限公司 视频图像的图层渲染处理方法及其系统
CN107391128A (zh) * 2017-07-07 2017-11-24 北京小米移动软件有限公司 监控虚拟文件对象模型vdom的方法和装置
CN108287836A (zh) * 2017-01-09 2018-07-17 腾讯科技(深圳)有限公司 一种资源缓存方法及装置
CN109445840A (zh) * 2018-11-07 2019-03-08 北京字节跳动网络技术有限公司 一种网页的动态更新方法、装置、电子设备及存储介质
CN110288689A (zh) * 2019-06-20 2019-09-27 北京三快在线科技有限公司 对电子地图进行渲染的方法和装置
CN112988661A (zh) * 2021-02-19 2021-06-18 金蝶软件(中国)有限公司 一种余额表更新方法及其相关设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101847269A (zh) * 2009-03-27 2010-09-29 上海科泰世纪科技有限公司 多图层动画渲染系统及方法
US20120062576A1 (en) * 2010-09-13 2012-03-15 Nokia Corporation Method and apparatus for rendering content
CN103678631A (zh) * 2013-12-19 2014-03-26 华为技术有限公司 页面渲染方法及装置

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8234564B2 (en) * 2008-03-04 2012-07-31 Apple Inc. Transforms and animations of web-based content
CN103677491B (zh) * 2012-09-03 2018-11-13 百度在线网络技术(北京)有限公司 一种用于渲染网页的方法和装置
CN103473347B (zh) * 2013-09-24 2017-01-11 北京大学 一种基于网页相似度的浏览器渲染优化方法

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101847269A (zh) * 2009-03-27 2010-09-29 上海科泰世纪科技有限公司 多图层动画渲染系统及方法
US20120062576A1 (en) * 2010-09-13 2012-03-15 Nokia Corporation Method and apparatus for rendering content
CN103678631A (zh) * 2013-12-19 2014-03-26 华为技术有限公司 页面渲染方法及装置

Cited By (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107292945A (zh) * 2016-03-31 2017-10-24 阿里巴巴集团控股有限公司 视频图像的图层渲染处理方法及其系统
CN107292945B (zh) * 2016-03-31 2021-01-26 阿里巴巴集团控股有限公司 视频图像的图层渲染处理方法及其系统
CN106325875A (zh) * 2016-08-29 2017-01-11 浪潮软件集团有限公司 一种网页ui界面与网页设计图的对比方法
CN106611435A (zh) * 2016-12-22 2017-05-03 广州华多网络科技有限公司 动画处理方法和装置
CN106611435B (zh) * 2016-12-22 2022-11-11 广州方硅信息技术有限公司 动画处理方法和装置
CN108287836B (zh) * 2017-01-09 2022-09-13 腾讯科技(深圳)有限公司 一种资源缓存方法及装置
CN108287836A (zh) * 2017-01-09 2018-07-17 腾讯科技(深圳)有限公司 一种资源缓存方法及装置
CN107391128A (zh) * 2017-07-07 2017-11-24 北京小米移动软件有限公司 监控虚拟文件对象模型vdom的方法和装置
CN107391128B (zh) * 2017-07-07 2020-07-28 北京小米移动软件有限公司 监控虚拟文件对象模型vdom的方法和装置
CN109445840A (zh) * 2018-11-07 2019-03-08 北京字节跳动网络技术有限公司 一种网页的动态更新方法、装置、电子设备及存储介质
CN109445840B (zh) * 2018-11-07 2021-12-10 北京字节跳动网络技术有限公司 一种网页的动态更新方法、装置、电子设备及存储介质
CN110288689A (zh) * 2019-06-20 2019-09-27 北京三快在线科技有限公司 对电子地图进行渲染的方法和装置
CN112988661A (zh) * 2021-02-19 2021-06-18 金蝶软件(中国)有限公司 一种余额表更新方法及其相关设备
CN112988661B (zh) * 2021-02-19 2024-03-19 金蝶软件(中国)有限公司 一种余额表更新方法及其相关设备

Also Published As

Publication number Publication date
WO2016015527A1 (zh) 2016-02-04
CN105335410B (zh) 2017-06-16

Similar Documents

Publication Publication Date Title
CN105335410A (zh) 一种基于合成渲染加速的网页更新方法和装置
US10497086B2 (en) Methods and apparatuses for providing a hardware accelerated web engine
CN110096277B (zh) 一种动态页面展示方法、装置、电子设备及存储介质
US11144711B2 (en) Webpage rendering method, device, electronic apparatus and storage medium
US20170177547A1 (en) Dynamic Content Layout Generator
US20150220496A1 (en) Dynamic sprite based theme switching
CN102955854A (zh) 一种基于html5协议的网页展现方法及装置
US9916388B2 (en) Simplified website creation, configuration, and customization system
CN103631865B (zh) 网页生成方法及设备
CN105096368B (zh) 三维对象处理方法和相关装置
CN103617191A (zh) 使用硬件加速实现浏览器渲染的方法和浏览器
CN106095437A (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
US20170351644A1 (en) Advertisement Filtering Method and Device
US20150149888A1 (en) Systems and methods for executing aspects of a document
CN104809123A (zh) 一种网页渲染方法及系统
US8881002B2 (en) Trial based multi-column balancing
US9430808B2 (en) Synchronization points for state information
EP3008697B1 (en) Coalescing graphics operations
CN103914299A (zh) 一种Flash硬件加速控制方法及系统
CN102915349A (zh) 在浏览器中显示网页的方法及在浏览器中显示的网页组件
CN109508434B (zh) 区块生成方法、网页渲染方法及装置
KR102151364B1 (ko) 애니메이션 생성 방법 및 장치
US20160342570A1 (en) Document presentation qualified by conditions evaluated on rendering
CN112417346A (zh) 渲染方法、装置、电子设备及存储介质
US10437911B2 (en) Fast bulk z-order for graphic elements

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
TR01 Transfer of patent right

Effective date of registration: 20200421

Address after: 310052 room 508, floor 5, building 4, No. 699, Wangshang Road, Changhe street, Binjiang District, Hangzhou City, Zhejiang Province

Patentee after: Alibaba (China) Co.,Ltd.

Address before: 100083, No. 28, Fu Cheng Road, 12, Beijing, Haidian District

Patentee before: UC MOBILE Ltd.

TR01 Transfer of patent right