CN105279253A - 提升网页画布渲染速度的系统及方法 - Google Patents

Abstract

本发明涉及一种提升网页画布渲染速度的系统及方法，该系统包括绘图模块，以画布帧为单位将绘图命令记录在命令包中，且每个命令包中仅包含一个画布帧所涉及的所有的绘图命令，并以命令包为单位执行所述的绘图命令以绘制内存位图；缓存模块，存储所述的绘图模块绘制的内存位图；刷新模块，读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上。采用该种结构的提升网页画布渲染速度的系统及方法，在没有GPU支持或者GPU光栅化特性的平台或设备上，浏览器在渲染网页“画布元素”时，避免了现有技术中频繁大块内存拷贝造成的性能瓶颈，其操作简单，应用范围较为广泛。

Description

提升网页画布渲染速度的系统及方法

技术领域

本发明涉及计算机技术领域，尤其涉及互联网应用技术，具体是指一种提升网页画布渲染速度的系统及方法。

背景技术

浏览器在渲染网页“画布元素”时，主要有绘图模块和屏幕刷新模块两个相互独立的模块协作实现。绘图模块：负责执行脚本语言，在网页“画布元素”上进行绘图操作。屏幕刷新模块：负责监听刷新事件，实时合成当前页面的内容并刷新到屏幕上去。

目前，市面上的浏览器在渲染网页上的“画布元素”时，一般有两种方式，一种是CPU渲染，另一种是GPU渲染。

请参阅图1至图2所示，其中图1为现有技术中CPU渲染的结构示意图，图2为现有技术中的CPU渲染的步骤流程图，CPU渲染：一方面，绘图模块不停地把画布元素上的内容绘制到一块内存位图上，另一方面，屏幕刷新模块在刷新时，实时地拷贝整个“内存位图”的内容，并进行网页合成输出。

请参阅图3所示，图3为现有技术中的GPU渲染的结构示意图，GPU渲染：绘图模块录制绘图命令，然后转换为GL命令送给GPU，由GPU来执行绘制操作(GPU光栅化)。

上述网页画布元素的渲染方法存在以下问题：

(1)CPU渲染的缺点是在网页刷新时要频繁拷贝整块画布的内存位图，存在性能瓶颈。

(2)GPU渲染虽然解决了拷贝大块内存位图的问题。但是需要GPU的支持(还要支持GPU光栅化特性)。如果平台或设备不能提供GPU支持或不支持GPU光栅化特性，就会影响渲染的性能。

发明内容

本发明的目的是克服了上述现有技术的缺点，提供了一种提升网页画布渲染速度的系统及方法，其能够在没有GPU支持或者GPU光栅化特性的平台或设备上，浏览器在渲染网页“画布元素”时，避免了现有技术中频繁大块内存拷贝造成的性能瓶颈。

为了实现上述目的，本发明的提升网页画布渲染速度的系统及方法具有如下构成：

该提升网页画布渲染速度的系统，其主要特点是，所述的系统包括：

绘图模块，用以以画布帧为单位将绘图命令记录在命令包中，且每个命令包中仅包含一个画布帧所涉及的所有的绘图命令，并以命令包为单位执行所述的绘图命令以绘制内存位图；

缓存模块，用以存储所述的绘图模块绘制的内存位图；

刷新模块，用以读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上。

本发明还涉及一种提升网页画布渲染速度的方法，其主要特点是，所述的方法包括绘图模块的命令打包线程、绘图模块的绘制线程以及刷新模块的刷新显示线程：

所述的命令打包线程包括：

所述的绘图模块以画布帧为单位将绘图命令记录在命令包中；

所述的绘制线程包括：

所述的绘图模块以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制；

所述的刷新显示线程包括：

所述的刷新模块读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上。

采用了该发明中的提升网页画布渲染速度的系统及方法，与现有技术相比，具有以下有益效果：

首先，本发明中的提升网页画布渲染速度的系统中省去了GPU，且不需要支持GPU光栅化特性，节省了成本的同时不影响网页画布元素的渲染性能。

其次，本发明中的提升网页画布渲染速度的系统和方法，能够在没有GPU支持或者GPU光栅化特性的平台或设备上，浏览器在渲染网页“画布元素”时，避免了现有技术中频繁大块内存拷贝造成的性能瓶颈，其操作简单，应用范围较为广泛。

附图说明

图1为现有技术中CPU渲染的结构示意图。

图2为现有技术中的CPU渲染的步骤流程图。

图3为现有技术中的GPU渲染的结构示意图。

图4为本发明的提升网页画布渲染速度的系统的第一实施例的结构示意图。

图5为本发明的绘图模块的一实施例的结构示意图。

图6为本发明的环形缓存模块的结构示意图。

图7为本发明的提升网页画布渲染速度的系统的一实施例的结构示意图。

图8为本发明的一种提升网页画布渲染速度的方法的流程图。

图9为本发明的打包线程的处理过程的流程图。

图10为本发明的绘制线程的处理过程的流程图。

图11为本发明的多线程绘制单元的处理过程示意图。

图12为本发明的刷新模块的刷新显示线程中的处理过程的流程图。

具体实施方式

为了能够更清楚地描述本发明的技术内容，下面结合具体实施例来进行进一步的描述。

在详细说明根据本发明的实施例前，应该注意到的是，所述实施例主要在于与提升网页画布渲染速度有关的方法步骤和设备组件的组合。因此，所属设备组件和方法步骤已经在附图中通过常规符号在适当的位置表示出来了，并且只示出了与理解本发明的实施例有关的细节，以免因对于得益于本发明的本领域普通技术人员而言显而易见的那些细节而模糊了本公开内容。

在本文中，诸如左和右，上和下，前和后，第一和第二之类的关系术语仅仅用来区分一个实体或动作与另一个实体或动作，而不一定要求或暗示这种实体或动作之间的任何实际的这种关系或顺序。术语“包括”、“包含”或任何其他变体旨在涵盖非排他性的包含，由此使得包括一系列要素的过程、方法、物品或者设备不仅包含这些要素，而且还包含没有明确列出的其他要素，或者为这种过程、方法、物品或者设备所固有的要素。

本发明为了解决现有技术的缺点，提出了一种在没有GPU支持(或者GPU光栅特性化)的平台或设备上，浏览器浏览在渲染网页“画布元素”时也能有较好的实现效果的提升网页画布渲染速度的系统和方法。

请参阅图4所示，图4为本发明的提升网页画布渲染速度的系统的第一实施例的结构示意图。其通过绘图模块，采用“划分画布帧并记录命令包”的方式来渲染画布元素，用专门的线程来完成命令包的绘制工作，使得当设备或平台没有GPU支持(或者GPU光栅化特性)时，可以避免频繁大块内存拷贝造成的性能瓶颈，该提升网页画布渲染速度的系统包括：

绘图模块，用以以画布帧为单位将绘图命令记录在命令包中，且每个命令包中仅包含一个画布帧所涉及的所有的绘图命令，并以命令包为单位执行所述的绘图命令以绘制内存位图；

缓存模块，用以存储所述的绘图模块绘制的内存位图；

刷新模块，用以读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上。

其中，本发明中的绘图模块和刷新模块是相互独立的，即绘图模块的处理过程不会受到刷新模块的处理过程的影响，除了在绘图模块和刷新模块需要对同一内存位图(具体含义见下文)进行处理的情况下，系统会根据需要判断是绘图模块还是刷新模块对该内存位图进行处理。本发明中通过绘图模块的记录绘图命令，录制命令包的方式，使得在缓存模块中以画布帧为单位存储，从而刷新模块每次只需复制缓存模块中一画布帧大小的内存位图，而不需要复制整个内存位图，提高了CPU的效率，从而提高了用户的体验度。

请参阅图5所示，图5为本发明的绘图模块的一实施例的结构示意图。在一种优选的实施例中，所述的绘图模块包括：

命令包生成单元，用以以画布帧为单位将绘图命令记录在命令包中，且每个命令包中仅包含一个画布帧所涉及的所有的绘图命令；

多线程绘制单元，用以在多个线程中以命令包为单位执行所述的绘图命令以绘制内存位图。

请参阅图6所示，图6为本发明的环形缓存模块的结构示意图。在一种优选的实施例中，所述的缓存模块为环形缓存模块。绘图模块在录制完一个命令包之后，把命令包交给一个线程去执行绘制过程，绘制的结果输出到上述的环形缓冲中的“内存位图”上。这样做的目的是减少绘图模块的开销，同时充分利用多CPU来加快绘制的速度。

请参阅图7所示，图7为本发明的提升网页画布渲染速度的系统的一实施例的结构示意图。在一种优选的实施例中，所述的系统还包括：

优化模块，用以在所述的优化模块检测到显示屏幕上的画布元素完全滑出视区后，控制所述的绘图模块丢掉与该画布元素相对应的绘图命令。

出于公开和使本领域技术人员更好地理解本发明所提出的提高画布渲染速度的系统及方法的目的，本发明所提出的系统及方法可以应用于这样一种场景，但该场景并不是限制本发明的保护范围的，而是为本发明的一种优选的实施场景。

本领域技术人员已知，如果一个网页代码上存在有“画布元素”(一般对应于网页代码中的html5的<canvas>…</canvas>标签)，且存在有在该画布元素上绘制图形的javaScript代码，当浏览器加载该网页时，解析完网页代码后，浏览器的“渲染线程(在本发明中称为绘制线程)”就会执行javaScript代码，在画布元素代表的一块网页区域进行绘画，该网页区域是浏览器在屏幕上指定给该画布元素专门使用的，是画布内容最终显示的区域。但是javaScript代码在绘制时，并不是直接画在这块区域中，一般是先使用绘图上下文绘制到一块内存位图(内存中的一块区域，保存绘制好的图像的像素数据，区域中每一个内存单元存储一个像素的值)上；现有技术中，也存在一个“合成线程(在本发明中称为刷新显示线程)”，现有技术中在该线程里会实时地拷贝整个“内存位图”的内容，并进行网页合成输出，且因为绘制结果是实时生成在内存位图上的，所以无论是“一次性绘制”，还是“重复绘制”，刷新显示线程在拷贝内存位图时，都会实时反映出画布当前的情况，这样每次拷贝都需要拷贝整个“内存位图”，降低了CPU的工作效率；而本发明为了解决这个问题，首先在命令打包线程中，引入了命令包的机制，将绘图命令以画布帧为单位打包，然后在绘制线程中以命令包为单位执行绘图命令并输出至一内存位图上，这样在刷新显示进程时，则不需要实时地拷贝整个内存位图，而仅需要拷贝一个画布帧的内存位图指针即可，当网页上所有元素都绘制完了以后，浏览器的刷新显示进程就会把网页上所有元素的图像数据(即内存位图，包括画布元素的内存位图)合并成为一个完整的网页帧显示在屏幕上(每个内存位图在页面中都被浏览器安排在指定的位置)。

请参阅图8所示，图8为本发明的一种提升网页画布渲染速度的方法的流程图。提升网页画布渲染速度方法包括绘图模块的命令打包线程、绘图模块的绘制线程以及刷新模块的刷新显示线程。

所述的命令打包线程包括：所述的绘图模块以画布帧为单位将绘图命令记录在命令包中。

所述的绘制进程包括：所述的绘图模块以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制。

所述的刷新显示线程包括：所述的刷新模块读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上。

由此可见，在命令打包线程中，将系统调用的javaScript代码以画布帧为单位进行打包，在绘制线程中，执行打包线程打包的绘图命令，输出画布元素的绘制结果，同时也负责网页帧中其它元素的绘制；在刷新显示线程中，系统主要是将网页上所有的元素的绘制结果合成一个完整的网页帧，并发送至显示屏幕上显示。当用户对网页进行拖动或缩放等操作时，可能会触发部分或整个网页内容的重新绘制，这视具体情况而定。对于画布元素而言，这些操作可能会影响画布的尺寸或位置，但是不会影响画布元素的绘制操作。

在图8中，详细而言，一般情况下，本发明的绘制线程和刷新显示线程在本发明中是相互独立的，即绘制线程中的处理过程不会对刷新显示线程中的处理过程产生影响，但是在本发明中的重复绘制模式下，也可以认为是对于网页上的动态显示的内容，当前一画布帧与当前画布帧之间是非独立的时侯，绘制线程中的处理过程与刷新显示线程中的处理过程是相互影响的，该部分会在下文中具体讨论。

在一种优选的实时方式中，请参阅图9所示，图9为本发明的打包主线程的处理过程的流程图。所述的绘图模块包括命令包生成单元及多线程绘制单元，其中，所述的绘图模块以画布帧为单位将绘图命令记录在命令包中，具体包括以下步骤：

(1)所述的命令包生成单元调用一条绘图命令；

(2)所述的命令包生成单元将所述的绘图命令及其参数添加至一命令包中；

(3)所述的命令包生成单元判断该命令包中是否包含有一画布帧所涉及的所有的绘图命令；

(4)如果该命令包中包含有一画布帧所涉及的所有的绘图命令，则所述的多线程绘制单元开启一新的绘制线程；

(5)所述的命令包生成单元判断是否还存在其它的绘图命令；

(6)如果还存在其他的绘图命令，则继续步骤(1)；

(7)如果不存在其他的绘图命令，则结束并退出；

(8)如果该命令包中未包含有一画布帧所涉及的所有的绘图命令，则继续步骤(5)。

其中，对于“画布帧”其是指在一段时间内(一般是毫秒级到百毫秒级的范围，但不排除超出的情况)对画布内容的更新，该更新的内容既可以是局部的也可以是全局的。在本发明中画布帧的划分包含两种模式，其根据绘制模式的不同而不同；对于重复绘制模式，也可以认为是对于网页上的动态显示的内容，其画布帧的区分是根据javaScript中的setInverval(callBack，interval)函数(其中，callBack是javaScript代码中注册的回调函数，即本发明上下文中的重复绘制函数，里面是网页作者编写的绘制画布的javaScript代码；interval是时间间隔，单位是毫秒。该函数被调用之后，浏览的渲染线程每隔interval(比如5毫秒)的时间间隔就会调用callBack函数，执行里面的代码)进行的，即在javaScript中出现的setInverval(callBack，interval)函数，则认为两个相邻的setInverval(callBack，interval)函数之间即为一画布帧；对于一次性绘制，也可以认为是对于网页上的静态显示的内容，由于在javaScript中没有明确的识别特征，在本发明中使用定时器来划分画布帧，其中定时器的定时时间一般是毫秒级到百毫秒级的范围，但不排除超出的情况。

对于上述画布帧的划定的原因具体如下：采用本发明中的记录绘图命令形成命令包的方法，内存位图上的内容就不是实时的了，绘制线程需要先缓存绘图命令，绘图命令在什么时机，以什么频度从绘制线程传给刷新显示线程，需要结合实际应用给出，在本发明中不涉及，但每次送一个绘图命令显然不可取(效率不高，而且绘制线程的执行频率高于刷新显示线程的频率，导致画布上的内容延迟)，如果每次送几个“画布帧”的命令，而且画布帧之间是独立的(每一帧都要清除上一帧)，刷新显示线程在执行绘图命令时，画布内存位图上只会留下最后一个画布帧的内容(前几个画布帧的内容都被后续帧的清除命令给抹掉了)，产生“丢帧”的问题。所以最好的办法是以“画布帧”为单位来记录和传送绘图命令。绘制线程每次把一个画布帧的所有绘图命令记录为一个命令包，然后让绘制线程把命令包中的命令绘制在内存位图，再把内存位图的地址送到内存缓存区，，而刷新显示在需要合成网页帧时，就会从缓冲区(队列的头部)取出一个内存位图，进行网页帧的合成。如果命令包(画布帧)之间是相互独立的，绘制线程每次取出下一个空闲的内存位图，在上面进行绘制，如果命令包之间是不独立的，则每次都在同一个内存位图上进行绘制，后一个命令包的内容重叠在前一个命令包的内容之上。

由于上述画布帧的划分的方式不确定，在实际应用的过程中，当“渲染线程(即绘制线程)”执行javaScript代码在画布元素上绘制时，有两种情况：一种“一次性绘制”，另一种是“重复绘制”。例如当要在网页上绘制一个金鱼缸中金鱼游动的动画，这时可以创建两块画布，一块画布上绘制静态的背景，比如珊瑚礁、海底的砂石等(可以在整块画布上绘制一副海底图片)；另一块画布上绘制不停游动的金鱼，显而易见，背景画布只需要一次性绘制，而金鱼画布需要重复绘制，以展现动画效果。

因此，为了区分一次性绘制和重复绘制，在实际应用中，系统会默认为整个绘制过程为一次性绘制，当在javaScript中标记了重复绘制函数且是否恰好开始进入重复绘制函数的上下文，才会认为本次绘制是重复绘制模式，在实际应用中，当命令包生成单元判断进入了重复绘制函数的上下文时才认为是进入重复绘制模式。。

本发明中为了区分重复绘制和一次性绘制采用以下技术方案，所述的步骤(1)之前还包括以下步骤：

(0.1)所述的命令包生成单元设置一定时器；

(0.2)所述的命令包生成单元判断是否标记了重复绘制函数且是否恰好开始进入重复绘制函数的上下文；此处的恰好开始进入重复绘制函数的上下文是指进入该重复绘制函数上下文的第一次，当第二次进入该重复绘制函数的上下文时，则不满足该条件。

(0.3)如果标记了重复绘制函数且恰好开始进入重复绘制函数上下文，则所述的多线程绘制单元开启一新的绘制线程，所述的命令包生成单元删除所述的定时器，且进入重复绘制模式；

(0.4)如果未标记了重复绘制函数或未恰好开始进入重复绘制函数上下文，则继续步骤(1)。

当进入重复绘制模式时，所述的命令包生成单元在一种优选的实施方式中，在命令打包线程中，所述的进入重复绘制模式具体包括以下步骤：

(0.3.1)所述的命令包生成单元调用一条绘图命令；

(0.3.2)所述的命令包生成单元将所述的绘图命令及其参数添加至一命令包中；

(0.3.3)所述的命令包生成单元判断该命令包中是否包含有一画布帧所涉及的所有的绘图命令；

(0.3.4)如果该命令包中包含有一画布帧所涉及的所有的绘图命令，则所述的多线程绘制单元开启一新的绘制线程；

(0.3.5)所述的命令包生成单元判断是否还存在其它的绘图命令；

(0.3.6)如果还存在其他的绘图命令，则继续步骤(0.3.1)；

(0.3.7)如果不存在其他的绘图命令，则结束并退出；

(0.3.8)如果该命令包中未包含有一画布帧所涉及的所有的绘图命令，则继续步骤(0.3.5)。

其中，例如上述的金鱼缸的实施例中，对于背景画布，其是一次性绘制，需要设置一个定时器，实时地生成命令包，并执行命令包中的绘图命令以使得内存位图中存储有该画布帧，但是由于背景画布其是不变的，因此没有必要每一次形成网页帧时都重新绘制，因此需要一种有效的方式保持背景画布不变。此外对于金鱼画布(前景画布)，由于金鱼是游动的，因此前景画布的前后两帧是不一样的，需要重复绘制。在上述实施例中，存在是否需要清除内存位图中的画布帧的判断。

为了解决上述问题，当缓存模块中存储的是重复绘制的内存位图时，系统还需要判断该内存位图是否是独立的，即该内存位图中是否包含有清空画布标识；而该清空画布标识可以是在命令打包线程中标识在该命令包中，从而在执行该命令包中的绘图命令时，直接在与该命令包相对应的内存位图上设置清空画布标识，在另外的一种实施方式中，该清空画布标识可以直接是在执行命令包中的绘图命令时，在发现有清空画布标识时，直接在与该命令包相对应的内存位图上设置清空画布标识。其中，如果清空画布标识为true，其意义是当前画布上的所有内容都需要被清空；如果清空画布标识为false，其意义是当前画布上的所有内容全部保留。内容只要绘制到内存位图上，就成了像素值了，和内存位图上的其它内容融合在一起；其与上下文环境对象没有关系，上下文环境对象是记录了当前绘制的状态，如使用什么笔，什么颜色等等。所述的步骤(0.3.2)具体包括以下步骤：

(0.3.2.1)所述的命令包生成单元判断所述的绘图命令是否为重复绘制函数；

(0.3.2.2)如果所述的绘图命令为重复绘制函数，则标记重复绘制函数，然后继续步骤(0.3.5)；

(0.3.2.3)如果所述的绘图命令不为重复绘制函数，则所述的命令包生成单元判断该绘图命令是否为清空画布命令；

(0.3.2.4)如果该绘图命令为清空画布命令，则所述的命令包生成单元将当前命令包加入清空画布标识；

(0.3.2.5)所述命令包生成单元判断该绘图命令是否为当前命令包的第一条命令；

(0.3.2.6)如果该绘图命令为当前命令包的第一条命令，则继续步骤(0.3.5)；

(0.3.2.7)如果该绘图命令不为当前命令包的第一条命令，则继续步骤(0.3.4)；

(0.3.2.8)如果该绘图命令不为清空画布命令，则命令包生成单元将所述的绘图命令及其参数添加至一命令包中。

其中，在重复绘制模式中判断命令包打包是否完成的标准是是否退出了重复绘制函数的上下文，因此，所述的步骤(0.3.3)具体包括以下步骤：

(0.3.3.1)所述的命令包生成单元判断是否退出了重复绘制函数的上下文；

(0.3.3.2)如果退出了重复绘制函数的上下文，则返回该命令包中包含有一画布帧所涉及的所有的绘图命令的结果；

(0.3.3.3)如果未退出重复绘制函数的上下文，则返回该命令包中未包含有一画布帧所涉及的所有的绘图命令的结果。此外，如果命令打包线程中未进入重复绘制模式，则其仍保留为一次性绘制模式，则在一种优选的实施方式中，仍需要判断是否包含有清空画布标识，其具体的判断方式与重复绘制模式中的类似，在此不再赘述。所述的步骤(2)具体包括以下步骤：

(2.1)所述的命令包生成单元判断所述的绘图命令是否为重复绘制函数；

(2.2)如果所述的绘图命令为重复绘制函数，则标记重复绘制函数，然后继续步骤(5)；

(2.3)如果所述的绘图命令不为重复绘制函数，则所述的命令包生成单元判断该绘图命令是否为清空画布命令；

(2.4)如果该绘图命令为清空画布命令，则所述的命令包生成单元将当前命令包加入清空画布标识；

(2.5)所述命令包生成单元判断该绘图命令是否为当前命令包的第一条命令；

(2.6)如果该绘图命令为当前命令包的第一条命令，则继续步骤(5)；

(2.7)如果该绘图命令不为当前命令包的第一条命令，则继续步骤(4)；

(2.8)如果该绘图命令不为清空画布命令，则命令包生成单元将所述的绘图命令及其参数添加至一命令包中。

其中，在一次性模式中判断命令包打包是否完成的标准是定时器是否到时，因此，所述的步骤(3)具体包括以下步骤：

(3.1)所述的命令包生成单元判断所述的定时器是否到时；

(3.2)如果所述的定时器到时，则返回该命令包中包含有一画布帧所涉及的所有的绘图命令的结果；

(3.3)如果所述的定时器未到时，则返回该命令包中未包含有一画布帧所涉及的所有的绘图命令的结果。

在一种优选的实施方式中，请参阅图10所示，图10为本发明的绘制线程的处理过程的流程图。其中在该处理过程中，在一种实施方式中，可以只开启一个绘制线程，即在该绘制线程中执行命令打包线程中打包完成的命令包并将每一个命令包的绘制结果输出至一单独的内存位图上；在另外的一种实施方式中，可以同时开启多个绘制进程，请参阅图11所示，图11为本发明的多线程绘制单元的处理过程示意图，这样每当命令打包线程中存在有打包完成的命令包时，就会触发多线程绘制单元开启一新的绘制线程来执行该命令包中的绘图命令，并将结果输出至缓存模块的一内存位图中；当然在另外的实施方式中，也可以是命令打包线程中存在有一定数量的打包完成的命令包时，再触发所述的多线程绘制单元开启一新的绘制线程来执行该数个命令包中的绘图命令，并将结果输出至缓存模块的数个内存位图中。

例如，请再次参阅图10并结合图11所示，所述的绘图模块包括命令包生成单元以及多线程绘制单元，其中，所述的绘图模块以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制，具体包括以下步骤：

所述的多线程绘制单元判断所述的命令包生成单元中是否生成有完整的命令包；如果所述的命令包生成单元生成有完整的命令包，则所述的多线程绘制单元则开启一新的线程，并在该新的线程中以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制；如果所述的命令包生成单元中无完整的命令包，则所述的多线程绘制单元继续判断所述的命令包生成单元中是否生成有完整的命令包。

此外，画布上的内容(包括画布元素和画布上的其它元素)不是直接画到显示屏幕上的，而是先绘制到一个内存位图上的，之后再由刷新显示线程把多个内存位图合成一个完整的网页帧，所以在画布上绘制之前需要预先分配内存位图。多线程绘制单元最终将绘制好的内容存储至内存位图，其中内存位图是指计算机内存中的一块区域，用来保存图像的像素数据，区域中一般每一个内存单元存储一个像素的值。显示屏上有很多应用程序的窗口，其中包括浏览器的窗口，浏览器的窗口中用来显示网页内容的矩形区域称为“网页工作区”，而网页工作区的内容会因为各种事件的触发进行刷新(网页内容重新绘制以及合成)，每一次刷新内容的图像数据就是一个“网页帧”。网页帧是由网页上所有元素(也称为标签，如<canvas>，<video>等等)的绘制结果(内存位图)按照层叠关系合成的一个整体，被直接送到网页工作区进行显示，而“当前网页帧的其他部分”是指网页帧中除了画布元素之外的其它元素的内存位图(可以有多个内存位图)。

请再次参阅图6所示，图6为本发明的环形缓存模块的结构示意图。在本发明中绘制的结果输出到上述环形缓冲中的“内存位图”上，这样做的目的是减少绘图模块的开销，同时充分利用多CPU来加快绘制的速度。

请参阅图12所示，图12为本发明的刷新模块的刷新显示线程中的处理过程的流程图。所述的刷新模块读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上，具体包括以下步骤：

(a)所述的刷新模块等待下一个刷新事件；

(b)浏览器录制当前的网页帧；

(c)所述的刷新模块按顺序读取所述的缓存模块中存储的内存位图并与所述的网页帧合并后刷新至屏幕上。

在该新的线程中以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制，具体包括以下步骤：

所述的多线程绘制单元判断该新的线程中的命令包中是否含有清空画布标识；

如果该新的线程中的命令包中含有清空画布标识，则所述的缓冲模块在该内存位图中设置清空画布标识，并以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制；

如果该新的线程中的命令包中不含有清空画布标识，则该多线程绘制单元以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制。

相应地，所述的步骤(c)之后还包括以下步骤：

(d)所述的刷新模块判断所述的内存位图上是否包含有清空画布标识；

(e)如果所述的内存位图上包含有清空画布标识，则所述的缓存模块清空该内存位图后，将该内存位图标识为空闲状态；

(f)如果所述的内存位图上不包含有清空画布标识，则继续步骤(c)。

此外，当该内存位图上不含有清空画布标识时，由于绘图模块需要在该内存位图上再次进行绘制，因此刷新模块在绘图模块操作该内存位图时是不能够对该内存位图进行处理的，因此所述的步骤(f)，具体包括以下步骤：

(f.1)如果所述的内存位图上不包含有清空画布标识，则所述的刷新模块判断该内存位图当前是否被操作；

(f.2)如果所述的内存位图当前被操作，则继续步骤(f.1)；

(f.3)如果所述的内存位图当前未被操作，则继续步骤(c)

通过上述技术方案，在上述金鱼缸的实施例中，背景画布其的情况画布标识为false，这样在刷新显示线程合成下一个网页帧时，就会保留当前画布的内容，背景画布就不会被抹掉；对于前景画布，把每一次调用callBack函数里面的绘图命令记录为一个命令包发送至刷新显示线程，并设置清空画布标识为true，这样当合成线程合成下一个网页帧时，就会清除画布前一帧内容，避免与当前帧合在一起，导致混乱。此外，在另外的一种实施例中，为了实现阴影逐渐消失的动画效果，也可以设置清空画布标识为false，且后一帧画布帧都一半透明的方式覆盖在前一帧画布帧上。本领域技术人员可以根据需要来设置清空画布标识，以提高用户的体验。

在本发明中，在一般情况下，网页中的画布元素会部分或全地部呈现在浏览器的视区(viewport)里，但是当用户操作网页滚动条时，画布元素占用的视区空间可能会完全滑动到视区以外的地方(用户不可见)，通过划分画布帧和命令打包，可以对这个过程进行优化。当画布元素完全滑出视区以后，浏览器以画布帧为单位丢掉画布上的绘图命令。这样可以优化掉不必要的绘制操作；如果画布帧的绘制速度很快(帧率很高)，优化的效果比较明显。

因此，在一种优选的实施方式中，所述的系统还包括优化模块，所述的刷新模块读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上之后还包括以下步骤：

所述的优化模块检测所述的显示屏幕上的画布元素是否完全滑出视区；

如果所述的显示屏幕上的画布元素完全滑出视区，则所述的优化模块控制所述的绘图模块丢掉与该画布元素相对应的绘图命令；

如果所述的显示屏幕上的画布元素未完全滑出视区，则所述的优化模块继续检测所述的显示屏幕上的画布元素是否完全滑出视区。

采用了该发明中的提升网页画布渲染速度的系统及方法，与现有技术相比，具有以下有益效果：

首先，本发明中的提升网页画布渲染速度的系统中省去了GPU，且不需要支持GPU光栅化特性，节省了成本的同时不影响网页画布元素的渲染性能。

其次，本发明中的提升网页画布渲染速度的系统和方法，能够在没有GPU支持或者GPU光栅化特性的平台或设备上，浏览器在渲染网页“画布元素”时，避免了现有技术中频繁大块内存拷贝造成的性能瓶颈，其操作简单，应用范围较为广泛。

在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。

Claims (19)

1.一种提升网页画布渲染速度的系统，其特征在于，所述的系统包括：

绘图模块，用以以画布帧为单位将绘图命令记录在命令包中，且每个命令包中仅包含一个画布帧所涉及的所有的绘图命令，并以命令包为单位执行所述的绘图命令以绘制内存位图；

缓存模块，用以存储所述的绘图模块绘制的内存位图；

刷新模块，用以读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上。

2.根据权利要求1所述的提升网页画布渲染速度的系统，其特征在于，所述的绘图模块包括：

命令包生成单元，用以以画布帧为单位将绘图命令记录在命令包中，且每个命令包中仅包含一个画布帧所涉及的所有的绘图命令；

多线程绘制单元，用以在多个线程中以命令包为单位执行所述的绘图命令以绘制内存位图。

3.根据权利要求1所述的提升网页画布渲染速度的系统，其特征在于，所述的缓存模块为环形缓存模块。

4.根据权利要求1所述的提升网页画布渲染速度的系统，其特征在于，所述的系统还包括：

优化模块，用以在检测到显示屏幕上的画布元素完全滑出视区后，控制所述的绘图模块丢掉与该画布元素相对应的绘图命令。

5.一种提升网页画布渲染速度的方法，其特征在于，所述的方法包括绘图模块的命令打包线程、绘图模块的绘制线程以及刷新模块的刷新显示线程：

所述的命令打包线程包括：

所述的绘图模块以画布帧为单位将绘图命令记录在命令包中；

所述的绘制线程包括：

所述的绘图模块以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制；

所述的刷新显示线程包括：

所述的刷新模块读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上。

6.根据权利要求5所述的提升网页画布渲染速度的方法，其特征在于，所述的方法包括以下步骤：

(1)所述的命令包生成单元调用一条绘图命令；

(2)所述的命令包生成单元将所述的绘图命令及其参数添加至一命令包中；

(3)所述的命令包生成单元判断该命令包中是否包含有一画布帧所涉及的所有的绘图命令；

(4)如果该命令包中包含有一画布帧所涉及的所有的绘图命令，则所述的多线程绘制单元开启一新的绘制线程；

(5)所述的命令包生成单元判断是否还存在其它的绘图命令；

(6)如果还存在其他的绘图命令，则继续步骤(1)；

(7)如果不存在其他的绘图命令，则结束并退出；

(8)如果该命令包中未包含有一画布帧所涉及的所有的绘图命令，则继续步骤(5)。

7.根据权利要求6所述的提升网页画布渲染速度的方法，其特征在于，所述的步骤(1)之前还包括以下步骤：

(0.1)所述的命令包生成单元设置一定时器；

(0.2)所述的命令包生成单元判断是否标记了重复绘制函数且是否恰好开始进入重复绘制函数的上下文；

(0.3)如果标记了重复绘制函数且恰好开始进入重复绘制函数上下文，则所述的多线程绘制单元开启一新的绘制线程，所述的命令包生成单元删除所述的定时器，且进入重复绘制模式；

(0.4)如果未标记了重复绘制函数或未恰好开始进入重复绘制函数上下文，则继续步骤(1)。

8.根据权利要求7所述的提升网页画布渲染速度的方法，其特征在于，所述的进入重复绘制模式具体包括以下步骤：

(0.3.1)所述的命令包生成单元调用一条绘图命令；

(0.3.2)所述的命令包生成单元将所述的绘图命令及其参数添加至一命令包中；

(0.3.3)所述的命令包生成单元判断该命令包中是否包含有一画布帧所涉及的所有的绘图命令；

(0.3.4)如果该命令包中包含有一画布帧所涉及的所有的绘图命令，则所述的多线程绘制单元开启一新的绘制线程；

(0.3.5)所述的命令包生成单元判断是否还存在其它的绘图命令；

(0.3.6)如果还存在其他的绘图命令，则继续步骤(0.3.1)；

(0.3.7)如果不存在其他的绘图命令，则结束并退出；

(0.3.8)如果该命令包中未包含有一画布帧所涉及的所有的绘图命令，则继续步骤(0.3.5)。

9.根据权利要求8所述的提升网页画布渲染速度的方法，其特征在于，所述的步骤(0.3.2)具体包括以下步骤：

(0.3.2.1)所述的命令包生成单元判断所述的绘图命令是否为重复绘制函数；

(0.3.2.2)如果所述的绘图命令为重复绘制函数，则标记重复绘制函数，然后继续步骤(0.3.5)；

(0.3.2.3)如果所述的绘图命令不为重复绘制函数，则所述的命令包生成单元判断该绘图命令是否为清空画布命令；

(0.3.2.4)如果该绘图命令为清空画布命令，则所述的命令包生成单元将当前命令包加入清空画布标识；

(0.3.2.5)所述命令包生成单元判断该绘图命令是否为当前命令包的第一条命令；

(0.3.2.6)如果该绘图命令为当前命令包的第一条命令，则继续步骤(0.3.5)；

(0.3.2.7)如果该绘图命令不为当前命令包的第一条命令，则继续步骤(0.3.4)；

(0.3.2.8)如果该绘图命令不为清空画布命令，则命令包生成单元将所述的绘图命令及其参数添加至一命令包中。

10.根据权利要求9所述的提升网页画布渲染速度的方法，其特征在于，所述的步骤(0.3.3)具体包括以下步骤：

(0.3.3.1)所述的命令包生成单元判断是否退出了重复绘制函数的上下文；

(0.3.3.2)如果退出了重复绘制函数的上下文，则返回该命令包中包含有一画布帧所涉及的所有的绘图命令的结果；

(0.3.3.3)如果未退出重复绘制函数的上下文，则返回该命令包中未包含有一画布帧所涉及的所有的绘图命令的结果。

11.根据权利要求7所述的提升网页画布渲染速度的方法，其特征在于，所述的步骤(2)具体包括以下步骤：

(2.1)所述的命令包生成单元判断所述的绘图命令是否为重复绘制函数；

(2.2)如果所述的绘图命令为重复绘制函数，则标记重复绘制函数，然后继续步骤(5)；

(2.3)如果所述的绘图命令不为重复绘制函数，则所述的命令包生成单元判断该绘图命令是否为清空画布命令；

(2.4)如果该绘图命令为清空画布命令，则所述的命令包生成单元将当前命令包加入清空画布标识；

(2.5)所述命令包生成单元判断该绘图命令是否为当前命令包的第一条命令；

(2.6)如果该绘图命令为当前命令包的第一条命令，则继续步骤(5)；

(2.7)如果该绘图命令不为当前命令包的第一条命令，则继续步骤(4)；

(2.8)如果该绘图命令不为清空画布命令，则命令包生成单元将所述的绘图命令及其参数添加至一命令包中。

12.根据权利要求11所述的提升网页画布渲染速度的方法，其特征在于，所述的步骤(3)具体包括以下步骤：

(3.1)所述的命令包生成单元判断所述的定时器是否到时；

(3.2)如果所述的定时器到时，则返回该命令包中包含有一画布帧所涉及的所有的绘图命令的结果；

(3.3)如果所述的定时器未到时，则返回该命令包中未包含有一画布帧所涉及的所有的绘图命令的结果。

13.根据权利要求5所述的提升网页画布渲染速度的方法，其特征在于，所述的绘图模块包括命令包生成单元以及多线程绘制单元，其中，所述的绘图模块以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制，具体包括以下步骤：

所述的多线程绘制单元判断所述的命令包生成单元中是否生成有完整的命令包；

如果所述的命令包生成单元生成有完整的命令包，则所述的多线程绘制单元则开启一新的线程，并在该新的线程中以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制；

如果所述的命令包生成单元中无完整的命令包，则所述的多线程绘制单元继续判断所述的命令包生成单元中是否生成有完整的命令包。

14.根据权利要求13所述的提升网页画布渲染速度的方法，其特征在于，在该新的线程中以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制，具体包括以下步骤：

所述的多线程绘制单元判断该新的线程中的命令包中是否含有清空画布标识；

如果该新的线程中的命令包中含有清空画布标识，则所述的缓冲模块在该内存位图中设置清空画布标识，并以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制；

如果该新的线程中的命令包中不含有清空画布标识，则该多线程绘制单元以命令包为单位执行所述的绘图命令以在缓存模块中的内存位图上进行绘制。

15.根据权利要求14所述的提升网页画布渲染速度的方法，其特征在于，所述的缓存模块为环形缓存模块。

16.根据权利要求5所述的提升网页画布渲染速度的方法，其特征在于，所述的刷新模块读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上，具体包括以下步骤：

(a)所述的刷新模块等待下一个刷新事件；

(b)浏览器录制当前的网页帧；

(c)所述的刷新模块按顺序读取所述的缓存模块中存储的内存位图并与所述的网页帧合并后刷新至屏幕上。

17.根据权利要求16所述的提升网页画布渲染速度的方法，其特征在于，所述的步骤(c)之后还包括以下步骤：

(d)所述的刷新模块判断所述的内存位图上是否包含有清空画布标识；

(e)如果所述的内存位图上包含有清空画布标识，则所述的缓存模块清空该内存位图后，将该内存位图标识为空闲状态；

(f)如果所述的内存位图上不包含有清空画布标识，则继续步骤(c)。

18.根据权利要求17所述的提升网页画布渲染速度的方法，其特征在于，步骤(f)，具体包括以下步骤：

(f.1)如果所述的内存位图上不包含有清空画布标识，则所述的刷新模块判断该内存位图当前是否被操作；

(f.2)如果所述的内存位图当前被操作，则继续步骤(f.1)；

(f.3)如果所述的内存位图当前未被操作，则继续步骤(c)。

19.根据权利要求5所述的提升网页画布渲染速度的方法，其特征在于，所述的系统还包括优化模块，所述的刷新模块读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上之后还包括以下步骤：

所述的优化模块检测所述的显示屏幕上的画布元素是否完全滑出视区；

如果所述的显示屏幕上的画布元素完全滑出视区，则所述的优化模块控制所述的绘图模块丢掉与该画布元素相对应的绘图命令；

如果所述的显示屏幕上的画布元素未完全滑出视区，则所述的优化模块继续检测所述的显示屏幕上的画布元素是否完全滑出视区。