动态页面渲染方法及装置与流程

本申请涉及页面渲染技术领域，特别是涉及动态页面渲染方法及装置。

背景技术：

目前，使用web(或称html5，简称h5)开发动态页面已经成为一种流行趋势，例如，“手机淘宝”中的店铺互动游戏页面等，都可以是利用h5进行开发。

现有技术中，多数的h5动态页面都是针对移动终端开发的。但是，实际上，开发者都希望自己开发h5动态页面不仅能运行在用户的移动终端，也能运行在传统的pc端。然而，由于这种动态页面中通常会包括一些动画、控件等元素，而各种移动终端的浏览器与pc端的浏览器中用于处理这些元素的接口可能是不同的，因此，如果只能分别编写移动终端的页面代码，以及pc端的页面代码。

例如，ie浏览器在pc端仍然占据着较大的市场份额，但是，旧版的ie浏览器(ie9以下)不支持canvas、css3(目前css的最新版本，css是全称是cascadingstylesheet，也即层叠样式表)等h5技术，因此，无法运行绝大多数的h5动态页面。也就是说，在为移动终端开发了页面代码后，无法直接在pc端的浏览器中运行，只能另外为pc端重新开发另一套页面代码。

因此，如何提高动态页面的开发效率，成为需要本领域技术人员解决的技术问题。

技术实现要素：

本申请提供了动态页面渲染方法及装置，能提高开发效率，节省系统存储资源。

本申请提供了如下方案：

一种动态页面渲染方法，其特征在于，包括：

提供类库，所述类库中包括渲染器抽象基类以及显示类；所述渲染器抽象基类提供多个调用接口，通过继承该渲染器抽象基类提供多个渲染器子类，不同的渲染器子类对应不同的浏览器类型，在渲染器子类内部，根据对应浏览器类型对显示对象的渲染方式，实现各个调用接口的处理逻辑；所述显示类定义各类型显示对象的属性及渲染方法，所述渲染方法通过所述渲染器抽象基类的各个调用接口进行定义，以便通过对所述显示类进行实例化的方式进行动态界面的编辑；

在目标浏览器中展示所述动态页面时，通过执行所述动态页面中注入的脚本确定所述目标浏览器的类型，并通过对对应的渲染器子类进行实例化，创建对应的目标渲染器；

遍历所述动态页面的显示结构树，通过所述目标渲染器对所述显示结构树中的各个显示对象进行渲染处理。

一种动态页面渲染装置，其特征在于，包括：

类库提供单元，用于提供类库，所述类库中包括渲染器抽象基类以及显示类；所述渲染器抽象基类提供多个调用接口，通过继承该渲染器抽象基类提供多个渲染器子类，不同的渲染器子类对应不同的浏览器类型，在渲染器子类内部，根据对应浏览器类型对显示对象的渲染方式，实现各个调用接口的处理逻辑；所述显示类定义各类型显示对象的属性及渲染方法，所述渲染方法通过所述渲染器抽象基类的各个调用接口进行定义，以便通过对所述显示类进行实例化的方式进行动态界面的编辑；

目标渲染器生成单元，用于在目标浏览器中展示所述动态页面时，通过执行所述动态页面中注入的脚本确定所述目标浏览器的类型，并通过对对应的渲染器子类进行实例化，创建对应的目标渲染器；

渲染处理单元，用于遍历所述动态页面的显示结构树，通过所述目标渲染 器对所述显示结构树中的各个显示对象进行渲染处理。

根据本申请提供的具体实施例，本申请公开了以下技术效果：

通过本申请实施例，由于可以通过渲染器抽象基类实现对各种具体渲染器子类的统一封装，提供统一的调用接口，因此，可以实现显示对象与浏览器类型之间的解耦，在开发动态页面时，可以通过统一的调用接口来定义显示对象的渲染方法，之后在具体进行页面的展示时，再由页面中注入的脚本进行浏览器类型的判断，并根据判断结果生成对应的目标渲染器，并由该目标渲染器内部定义的各个接口的处理逻辑，对页面内各个显示对象进行具体的渲染处理操作。可见，通过这种方式，开发者可以不必关心具体的浏览器类型，只要按照本申请实施例提供的类库进行一次开发，即可在各种终端设备、各种浏览器中都进行正常的渲染及展示，从而提高开发效率，避免针对同一页面保存多份不同的页面代码，因此，还可以节省系统的存储资源。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的类库中类之间的继承结构示意图；

图2是本申请实施例提供的类之间的显示结构示意图；

图3是本申请实施例提供的方法的流程图；

图4是本申请实施例提供的方法中渲染过程示意图；

图5是本申请实施例提供的方法中另一渲染过程示意图；

图6是本申请实施例提供的装置的示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本申请保护的范围。

在本申请实施例中，为了实现一次开发，便能够在各种类型的浏览器中进行展示，可以预先提供类库，该类库中可以包括渲染器抽象基类以及显示类。其中，渲染器抽象基类中抽象出多个调用接口，例如，可以包括开始绘图接口(startdraw)、绘图位移转换接口(transform)、绘图接口(draw)、绘图结束接口(enddraw)，但是，在渲染器抽象基类中可以不必提供各个调用接口的具体实现。通过继承该渲染器抽象基类，可以提供多个渲染器子类，不同的渲染器子类对应不同的浏览器类型，在渲染器子类内部，根据对应浏览器类型对显示对象的渲染方式，实现各个调用接口的处理逻辑。也就是说，在本申请实施例中，在具体执行渲染操作的渲染器外部进行了一层统一的封装，可以使得不同的渲染器子类可以使用统一的接口被调用，但具体的接口实现逻辑又是在子类内部实现的，因此，在开发动态页面时，就可以不必区分具体的渲染器子类，也即，开发者无需直接使用渲染器子类，直接利用渲染器抽象基类提供的调用接口对显示对象进行渲染方法的定义即可，从而实现显示对象与渲染器之间的解耦，在具体进行页面展示时，再通过派生出不同的渲染器来实现不同的渲染模式。

其中，在提供渲染器子类时，是根据各个浏览器对显示对象渲染方式的不同，提供出多个不同的渲染器子类。例如，第一类浏览器是基于flash进行显示对象的渲染，具体如ie8，ie7，ie6等；第二类浏览器是基于div标签进行显示对象的渲染，具体如低版本android操作系统中的浏览器等；第三类浏览器是基于canvas进行显示对象的渲染，具体如pc终端中其他的高级浏览器以及ios操作系统中的浏览器等等。由于上述三类浏览器对显示对象的渲染方式有所不同，因此，可以提供三个渲染器子类，分别与上述三类浏览器对应，例如，分别可以为flashrenderer、domrenderer、canvasrenderer，等等。这样，在 具体的终端设备中进行页面渲染时，可以根据实际的浏览器类型，生成具体的渲染器，然后再利用该渲染器对页面中的各个显示对象进行渲染。

另外，类库中还可以提供显示类，这种显示类就用于定义具体的显示对象的属性及其渲染方法，其中，对渲染方法的定义就可以是通过渲染器抽象基类中定义的统一的调用接口来实现的。这样，通过对类库中的显示类进行实例化，即可对动态页面中各个具体的显示对象进行定义。其中，显示类可以包括显示基类，并且，可以通过继承该显示基类提供多个显示子类，每个显示子类可以对应不同的显示对象类型。例如，如图1所示，view是显示对象基类，所有显示对象类都可以继承此类。其中，bitmap用于显示最基本的图片，sprite用于显示帧动画，graphics用于显示矢量绘图，text用于显示文字。例如，显示静态图片可以用bitmap，显示跳舞的小人可以用sprite，显示三角形可以用graphics，显示文字可以用text，等等。

另外，为了方便管理，类库中还可以包括container，也即容器类，可包含各种子对象。显示基类view与容器类container这两个类是最基本的类，其他的类都可由他们派生出来。例如，具体实现时，各类之间的关系可以如图2所示，其中，stage是根节点和顶层容器，stage中可以添加多种显示对象，其中container容器下可以继续添加多种显示对象。这种灵活的显示结构可以形成非常复杂的显示结构，方便显示对象的管理。例如，舞台上有三艘船，每个船上都有一个人，这时，可以将每艘船设置为container，然后往里面添加两个view，分别是船和人物的图片。然后将船添加到舞台里。这样，如果让船移动，只需要设置船容器的位移，则人物也会随着船一起移动。其中，在设置船容器的位移时，就可以通过前述渲染器抽象基类的绘图位移转换接口(transform)进行定义，具体可以指定位移的方向、距离等等。

在提供了上述类库的基础上，开发者就可以基于该类库进行动态页面的开发。如前文所述，在开发的过程中，不需要考虑不同类型的浏览器之间的区别，因此，可以达到一次开发，即可在多种平台中展示的目的。需要说明的是，在本申请实施例中，动态页面的页面代码为可以利用跨平台语言进行编辑，所谓的跨平台语言，也即所有浏览器都能够支持的语言，例如，具体可以是 javascript等。

在利用上述方式编辑了动态页面的页面代码后，还可以在页面中添加一脚本，在页面被浏览器加载时，该脚本可以首先被执行，用于进行浏览器类型的判断等操作。其中，页面中的脚本也可以是javascript脚本(简称js脚本)等在所有浏览器中都能够被执行的脚本。

下面对具体的渲染过程进行介绍。

参见图3，本申请实施例提供了一种动态页面渲染方法，该方法可以包括以下步骤：

s301：提供类库，所述类库中包括渲染器抽象基类以及显示类；所述渲染器抽象基类提供多个调用接口，通过继承该渲染器抽象基类提供多个渲染器子类，不同的渲染器子类对应不同的浏览器类型，在渲染器子类内部，根据对应浏览器类型对显示对象的渲染方式，实现各个调用接口的处理逻辑；所述显示类定义各类型显示对象的属性及渲染方法，所述渲染方法通过所述渲染器抽象基类的各个调用接口进行定义，以便通过对所述显示类进行实例化的方式进行动态界面的编辑；

如前文所述，在本申请实施例中提供了类库，其中包括显示基类及其派生出的显示子类等，在进行动态页面开发时，就可以通过对这些显示基类、显示子类等进行实例化的方式，来定义页面中包含的具体显示对象的属性及其渲染方法。

例如，假设需要在动态页面中展示一个按钮，则可以利用本申请实施例中提供的bitmap类来生成一个图片，button＝newbitmap({image:buttonimage})，之后还可以对该图片的属性、渲染方法等进行具体参数值的设置，等等。

s302：在目标浏览器中展示所述动态页面时，通过执行所述动态页面中注入的脚本确定所述目标浏览器的类型，并通过对对应的渲染器子类进行实例化，创建对应的目标渲染器；

在动态页面生成后，在具体的终端设备中的目标浏览器中进行展示时，页 面中被注入的脚本就可以首先被执行，执行该脚本的目的就是判断当前浏览器所述的类型。也就是说，可以确定出当前的目标浏览器属于前述三种浏览器类型中的哪一类。具体实现时，为了能够执行上述判断操作，可以预先保存各个浏览器类型与浏览器的名称、版本等信息之间的对应关系，例如，前述例子中，第一浏览器类型包括ie8，ie7，ie6等，这样，该脚本可以首先确定出当前目标浏览器的名称、版本号等信息，然后通过与前述对应关系进行比对，即可确定出当前目标浏览器所属的浏览器类型。

在确定出浏览器类型后，该脚本就可以通过对对应的渲染器子类进行实例化，创建对应的目标渲染器。具体实现时，还可以预先保存各渲染器子类与适用的浏览器类型之间的对应关系，这样，在确定出浏览器类型后，就可以确定出对应的渲染器子类，进而，脚本就可以执行对该渲染器子类进行实例化的操作，从而创建起具体的目标渲染器。例如，假设确定出当前浏览器为ie8，则确定出该目标浏览器属于第一浏览器类型，因此，即可以对该类型对应的渲染器子类flashrenderer进行实例化，生成目标渲染器。如果确定出当前浏览器为低版本android操作系统中的浏览器，则确定出该目标浏览器属于第二浏览器类型，因此，即可以对该类型对应的渲染器子类domrenderer进行实例化，生成目标渲染器。如果确定出当前浏览器为ios操作系统中的浏览器，则确定出该目标浏览器属于第三浏览器类型，因此，即可以对该类型对应的渲染器子类canvasrenderer进行实例化，生成目标渲染器。

需要说明的是，在类库中存在最外层容器-stage的情况下，页面中的脚本还可以创建起该最外层容器，在判断出浏览器类型并生成对应的目标渲染器后，可以将该目标渲染器注入到该stage层，之后的渲染过程会从该stage层开始。

s303：遍历所述动态页面的显示结构树，通过所述目标渲染器对所述显示结构树中的各个显示对象进行渲染处理。

在生成具体的目标渲染器后，就可以遍历所述动态页面的显示结构树，然后通过所述目标渲染器对所述显示结构树中的各个显示对象进行渲染处理。具体的，如果还生成了stage层，则可以在调用stage的某预置的方法(例如，tick方法，该方法对应的处理逻辑可以是在类库中定义好的)后，遍历页面的 整个显示结构树，逐个调用各个显示对象的渲染方法，而具体的渲染操作实现则由相应的目标渲染器renderer完成。也就是说，如图4所示，渲染过程可以包括调用stage的tick()方法，调用显示对象(view)的渲染方法(render())，再由具体的渲染器(renderer)通过具体的调用接口(startdraw()、transform()、draw()、enddraw())内定义的处理逻辑进行渲染处理。

在具体实现时，整个渲染流程可以如图5所示，动态页面被加载后，首先执行脚本，生成stage舞台，并在判断出当前的目标浏览器的类型，生成该浏览器类型对应的目标渲染器，其中，如果是ie8及以下版本的浏览器，可以生成flashrenderer，如果是低版本android浏览器，可以生成domrenderer，如果是ios等其他浏览器，则可以生成canvasrenderer，等等。之后，可以调用stage的tick方法，该方法被调用后，即可以遍历整个显示结构树，根据显示对象的渲染方法，调用stage层的渲染器的四个调用接口进行显示对象的绘制，包括startdraw、transform、draw、enddraw。之后，每隔16ms(或者也可以是其他的时间间隔)调用stage的下一个tick方法，进行下一个显示对象的渲染处理。

其中，目标渲染器在执行具体的渲染处理逻辑时，根据对应的不同浏览器类型，执行的处理逻辑也是不同的。具体的，如果flashrenderer，则可以通过以下方式进行处理：

步骤一：加载flash播放器；

步骤二：通过所述开始绘图接口(startdraw)调用所述flash播放器的第一预置接口生成flash元素；

步骤三：通过所述绘图位移转换接口(transform)设置所述flash元素的属性，以便对当前的处理对象进行变换；例如，可以是设置flash元素的x，y，rotation，scale属性来移动，旋转，缩放图片；

步骤四：通过所述绘图接口(draw)调用flash播放器最外层容器的第二预置接口(如，addchild)显示所述当前处理对象。

在这种渲染器中，结束绘图接口(enddraw)可以不执行任何操作。

如果目标渲染器是domrenderer，则可以通过以下方式进行处理：

步骤一：通过所述开始绘图接口(startdraw)调用第三预置接口(如document.createelement)，生成div标签；

步骤二：通过所述绘图位移转换接口(transform)调用所述div标签的第四预置接口，以便对当前的处理对象进行变换；

步骤三：通过所述绘图接口(draw)调用div标签的第五预置接口(如appendchild)将div标签添加到页面上进行显示。

在这种渲染器中，结束绘图接口(enddraw)也可以不执行任何操作。

如果目标渲染器是canvasrenderer，则可以通过以下方式进行处理：

步骤一：通过所述开始绘图接口(startdraw)调用canvas的第六预置接口(如canvascontext2d.save)，以便存储环境数据；

步骤二：通过所述绘图位移转换接口调用canvas的第七预置接口(如canvascontext2d.translate,rotate,scale)，以便对当前的处理对象进行变换；

步骤三：通过所述绘图接口调用canvas的第八预置接口(如canvascontext2d.drawimage)对所述处理对象进行绘图；

步骤四：通过所述绘图结束接口调用canvas的第九预置接口(如canvascontext2d.restore)，以便恢复环境数据。

总之，通过本申请实施例，由于可以通过渲染器抽象基类实现对各种具体渲染器子类的统一封装，提供统一的调用接口，因此，可以实现显示对象与浏览器类型之间的解耦，在开发动态页面时，可以通过统一的调用接口来定义显示对象的渲染方法，之后在具体进行页面的展示时，再由页面中注入的脚本进行浏览器类型的判断，并根据判断结果生成对应的目标渲染器，并由该目标渲染器内部定义的各个接口的处理逻辑，对页面内各个显示对象进行具体的渲染处理操作。可见，通过这种方式，开发者可以不必关心具体的浏览器类型，只要按照本申请实施例提供的类库进行一次开发，即可在各种终端设备、各种浏览器中都进行正常的渲染及展示，从而提高开发效率，避免针对同一页面保存 多份不同的页面代码，因此，还可以节省系统的存储资源。

与本申请实施例提供的动态页面渲染方法相对应，本申请实施例还提供了一种动态页面渲染装置，参见图6，该装置具体可以包括：

类库提供单元601，用于提供类库，所述类库中包括渲染器抽象基类以及显示类；所述渲染器抽象基类提供多个调用接口，通过继承该渲染器抽象基类提供多个渲染器子类，不同的渲染器子类对应不同的浏览器类型，在渲染器子类内部，根据对应浏览器类型对显示对象的渲染方式，实现各个调用接口的处理逻辑；所述显示类定义各类型显示对象的属性及渲染方法，所述渲染方法通过所述渲染器抽象基类的各个调用接口进行定义，以便通过对所述显示类进行实例化的方式进行动态界面的编辑；

目标渲染器生成单元602，用于在目标浏览器中展示所述动态页面时，通过执行所述动态页面中注入的脚本确定所述目标浏览器的类型，并通过对对应的渲染器子类进行实例化，创建对应的目标渲染器；

渲染处理单元603，用于遍历所述动态页面的显示结构树，通过所述目标渲染器对所述显示结构树中的各个显示对象进行渲染处理。

其中，所述调用接口包括以下接口中的一个或多个：开始绘图接口、绘图位移转换接口、绘图接口、绘图结束接口。

所述渲染器子类包括适用于第一类浏览器的第一渲染器子类，所述第一类浏览器基于flash进行显示对象的渲染，所述渲染处理单元包括：

播放器加载子单元，用于加载flash播放器；

flash元素生成子单元，用于通过所述开始绘图接口调用所述flash播放器的第一预置接口生成flash元素；

第一变换子单元，用于通过所述绘图位移转换接口设置所述flash元素的属性，以便对当前的处理对象进行变换；

第一显示子单元，用于通过所述绘图接口调用flash播放器最外层容器的第二预置接口显示所述当前处理对象。

所述渲染器子类包括适用于第二类浏览器的第二渲染器子类，所述第二类浏览器基于div标签进行显示对象的渲染，所述渲染处理单元包括：

div标签生成子单元，用于通过所述开始绘图接口调用第三预置接口，生成div标签；

第二变换子单元，用于通过所述绘图位移转换接口调用所述div标签的第四预置接口，以便对当前的处理对象进行变换；

第二显示子单元，用于通过所述绘图接口调用div标签的第五预置接口将div标签添加到页面上进行显示。

所述渲染器子类包括适用于第三类浏览器的第三渲染器子类，所述第三类浏览器基于canvas标签进行显示对象的渲染，所述渲染处理单元包括：

环境数据存储子单元，用于通过所述开始绘图接口调用canvas的第六预置接口，以便存储环境数据；

第三变换子单元，用于通过所述绘图位移转换接口调用canvas的第七预置接口，以便对当前的处理对象进行变换；

第三显示子单元，用于通过所述绘图接口调用canvas的第八预置接口对所述处理对象进行绘图；

环境数据恢复子单元，用于通过所述绘图结束接口调用canvas的第九预置接口，以便恢复环境数据。

其中，所述显示类包括显示对象类以及容器类，利用所述调用接口对显示对象类或者容器类进行显示方式的定义。

所述容器类包括舞台类，所述舞台为页面的最外层容器，此时，所述装置还可以包括：

舞台生成单元，用于执行所述动态页面中注入的脚本生成所述动态页面的舞台；

渲染器注入单元，用于将所述生成的目标渲染器注入到所述舞台，以便通 过调用所述舞台的预置方法，执行所述遍历所述动态页面的显示结构树的操作。

具体实现时，所述动态页面的页面代码为利用跨平台语言进行编辑。所述跨平台语言包括javascript，所述脚本为javascript脚本。

通过本申请实施例，由于可以通过渲染器抽象基类实现对各种具体渲染器子类的统一封装，提供统一的调用接口，因此，可以实现显示对象与浏览器类型之间的解耦，在开发动态页面时，可以通过统一的调用接口来定义显示对象的渲染方法，之后在具体进行页面的展示时，再由页面中注入的脚本进行浏览器类型的判断，并根据判断结果生成对应的目标渲染器，并由该目标渲染器内部定义的各个接口的处理逻辑，对页面内各个显示对象进行具体的渲染处理操作。可见，通过这种方式，开发者可以不必关心具体的浏览器类型，只要按照本申请实施例提供的类库进行一次开发，即可在各种终端设备、各种浏览器中都进行正常的渲染及展示，从而提高开发效率，避免针对同一页面保存多份不同的页面代码，因此，还可以节省系统的存储资源。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上对本申请所提供的动态页面渲染方法及装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。