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

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

【技术实现步骤摘要】

本专利技术涉及计算机
，尤其涉及互联网应用技术，具体是指一种。
技术介绍
浏览器在渲染网页“画布元素”时，主要有绘图模块和屏幕刷新模块两个相互独立的模块协作实现。绘图模块:负责执行脚本语言，在网页“画布元素”上进行绘图操作。屏幕刷新模块:负责监听刷新事件，实时合成当前页面的内容并刷新到屏幕上去。目前，市面上的浏览器在渲染网页上的“画布元素”时，一般有两种方式，一种是CPU渲染，另一种是GPU渲染。请参阅图1至图2所示，其中图1为现有技术中CPU渲染的结构示意图，图2为现有技术中的CPU渲染的步骤流程图，CPU渲染:一方面，绘图模块不停地把画布元素上的内容绘制到一块内存位图上，另一方面，屏幕刷新模块在刷新时，实时地拷贝整个“内存位图”的内容，并进行网页合成输出。请参阅图3所示，图3为现有技术中的GPU渲染的结构示意图，GPU渲染:绘图模块录制绘图命令，然后转换为GL命令送给GPU，由GPU来执行绘制操作(GPU光栅化)。上述网页画布元素的渲染方法存在以下问题:(l)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为本专利技术的提升网页画布渲染速度的系统的一实施例的结构示意图。在当前第1页1 2 3 4 5 本文档来自技高网...

【技术保护点】
一种提升网页画布渲染速度的系统，其特征在于，所述的系统包括：绘图模块，用以以画布帧为单位将绘图命令记录在命令包中，且每个命令包中仅包含一个画布帧所涉及的所有的绘图命令，并以命令包为单位执行所述的绘图命令以绘制内存位图；缓存模块，用以存储所述的绘图模块绘制的内存位图；刷新模块，用以读取所述的缓存模块中存储的内存位图后刷新至显示屏幕上。

【技术特征摘要】

【专利技术属性】
技术研发人员：吴进锋，
申请(专利权)人：上海联彤网络通讯技术有限公司，
类型：发明
国别省市：上海;31