CN102073502B

CN102073502B - 一种利用web原生布局进行页面渲染的方法及装置

Info

Publication number: CN102073502B
Application number: CN 201110004783
Authority: CN
Inventors: 欧阳先伟
Original assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Current assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Priority date: 2011-01-11
Filing date: 2011-01-11
Publication date: 2013-02-20
Anticipated expiration: 2031-01-11
Also published as: CN102073502A

Abstract

本发明提供了一种利用WEB原生布局进行页面渲染的方法及装置。其中利用WEB原生布局进行页面渲染的方法，包括步骤：加载网页到DOM构造完成；改写网页的DOM节点的结构以生成控件，其中所述改写是基于DOM节点的信息进行的；读取DOM节点的原始布局信息；以及填充改写后的DOM节点的布局信息以设置控件布局，其中填充改写后的DOM节点的布局信息是以DOM节点的原始布局信息为依据，按照预定的布局一致性填充策略进行的。采用本发明的方法进行页面渲染，在页面渲染成功的情况下可以使控件在原始DOM节点基础上提供更高级的功能，在页面渲染失败的情况下也能保留原始DOM节点的信息，从而大大地提高了用户体验，还保证了页面渲染前后布局的一致性，提高了页面渲染的效率。

Description

一种利用WEB原生布局进行页面渲染的方法及装置

【技术领域】

本发明涉及网页开发领域，特别是涉及一种利用WEB原生布局进行页面渲染的方法。

【背景技术】

在打开网页的过程中，对页面进行渲染是浏览器的工作之一。所谓的渲染，是指针对网页的数据项和可操作的元素(即网页标签)进行修饰性处理，以增强页面元素的可表现能力和可介入处理能力的过程。所谓修饰性处理，涉及的是数据项或操作的可操作限制、数据项或数值的突出显示、数值的格式化输出等。所谓可表现能力，主要是针对用户页面中的数据项和操作。页面的标签作为数据项和操作的表现技术，要求具备动态的表现能力，即根据不同的请求和许可限制展现出不同的效果。所谓可介入处理，即定制修饰规则来干预用户界面实例化时的表现风格和形式，比如在网页上展现对数据项或操作的授权限制。通俗地说，渲染是为了使网页具有更好的显示和动态效果而对加载的网页文档上的元素进行修饰性处理的过程。

页面的渲染通常是通过脚本技术实现的，现有技术在网页开发中已有一些成熟的脚本库可以用于页面的渲染，例如EXT，Jquery等，但是使用这些脚本库进行页面渲染始终存在一个问题，那就是在渲染失败时，页面会出现白屏。例如现有技术中的一种做法是利用脚本库的布局器进行布局，我们可以把浏览器文档理解为一个容器，控件是放在这个容器当中的，那么布局器就是控件与其所在容器之间的一层抽象，它决定了控件在容器中的位置，所以在网页的渲染中，必须首先加载布局器，然后再加载控件，但这会导致由于布局器加载失败而引起的页面白屏(页面一片空白无任何内容)。布局器加载失败通常都是JS(JAVASCRIPT)加载失败造成的，而造成JS加载失败的原因有可能是在加载JS时网络突然中断或采用了第三方的JS库而第三方的JS库出现了问题。

现有技术还有一种做法，没有采用上述的布局器方式进行页面渲染，而是采用网页文档的节点标记待渲染位置，然后利用控件库对这个节点进行渲染。

以EXT技术为例对这种方式进行说明，例如需要生成一个表格控件，网页中的代码如下：

生成该表格控件的渲染脚本代码如下：

Ext.onReady(function(){

Ext.QuickTips.init()；

var myData＝[

[′A公司′，′www.A.com′，′A地′，1980]，

[′B公司′，′www.B.com′，′B地′，1990]，

[′C公司′，′www.C.com′，′C地′，2000]，

[′D公司′，′www.D.com′，′D地′，2010]，

]；

var store＝new Ext.data.ArrayStore({

fields:[

{name:′company′}，

{name:′price′}，

{name:′change′}，

{name:′pctChange′}

]

})；

store.loadData(myData)；

var grid＝new Ext.grid.GridPanel({

store:store，

columns:[

{

header:′公司名称′，

width:200，

sortable:true，

}，

{

header:′URL′，

width:200，

sortable:true，

}，

{

header:′地址′，

width:250，

sortable:true，

}，

{

header:′创办时间′，

width:100，

sortable:true，

}

]，

stripeRows:true，

height:350，

width:600，

title:′示例′，

stateful:true，

stateId:′grid′

})；

grid.render(′grid-example′)；

})；

从上述代码可以看出表格控件(代码中的grid)中的数据，是由一个JAVASCRIPT变量提供的(代码中的myDate)，这样如果渲染成功，会出现一个如下所示的表格：

但是如果渲染失败，在页面上的表示表格的区域(<divid＝″grid-example″></div>)将没有任何数据，即页面会出现局部的白屏。另外可以看出，在这种渲染方式下，对页面的渲染只能以单个节点为单位进行，在每个控件生成之后就需要填充该控件的数据(上例中的store)及布局信息(上例中的height、width)，这是由于布局信息是由控件的参数来设置的。

【发明内容】

本发明提供了一种利用WEB原生布局进行页面渲染的方法和装置，以解决现有技术中页面渲染失败出现白屏或局部白屏的技术问题。

利用WEB原生布局进行页面渲染的方法包括以下步骤：

步骤1：加载网页到DOM构造完成；

步骤2：改写网页的DOM节点的结构以生成控件，其中所述改写是基于DOM节点的信息进行的；

步骤3：读取DOM节点的原始布局信息；

步骤4：填充改写后的DOM节点的布局信息以设置控件布局，其中填充改写后的DOM节点的布局信息是以DOM节点的原始布局信息为依据，按照预定的布局一致性填充策略进行的。

根据本发明的实施方式，改写网页的DOM节点的结构包括以下步骤：

步骤21：识别标签及标签参数；

步骤22：根据标签参数将控件需要的特定结构补充写入到标签原有位置，生成并初始化控件。

根据本发明的实施方式，标签参数至少包括用以指示相应控件类型的标签的属性及属性值。

根据本发明的实施方式，在生成并初始化控件之后还包括步骤23：在控件对应的标签中添加分类的CSS接口。

根据本发明的实施方式，加载网页到DOM构造完成包括加载网页完成。

根据本发明的实施方式，改写网页的DOM节点的结构包括扩展标签的个数或扩展标签中属性的个数。

根据本发明的实施方式，布局一致性填充策略包括严格按照DOM节点的原始布局信息填充改写后的DOM节点的布局信息，使得渲染前后页面布局完全一致。

根据本发明的实施方式，布局一致性填充策略还包括参照DOM节点的原始布局信息以一定的偏移量填充改写后的DOM节点的布局信息，使得渲染前后页面布局整体结构一致。

根据本发明的实施方式，改写网页的DOM节点的结构、读取DOM节点的原始布局信息、填充改写后的DOM节点的布局信息是以单个节点为单位进行的。

根据本发明的实施方式，改写网页的DOM节点的结构、读取DOM节点的原始布局信息、填充改写后的DOM节点的布局信息是以批量节点为单位进行的。

根据本发明的实施方式，在批量读取DOM节点的原始布局信息时还需要对读取的所述DOM节点的原始布局信息进行缓存。

利用WEB原生布局进行页面渲染的装置包括以下单元：

加载网页单元，用于加载网页到DOM构造完成；

改写DOM节点的结构单元，用于改写网页的DOM节点的结构以生成控件，其中改写是基于DOM节点的信息进行的；

读取DOM节点的布局信息单元，用于读取DOM节点的原始布局信息；

填充DOM节点的布局信息单元，用于填充改写后的DOM节点的布局信息以设置控件的布局，其中填充DOM节点的布局信息是以DOM节点的原始布局信息为依据，按照预定的布局一致性填充策略进行的。

根据本发明的实施方式，改写DOM节点的结构单元包括以下单元：

识别标签及标签参数单元，用于识别标签及所述标签参数；

生成并初始化控件单元，用于根据标签参数将控件需要的特定结构补充写入到标签原有位置，生成并初始化控件。

根据本发明的实施方式，标签参数至少包括用以指示生成相应控件类型的标签的属性及属性值。

根据本发明的实施方式，改写DOM节点的结构单元还包括：添加CSS接口单元，用于在控件对应的标签中添加分类的CSS接口。

根据本发明的实施方式，改写网页的DOM节点的结构、读取DOM节点的原始布局信息、填充改写后的所述DOM节点的布局信息是以批量节点为单位进行的。

根据本发明的实施方式，在批量读取DOM节点的原始布局信息时读取DOM节点的布局信息单元还需要对读取的DOM节点的原始布局信息进行缓存。

由以上技术方案可以看出，通过利用WEB原生布局进行页面渲染，在页面渲染成功的情况下可以使控件在原始DOM节点基础上提供更高级的功能，在页面渲染失败的情况下也能保留原始DOM节点的信息，有效避免页面渲染失败出现白屏或局部白屏而导致用户无法获得想要的数据的情况，从而大大地提高了用户体验；同时通过以批量控件为单位进行操作，有效地提高了页面渲染的效率。

【附图说明】

图1为利用WEB原生布局进行页面渲染的方法流程示意图；

图2为利用WEB原生布局进行页面渲染的方法中，改写DOM节点的结构的流程示意图；

图3为以单个节点为单位利用WEB原生布局进行页面渲染的方法流程示意图；

图4为以批量节点为单位利用WEB原生布局进行页面渲染的方法流程示意图；

图5为利用WEB原生布局进行页面渲染的装置结构示意图。

【具体实施方式】

为了使本发明的目的、技术方案和优点更加清楚，下面结合附图和具体实施例对本发明进行详细描述。

根据本发明的一方面提供一种利用WEB原生布局进行页面渲染的方法。所谓WEB原生布局，指的是利用网页本身的标签来控制页面的结构，例如<table></table>标签，就可以控制一个表格结构的布局。

请参考图1，利用WEB原生布局进行页面渲染的方法100包括以下步骤：

步骤110：加载网页到DOM构造完成。

根据浏览器(包括手机浏览器)工作原理，浏览器加载网页的过程大致如以下列表：

HTML(或WML)解析完毕。

外部脚本和样式表加载完毕。

脚本(包括外部脚本和内部脚本)在文档内解析并执行。

DOM完全构造起来。

图片和外部内容加载。

网页完成加载。

由以上页序可以看出，脚本会在DOM完全构造起来之前就开始执行，而页面渲染是通过脚本访问DOM实现的，如果按照浏览器正常的加载页序，我们在网页头部中定义的脚本(内部脚本)和外部文件中定义的脚本(外部脚本)就不能有访问DOM的操作(因为执行这些脚本时DOM可能还未完全构造起来)，这使得页面渲染很难有效进行。为了解决这个问题，现有技术中通常是采用window对象的load事件来绑定一个脚本函数，load事件表示网页加载完毕，也就是说，当网页加载完毕就会触发window对象的load事件，这时就会执行load事件绑定的脚本函数，在这个函数中就可以定义访问DOM的操作。但是这种做法需要等待网页完全加载，而由上面浏览器加载网页的页序可以看出，在DOM构造之后还需要加载图片，而图片的加载速度通常比较慢，为了加快网页加载的过程，现有技术还有一种做法是定义一个新的事件，使得对这个事件绑定的函数在DOM完全构造起来以后即可触发。例如：对document对象定义ready事件，使得该事件表示DOM已完全构造，因此在DOM完全构造起来之后就会触发ready事件，这时绑定ready事件的函数内定义的访问DOM的脚本即可执行。表示该事件绑定一个在DOM完全构造后立即触发的函数的伪代码如下：

document.ready(function{

})

本发明可以采用上面所述现有技术的两种方式来实现加载网页的操作，即可以采用网页完全加载或网页加载到DOM构造完成两种方式实现加载网页的操作。

步骤120：改写DOM节点的结构以生成控件。所述的改写DOM节点的结构是指将代表控件的DOM节点扩展为多个节点以生成控件，例如原始DOM节点处只有一个网页标签，标签中有两个属性及属性值，改写后在该DOM节点处变为十个标签，每个标签中有五个属性及属性值，也就是扩展标签的个数或扩展标签中属性的个数。

步骤110中DOM完全构建起来以后，每个DOM节点都具有一些原始信息，为了能够在一些节点处生成具备更丰富内容和功能的控件，需要在这些原始的节点处添加更多的信息。在本发明步骤120中，对DOM节点的结构进行改写，是基于原始DOM节点信息进行的，而不是完全重新生成新的DOM节点信息覆盖在原来的DOM节点上，这样做是为了既能保证渲染成功的情况下控件实现功能上的升级，又能保证渲染失败的情况下该DOM节点也能实现原始的功能。

例如使用本发明的方法进行页面渲染，对于原始的input/table/select等标签，在页面渲染成功后，利用input标签生成的checkbox多选框控件将拥有“半选”与“多级联动”功能，select下拉框可以支持图片的选择，table表格可以锁定表头或若干数据列，如果渲染失败，原始标签的功能也能保留。所谓的半选是指一种介于选择与没有选择之间的状态，即checkBox被选择上了，但显示时为灰色；所谓的多级联动是指诸如省、市、区这样的三个选择框，当选择了广东省之后，在市一级的选项会出现广东省内所具有的城市供选择，当选择了广州市以后，在区一级的选项会出现广州市里所具有的区供选择。

又如现有技术中提到的form中的<input value＝″123″>这个原始标签，按照本发明的方法根据DOM节点的原始信息对DOM节点的结构进行改写，则可以保留这个标签的初始值，这样在对form执行了reset操作以后，123仍然能够显示。

下面结合图2，对所述步骤120中改写DOM节点的结构的操作进行进一步的说明。其中图2为利用WEB原生布局进行页面渲染的方法中，改写DOM节点的结构的流程示意图。如图2所示，改写DOM节点的结构的操作包含了以下几个步骤：

步骤1201：识别标签及标签参数。

标签是指诸如<html></html>、<body></body>、<p></p>、<div></div>的标签对，在标签中可以有各种属性及属性值，例如<p id＝″u″></p>中id是这个p标签的属性，u为属性值。一个标签对就构成了一个DOM节点，在步骤120对节点进行遍历的过程中，将分别识别出标签及标签的参数代表的含义。为了在本发明中可以根据WEB原生布局进行页面渲染，就需要知道在网页的原始标签位置应该放置什么控件，所以在网页中需要在标签中加入能够表明控件类型的标签参数，即参数包括对控件类型的说明。标签参数由某个属性及属性值共同表示。在遍历的过程中，在标签中发现某个属性，并通过读取这个属性的属性值，就可以知道该标签位置应该放置何种控件。下面以HTML片段代码来进一步说明以上描述。

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

以上代码中的ecui＝″type:calendar″即为标签参数，它表明在这个标签的位置上应该放置日历控件。同样的ecui＝″type:control″、ecui＝″type:control″都是能够表明控件类型的标签参数。

步骤1202：根据标签参数将控件需要的特定结构补充写入到标签原有位置，生成并初始化控件。生成控件的过程即为改写DOM节点的结构的过程。通过标签参数可以知道该标签位置上需要生成何种控件，为了生成这个控件，就需要改写该标签对表示的DOM节点的结构，也就是需要扩展该DOM节点为多个节点，以补充生成该控件所需要的特定的结构信息。

为了对生成的控件进行统一的样式控制，步骤120还可以包含步骤1203：在控件对应的标签中添加分类的CSS(Cascading Style Sheet)接口。CSS是一些样式集，其中包含了颜色之类的一些信息。这些样式集分为若干类，每一类可以应用到不同的控件上。当控件生成之后，通过在控件对应的标签中添加应用到该控件上的CSS接口，我们就可以让各个控件具有各自不同的展示效果。

步骤130：读取DOM节点的原始布局信息。为了避免渲染失败的情况下失去网页应有的信息而出现白屏，本发明利用了WEB原生布局来控制页面的结构，这样，在网页的DOM节点的原始信息中，就包含了页面的布局信息，为了对生成的控件布局进行进一步的设置，我们需要首先读取这些原始布局信息。

步骤140：填充改写后的DOM节点的布局信息以设置控件的布局。这是指以步骤130中读取到的DOM节点的原始布局信息为依据，按照预定的布局一致性填充策略填充改写后的DOM节点的布局信息以设置控件的布局。由于控件可以理解为对DOM节点的封装，即一个控件包含了多个节点，这多个节点是在步骤120中根据代表控件的DOM节点扩展而来的，因此需要根据读取到的DOM节点的原始布局信息填充扩展后的多个节点的布局信息，以设置生成的控件的布局。预定的布局一致性填充策略包括严格按照DOM节点的原始布局信息计算每个控件的位置及应该占有的空间，相应地填充该控件封装的各个DOM节点的布局信息，使得渲染前后页面布局完全一致，或参照DOM节点的原始布局信息计算控件的位置及应该占有的空间，以一定的偏移量填充控件封装的各个DOM节点的布局信息，使得渲染前后页面布局整体结构一致。所谓的整体结构一致，是指渲染成功后控件在页面中的位置排列应该与渲染前标签定义的页面结构一致，而控件的大小可以与标签定义的原始节点的大小有基于一定阈值的不同。如在标签中定义了左上方为一个表格，表格下方有一个下拉框，渲染成功后页面左上方仍然为一个表格，表格下方仍然有一个下拉框，但是渲染后的表格与下拉框的大小可以与原始节点定义的大小有基于一定阈值的不同。

下面以现有技术中提到的表格为例，对本发明与现有技术的区别进行进一步说明。下面是采用本发明的方法时，在渲染前表格控件生成区域的HTML文档的原始标签：

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

从以上代码可以看出，表格数据是直接写在文档上的，而不需要通过JAVASCRIPT变量来传递，这样无论渲染成功或者失败，表格里的数据均可以看见，不会导致渲染失败后的局部白屏现象。同时布局信息是在标签中设置的而不是通过控件的参数设置的，这样通过本发明方法中读取原始布局信息、设置布局信息的操作，就可以实现渲染前后页面布局基本一致的效果。而在对上述标志为表格控件的DOM节点进行改写的过程中，将补充生成表格控件所需要的DOM结构，以实现表格功能上的升级。在渲染成功后，表格控件能实现表头锁定等复杂的功能，如果渲染失败，表格也能正常显示应该显示的数据信息。

上述利用WEB原生布局进行页面渲染的方法100的步骤120：改写DOM节点的结构、步骤130：读取DOM节点的原始布局信息、步骤140：填充改写后的DOM节点的布局信息，可以是以单个节点为单位进行操作的，也可以是以批量节点为单位进行操作的。

如图3所示，为以单个节点为单位执行方法100的流程示意图。在网页加载到DOM构造完成之后，对网页的所有节点进行遍历，对标签中标志了控件类型的DOM节点分别执行改写DOM节点的结构、读取DOM节点的原始布局信息、填充改写后的DOM节点的布局信息操作，当对同一个节点执行完上述操作后，再对下一个节点执行上述操作，直到到达网页文档末尾。

如图4所示，为以批量节点为单位执行方法100的流程示意图。在网页加载到DOM构造完成之后，对网页的所有节点进行遍历，对标签中标志了控件类型的批量DOM节点执行改写DOM节点的结构操作，直到到达网页文档末尾；然后再次对网页的所有节点进行遍历，对批量DOM节点执行读取DOM节点的原始布局信息操作，直到到达网页文档末尾；最后再次对网页的所有节点进行遍历，对批量节点执行填充改写后的DOM节点的布局信息操作，直到到达网页文档末尾。在对批量DOM节点执行读取DOM节点的原始布局信息时还包括对原始布局信息进行缓存。

在图3的方式下，针对单个节点执行改写、读取、填充操作，会造成浏览器频繁的读写交替动作，这会降低渲染的效率，而在图4的方式下，改写、读取、填充操作都是对批量节点进行的，这可以大大提升渲染的速度。

根据本发明的另一方面提供一种利用WEB原生布局进行页面渲染的装置。

请参考图5，为利用WEB原生布局进行页面渲染的装置结构示意图。如图5所示，利用WEB原生布局进行页面渲染的装置200包括加载网页单元210、改写DOM节点的结构单元220、读取DOM节点的布局信息单元230以及填充DOM节点的布局信息单元240。

其中，加载网页单元210，用于加载网页到DOM构造完成。

改写DOM节点的结构单元220，用于在加载网页后，改写网页的DOM节点的结构以生成控件。所述的改写DOM节点的结构是指将代表控件的DOM节点扩展为多个节点以生成控件，例如原始DOM节点处只有一个标签，标签中有两个属性及属性值，改写后在该DOM节点处变为十个标签，每个标签中有五个属性及属性值，也就是扩展标签的个数或扩展标签中属性的个数。

在本发明中，对DOM节点的结构进行改写，是基于原始DOM节点信息进行的，而不是完全重新生成新的DOM节点信息覆盖在原来的DOM节点上，这样做是为了既能保证渲染成功的情况下控件实现功能上的升级，又能保证渲染失败的情况下该DOM节点也能实现原始的功能。

读取DOM节点的布局信息单元230，用于读取DOM节点的原始布局信息。

为了避免渲染失败的情况下失去网页应有的信息而出现白屏，本发明利用了WEB原生布局来控制页面的结构，这样，在网页中的DOM节点的原始信息中，就包含了页面的布局信息，为了对生成的控件布局进行进一步的设置，读取DOM节点的布局信息单元将首先读取这些原始布局信息。

填充DOM节点的布局信息单元240，用于填充改写后的DOM节点的布局信息以设置控件的布局。这是指以读取DOM节点的布局信息单元读取到的DOM节点的原始布局信息为依据，按照预定的布局一致性填充策略填充DOM节点的布局信息以设置控件的布局。由于控件可以理解为对DOM节点的封装，即一个控件包含了多个节点，这多个节点是由改写DOM节点的结构单元根据代表控件的DOM节点扩展而来的，因此需要根据读取到的DOM节点布局信息填充扩展后的多个节点的布局信息，以设置生成的控件的布局。预定的布局一致性填充策略包括严格按照DOM节点的原始布局信息计算每个控件的位置及应该占有的空间，相应地填充该控件封装的各个DOM节点的布局信息，使得渲染前后页面布局完全一致，或参照DOM节点的原始布局信息计算控件的位置及应该占有的空间，以一定的偏移量填充控件封装的各个DOM节点的布局信息，使得渲染前后页面布局整体结构一致。

进一步地，改写DOM节点的结构单元220可以包含以下单元：识别标签及标签参数单元2201、生成并初始化控件单元2202以及添加CSS接口单元2203。

其中，识别标签及标签参数单元2201，用于识别出每个标签及标签的参数代表的含义。为了在本发明中可以根据WEB原生布局进行页面渲染，就需要知道在网页的原始标签位置应该放置什么控件，所以在网页中需要在标签中加入能够表明控件类型的标签参数，即参数包括对控件类型的说明。标签参数由某个属性及属性值共同表示。在进行标签遍历的过程中，在标签中发现某个属性，并通过读取这个属性的属性值，就可以知道该标签位置应该放置何种控件。

生成并初始化控件单元2202，用于根据标签参数将控件需要的特定结构补充写入到标签原有位置，生成并初始化控件。生成控件的过程就是改写DOM节点的结构的过程。通过标签参数可以知道该标签位置上需要生成何种控件，为了生成这个控件，就需要改写该标签对表示的DOM节点的结构，也就是需要扩展该DOM节点为多个节点，以补充生成该控件所需要的结构信息。

添加CSS接口单元2203，用于在控件对应的标签中添加分类的CSS接口。当控件生成之后，通过在控件对应的标签中添加应用到该控件上的CSS接口，我们就可以让各个控件具有各自不同的展示效果。

上述利用WEB原生布局进行页面渲染的装置中，改写DOM节点的结构单元、读取DOM节点的布局信息单元以及填充DOM节点的布局信息单元执行的操作，可以是以单个节点为单位进行的，也可以是以批量节点为单位进行的。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims

1.一种利用WEB原生布局进行页面渲染的方法，其特征在于，所述方法包括步骤：

加载网页到DOM构造完成；

改写所述网页的DOM节点的结构以生成控件，其中所述改写是基于所述DOM节点的信息进行的；

读取所述DOM节点的原始布局信息；以及

填充改写后的所述DOM节点的布局信息以设置所述控件布局，其中填充改写后的所述DOM节点的布局信息是以所述DOM节点的原始布局信息为依据，按照预定的布局一致性填充策略进行的。

2.根据权利要求1所述的利用WEB原生布局进行页面渲染的方法，其特征在于，所述改写所述网页的DOM节点的结构包括以下步骤：

识别标签及标签参数；

根据所述标签参数将所述控件需要的特定结构补充写入到所述标签原有位置，生成并初始化所述控件。

3.根据权利要求2所述的利用WEB原生布局进行页面渲染的方法，其特征在于，所述标签参数至少包括用以指示相应控件类型的所述标签的属性及属性值。

4.根据权利要求2所述的利用WEB原生布局进行页面渲染的方法，其特征在于，在所述生成并初始化所述控件之后还包括：在所述控件对应的所述标签中添加分类的CSS接口。

5.根据权利要求1所述的利用WEB原生布局进行页面渲染的方法，其特征在于，所述网页在页面渲染前包含数据。

6.根据权利要求5所述的利用WEB原生布局进行页面渲染的方法，其特征在于，所述数据在页面渲染失败时仍能正常显示。

7.根据权利要求1所述的利用WEB原生布局进行页面渲染的方法，其特征在于，所述加载网页到DOM构造完成包括加载所述网页完成。

8.根据权利要求1所述的利用WEB原生布局进行页面渲染的方法，其特征在于，所述改写所述网页的DOM节点的结构包括扩展标签的个数或扩展所述标签中属性的个数。

9.根据权利要求1所述的利用WEB原生布局进行页面渲染的方法，其特征在于，所述布局一致性填充策略包括严格按照所述DOM节点的原始布局信息填充改写后的所述DOM节点的布局信息，使得渲染前后页面布局完全一致。

10.根据权利要求1所述的利用WEB原生布局进行页面渲染的方法，其特征在于，所述布局一致性填充策略包括参照所述DOM节点的原始布局信息以一定的偏移量填充改写后的所述DOM节点的布局信息，使得渲染前后页面布局整体结构一致。

11.根据权利要求1所述的利用WEB原生布局进行页面渲染的方法，其特征在于，所述改写所述网页的DOM节点的结构、所述读取所述DOM节点的原始布局信息、所述填充改写后的所述DOM节点的布局信息是以单个节点为单位进行的。

12.根据权利要求1所述的利用WEB原生布局进行页面渲染的方法，其特征在于，所述改写所述网页的DOM节点的结构、所述读取所述DOM节点的原始布局信息、所述填充改写后的所述DOM节点的布局信息是以批量节点为单位进行的。

13.根据权利要求12所述的利用WEB原生布局进行页面渲染的方法，其特征在于，在读取所述DOM节点的原始布局信息之后还需要对读取的所述DOM节点的原始布局信息进行缓存。

14.一种利用WEB原生布局进行页面渲染的装置，其特征在于，所述装置包括：

加载网页单元，用于加载所述网页到DOM构造完成；

改写DOM节点的结构单元，用于改写所述网页的DOM节点的结构以生成控件，其中所述改写是基于所述DOM节点的信息进行的；

读取DOM节点的布局信息单元，用于读取所述DOM节点的原始布局信息；以及

填充DOM节点的布局信息单元，用于填充改写后的所述DOM节点的布局信息以设置所述控件的布局，其中填充改写后的所述DOM节点的布局信息是以所述DOM节点的原始布局信息为依据，按照预定的布局一致性填充策略进行的。

15.根据权利要求14所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述改写DOM节点的结构单元包括以下单元：

识别标签及标签参数单元，用于识别标签及所述标签参数；

生成并初始化控件单元，用于根据所述标签参数将所述控件需要的特定结构补充写入到所述标签原有位置，生成并初始化所述控件。

16.根据权利要求15所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述标签参数至少包括用以指示生成相应控件类型的所述标签的属性及属性值。

17.根据权利要求15所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述改写DOM节点的结构单元还包括：添加CSS接口单元，用于在所述控件对应的所述标签中添加分类的CSS接口。

18.根据权利要求14所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述网页在页面渲染前包含数据。

19.根据权利要求18所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述数据在页面渲染失败时仍能正常显示。

20.根据权利要求14所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述加载网页到DOM构造完成包括加载所述网页完成。

21.根据权利要求14所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述改写所述网页的DOM节点的结构包括扩展标签的个数或扩展所述标签中属性的个数。

22.根据权利要求14所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述布局一致性填充策略包括严格按照所述DOM节点的原始布局信息填充改写后的所述DOM节点的布局信息，使得渲染前后页面布局完全一致。

23.根据权利要求14所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述布局一致性填充策略包括参照所述DOM节点的原始布局信息以一定的偏移量填充改写后的所述DOM节点的布局信息，使得渲染前后页面布局整体结构一致。

24.根据权利要求14所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述改写所述网页的DOM节点的结构、所述读取所述DOM节点的原始布局信息、所述填充改写后的所述DOM节点的布局信息是以单个节点为单位进行的。

25.根据权利要求14所述的利用WEB原生布局进行页面渲染的装置，其特征在于，所述改写所述网页的DOM节点的结构、所述读取所述DOM节点的原始布局信息、所述填充改写后的所述DOM节点的布局信息是以批量节点为单位进行的。

26.根据权利要求25所述的利用WEB原生布局进行页面渲染的装置，其特征在于，读取DOM节点的布局信息单元在读取所述DOM节点的原始布局信息之后还需要对读取的所述DOM节点的原始布局信息进行缓存。