[发明专利]一种基于合成渲染加速的网页更新方法和装置

说明书

技术领域

本发明涉及网页渲染技术领域，尤其涉及一种基于合成渲染加速的网页更新方法和装置。

背景技术

现阶段浏览器一般都采用多线程的渲染加速架构，以充分利用多核CPU(Central Processing Unit，中央处理器)和GPU(Graphic Processing Unit，图形处理器)的硬件性能，和避免UI(User Interface，用户界面)线程阻塞导致用户操作不流畅。其中，合成渲染加速是使用较多的渲染加速架构，通过将网页划分成多个图层来提升渲染性能。在合成渲染加速架构下，浏览器将所有的网页元素按照预定的规则分组，使其从属于某一特定图层，将所有图层以树状结构组织成图层树，网页快照则由图层树构成。

图层树中，图层包括内容和属性两部分。图层内容为从属于图层的所有网页元素的绘制描述。图层属性(即图层的属性)则跟其包含的网页元素的某些CSS属性对应，网页元素图层分组规则会保证从属于同一图层的所有网页元素在这些CSS属性上的值都是一样的，所以图层某一属性的值就来自于从属于它的网页元素跟这个图层属性相对应的CSS属性的值。例如：图层的CSS Transform(几何变换)属性、CSS Animation(动画)属性和CSS Opacity(不透明度)属性跟图层包含的网页元素的这些CSS属性形成映射关系。合成渲染加速架构下的渲染加速引擎通常包括两个主要的线程：内核线程和合成线程。内核线程主要负责HTML(HyperText Markup language，超文本标记语言)和CSS脚本的解析、JavaScript动态代码的执行和网页的排版等任务，内核线程持有当前网页的快照，在每次重新排版后更新该网页快照，并拷贝更新后的快照发送给合成线程。合成线程则负责预绘制从内核线程接收到的网页快照，所述预绘制为将每个图层的内容(绘制描述)光栅化为像素并存入缓存中，然后合成线程再根据预绘制得到的像素缓存和图层的属性合成为网页缓存输出至当前显示窗口的帧缓冲存储器(Frame Buffer，简称帧缓存)。显示控制器读取帧缓存则可以将网页呈现到屏幕上。

现在网页在运行时会通过JavaScript代码不断动态改变网页元素的CSS属性，其中一部分CSS属性跟网页元素所属图层的图层属性相对应，例如CSS Transform属性、CSS Animation属性和CSS Opacity属性，一般而言这些属性的变更不会导致元素内容的变化，也就是说这些属性不影响元素是如何预绘制的。在现有的合成渲染加速架构下，在网页加载完毕以及首次排版和预绘制完成后，当图层的内容和属性发生变化需要更新网页时，内核线程都要重新排版生成新的网页快照，拷贝新的网页快照发送至合成线程，而合成线程则重新进行预绘制等处理步骤。但前述跟网页元素部分CSS属性相对应的图层属性只影响图层内容的展示，对网页排版无影响，也不影响图层光栅化的结果，上述需要重新排版和重新预绘制的网页更新过程会占据很多的系统资源，导致更新效率和速度低，由于网页更新的效率和速度低，也使得网页动态效果显示的帧率低，网页动态显示性能不佳。

发明内容

为克服相关技术中运行JavaScript动态代码使得网页元素的与图层属性对应的层叠样式表属性发生变化时，导致的网页更新效率低的问题，本申请提供一种基于合成渲染加速的网页更新方法和装置。

根据本申请实施例的第一方面，提供一种基于合成渲染加速的网页更新方法，包括：

当JavaScript动态代码使网页元素的与图层属性对应的层叠样式表属性发生变化时，内核线程更新源网页快照中对应网页元素所在图层的属性，所述源网页快照为内核线程中当前的网页快照；

内核线程向合成线程发送同步更新请求；

接收到所述同步更新请求后，合成线程根据所述源网页快照中图层的属性同步更新合成线程中当前的网页快照中对应图层的属性。

其中，所述与图层属性对应的层叠样式表属性，其变更不会导致网页元素内容的变化，不影响网页元素的预绘制。

其中，所述层叠样式表属性包括层叠样式表几何变换属性、层叠样式表动画属性和层叠样式表不透明度属性。

可选的，所述根据根据源网页快照中图层的属性同步更新当前网页快照中对应图层的属性，包括：

比较当前网页快照的每个图层与源网页快照的每个对应图层，合成线程中当前的网页快照中存在与所述源网页快照中对应图层的属性不同的图层时，设置所述图层的属性与源网页快照中对应图层的属性相同。