CN102073502A - 一种利用web原生布局进行页面渲染的方法及装置 - Google Patents
一种利用web原生布局进行页面渲染的方法及装置 Download PDFInfo
- Publication number
- CN102073502A CN102073502A CN2011100047837A CN201110004783A CN102073502A CN 102073502 A CN102073502 A CN 102073502A CN 2011100047837 A CN2011100047837 A CN 2011100047837A CN 201110004783 A CN201110004783 A CN 201110004783A CN 102073502 A CN102073502 A CN 102073502A
- Authority
- CN
- China
- Prior art keywords
- layout
- dom node
- web
- layout information
- node
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Landscapes
- Document Processing Apparatus (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种利用WEB原生布局进行页面渲染的方法及装置。其中利用WEB原生布局进行页面渲染的方法,包括步骤:加载网页到DOM构造完成;改写网页的DOM节点的结构以生成控件,其中所述改写是基于DOM节点的信息进行的;读取DOM节点的原始布局信息;以及填充改写后的DOM节点的布局信息以设置控件布局,其中填充改写后的DOM节点的布局信息是以DOM节点的原始布局信息为依据,按照预定的布局一致性填充策略进行的。采用本发明的方法进行页面渲染,在页面渲染成功的情况下可以使控件在原始DOM节点基础上提供更高级的功能,在页面渲染失败的情况下也能保留原始DOM节点的信息,从而大大地提高了用户体验,还保证了页面渲染前后布局的一致性,提高了页面渲染的效率。
Description
【技术领域】
本发明涉及网页开发领域,特别是涉及一种利用WEB原生布局进行页面渲染的方法。
【背景技术】
在打开网页的过程中,对页面进行渲染是浏览器的工作之一。所谓的渲染,是指针对网页的数据项和可操作的元素(即网页标签)进行修饰性处理,以增强页面元素的可表现能力和可介入处理能力的过程。所谓修饰性处理,涉及的是数据项或操作的可操作限制、数据项或数值的突出显示、数值的格式化输出等。所谓可表现能力,主要是针对用户页面中的数据项和操作。页面的标签作为数据项和操作的表现技术,要求具备动态的表现能力,即根据不同的请求和许可限制展现出不同的效果。所谓可介入处理,即定制修饰规则来干预用户界面实例化时的表现风格和形式,比如在网页上展现对数据项或操作的授权限制。通俗地说,渲染是为了使网页具有更好的显示和动态效果而对加载的网页文档上的元素进行修饰性处理的过程。
页面的渲染通常是通过脚本技术实现的,现有技术在网页开发中已有一些成熟的脚本库可以用于页面的渲染,例如EXT,Jquery等,但是使用这些脚本库进行页面渲染始终存在一个问题,那就是在渲染失败时,页面会出现白屏。例如现有技术中的一种做法是利用脚本库的布局器进行布局,我们可以把浏览器文档理解为一个容器,控件是放在这个容器当中的,那么布局器就是控件与其所在容器之间的一层抽象,它决定了控件在容器中的位置,所以在网页的渲染中,必须首先加载布局器,然后再加载控件,但这会导致由于布局器加载失败而引起的页面白屏(页面一片空白无任何内容)。布局器加载失败通常都是JS(JAVASCRIPT)加载失败造成的,而造成JS加载失败的原因有可能是在加载JS时网络突然中断或采用了第三方的JS库而第三方的JS库出现了问题。
现有技术还有一种做法,没有采用上述的布局器方式进行页面渲染,而是采用网页文档的节点标记待渲染位置,然后利用控件库对这个节点进行渲染。
以EXT技术为例对这种方式进行说明,例如需要生成一个表格控件,网页中的代码如下:
<diV id=″grid-example″></diV>
生成该表格控件的渲染脚本代码如下:
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节点的布局信息,使得渲染前后页面布局整体结构一致。
根据本发明的实施方式,改写网页的DOM节点的结构、读取DOM节点的原始布局信息、填充改写后的DOM节点的布局信息是以单个节点为单位进行的。
根据本发明的实施方式,改写网页的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可能还未完全构造起来),这使得页面渲染很难有效进行。为了解决这个问题,现有技术中通常是采用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片段代码来进一步说明以上描述。
<table style=″text-align:center;″>
<tbody>
<tr>
<td colspan=″3″><diV ecui=″type:calendar″></diV></td>
</tr>
<tr>
<td><span ecui=″type:control″class=″button″>上个月</span></td>
<td><span id=″datearea″></span></td>
<td><span ecui=″type:control″class=″button″>下个月</span></td>
</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文档的原始标签:
<div ecui=″type:table″>
<table style=″width:600px;″>
<tbody>
<tr>
<th style=″width:200px;″>公司名</th>
<th style=″width:200px;″>url</th>
<th style=″width:250px;″>地址</th>
<th style=″width:100px;″>创办时间</th>
</tr>
<tr>
<td>公司A</td>
<td>www.A.com</td>
<td>A地</td>
<td>1980</td>
</tr>
<tr>
<td>公司B</td>
<td>www.B.com</td>
<td>B地</td>
<td>1990</td>
</tr>
<tr>
<td>公司C</td>
<td>www.C.com</td>
<td>C地</td>
<td>2000</td>
</tr>
<tr>
<td>公司D</td>
<td>www.D.com</td>
<td>D地</td>
<td>2010</td>
</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 (26)
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.根据权利要求14所述的利用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节点的原始布局信息进行缓存。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN 201110004783 CN102073502B (zh) | 2011-01-11 | 2011-01-11 | 一种利用web原生布局进行页面渲染的方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN 201110004783 CN102073502B (zh) | 2011-01-11 | 2011-01-11 | 一种利用web原生布局进行页面渲染的方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN102073502A true CN102073502A (zh) | 2011-05-25 |
CN102073502B CN102073502B (zh) | 2013-02-20 |
Family
ID=44032048
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN 201110004783 Active CN102073502B (zh) | 2011-01-11 | 2011-01-11 | 一种利用web原生布局进行页面渲染的方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN102073502B (zh) |
Cited By (22)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102662737A (zh) * | 2012-03-14 | 2012-09-12 | 优视科技有限公司 | 扩展程序的调用方法及装置 |
CN102663056A (zh) * | 2012-03-29 | 2012-09-12 | 奇智软件(北京)有限公司 | 一种图片元素显示方法和装置 |
CN102693280A (zh) * | 2012-04-28 | 2012-09-26 | 广州市动景计算机科技有限公司 | 网页浏览方法、WebApp框架、执行JavaScript方法及装置、移动终端 |
CN103390010A (zh) * | 2012-09-10 | 2013-11-13 | 爱乐活(北京)科技有限公司 | 一种浏览器页面的显示方法及*** |
CN103399866A (zh) * | 2013-07-05 | 2013-11-20 | 北京小米科技有限责任公司 | 一种网络页面的渲染方法、装置及设备 |
CN104254849A (zh) * | 2012-10-10 | 2014-12-31 | Sk普兰尼特有限公司 | 支持网络文档的高速网络滚动的用户终端装置和方法 |
CN104281677A (zh) * | 2014-09-29 | 2015-01-14 | 百度在线网络技术(北京)有限公司 | 页面的展现方法及装置 |
CN103870558B (zh) * | 2012-03-29 | 2017-01-25 | 北京奇虎科技有限公司 | 页面渲染方法和遮罩层创建方法 |
CN107066618A (zh) * | 2017-05-09 | 2017-08-18 | 灯塔财经信息有限公司 | 一种网页页面转换后显示方法和装置 |
CN107423060A (zh) * | 2017-07-07 | 2017-12-01 | 北京小米移动软件有限公司 | 动画效果的呈现方法、装置及终端 |
CN107450912A (zh) * | 2017-07-07 | 2017-12-08 | 北京小米移动软件有限公司 | 页面的布局方法、装置及终端 |
CN108710490A (zh) * | 2017-04-12 | 2018-10-26 | 北京京东尚科信息技术有限公司 | 一种Web页面的编辑方法和装置 |
CN109542417A (zh) * | 2018-11-20 | 2019-03-29 | 北京小米移动软件有限公司 | 一种dom渲染网页的方法、装置、终端和存储介质 |
CN109634654A (zh) * | 2018-12-04 | 2019-04-16 | 北京马上慧科技术有限公司 | 一种页面封装方法、装置、***、计算机设备和存储介质 |
CN110020371A (zh) * | 2017-12-26 | 2019-07-16 | 航天信息股份有限公司 | 一种基于react-native页面布局联动的方法及装置 |
CN110929205A (zh) * | 2019-11-13 | 2020-03-27 | 贝壳技术有限公司 | 用于加载网页中的控件的方法及装置 |
CN111259301A (zh) * | 2020-01-19 | 2020-06-09 | 北京飞漫软件技术有限公司 | Html页面内元素渲染的方法、装置、设备和存储介质 |
TWI700638B (zh) * | 2016-03-24 | 2020-08-01 | 香港商阿里巴巴集團服務有限公司 | 混合視圖的顯示方法及裝置 |
CN111783010A (zh) * | 2020-01-19 | 2020-10-16 | 北京无限光场科技有限公司 | 网页空白页面监测方法、装置、终端及存储介质 |
CN112699653A (zh) * | 2021-01-07 | 2021-04-23 | 北京明略软件***有限公司 | 基于React的数据表格渲染方法和数据表格组件 |
CN113656717A (zh) * | 2021-08-06 | 2021-11-16 | 上海硬通网络科技有限公司 | 一种网页的控件渲染方法、装置、设备及存储介质 |
CN114443024A (zh) * | 2022-01-14 | 2022-05-06 | 广州市玄武无线科技股份有限公司 | 实现不限制嵌套层级的可视化ui拖拽布局的方法及*** |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20050027823A1 (en) * | 2001-04-09 | 2005-02-03 | Ahad Rana | Server-based browser system |
CN101067827A (zh) * | 2007-06-14 | 2007-11-07 | 上海创图网络科技发展有限公司 | 一种基于浏览器的三维网页实现方法 |
CN101706785A (zh) * | 2009-11-19 | 2010-05-12 | 深圳市同洲电子股份有限公司 | 一种网页特效实现方法和浏览器 |
CN101777069A (zh) * | 2010-01-04 | 2010-07-14 | 山东浪潮齐鲁软件产业股份有限公司 | 一种构建支持大数据量高性能浏览器列表组件的方法 |
-
2011
- 2011-01-11 CN CN 201110004783 patent/CN102073502B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20050027823A1 (en) * | 2001-04-09 | 2005-02-03 | Ahad Rana | Server-based browser system |
CN101067827A (zh) * | 2007-06-14 | 2007-11-07 | 上海创图网络科技发展有限公司 | 一种基于浏览器的三维网页实现方法 |
CN101706785A (zh) * | 2009-11-19 | 2010-05-12 | 深圳市同洲电子股份有限公司 | 一种网页特效实现方法和浏览器 |
CN101777069A (zh) * | 2010-01-04 | 2010-07-14 | 山东浪潮齐鲁软件产业股份有限公司 | 一种构建支持大数据量高性能浏览器列表组件的方法 |
Cited By (40)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102662737A (zh) * | 2012-03-14 | 2012-09-12 | 优视科技有限公司 | 扩展程序的调用方法及装置 |
CN102662737B (zh) * | 2012-03-14 | 2014-06-11 | 优视科技有限公司 | 扩展程序的调用方法及装置 |
CN102663056B (zh) * | 2012-03-29 | 2014-05-28 | 北京奇虎科技有限公司 | 一种图片元素显示方法和装置 |
CN102663056A (zh) * | 2012-03-29 | 2012-09-12 | 奇智软件(北京)有限公司 | 一种图片元素显示方法和装置 |
CN103870558B (zh) * | 2012-03-29 | 2017-01-25 | 北京奇虎科技有限公司 | 页面渲染方法和遮罩层创建方法 |
US10185704B2 (en) | 2012-04-28 | 2019-01-22 | Guangzhou Ucweb Computer Technology Co., Ltd. | Webpage browsing method, webapp framework, method and device for executing javascript and mobile terminal |
WO2013159745A1 (zh) * | 2012-04-28 | 2013-10-31 | 广州市动景计算机科技有限公司 | 网页浏览方法、WebApp框架、执行JavaScript方法及装置、移动终端 |
CN102693280A (zh) * | 2012-04-28 | 2012-09-26 | 广州市动景计算机科技有限公司 | 网页浏览方法、WebApp框架、执行JavaScript方法及装置、移动终端 |
CN103390010A (zh) * | 2012-09-10 | 2013-11-13 | 爱乐活(北京)科技有限公司 | 一种浏览器页面的显示方法及*** |
CN103390010B (zh) * | 2012-09-10 | 2017-03-08 | 百度在线网络技术(北京)有限公司 | 一种浏览器页面的显示方法及*** |
CN104254849B (zh) * | 2012-10-10 | 2018-01-12 | Sk 普兰尼特有限公司 | 支持网络文档的高速网络滚动的用户终端装置和方法 |
CN104254849A (zh) * | 2012-10-10 | 2014-12-31 | Sk普兰尼特有限公司 | 支持网络文档的高速网络滚动的用户终端装置和方法 |
US9465780B2 (en) | 2012-10-10 | 2016-10-11 | Sk Planet Co., Ltd. | User terminal device and scroll method supporting high-speed web scroll of web document |
CN103399866A (zh) * | 2013-07-05 | 2013-11-20 | 北京小米科技有限责任公司 | 一种网络页面的渲染方法、装置及设备 |
CN104281677A (zh) * | 2014-09-29 | 2015-01-14 | 百度在线网络技术(北京)有限公司 | 页面的展现方法及装置 |
TWI700638B (zh) * | 2016-03-24 | 2020-08-01 | 香港商阿里巴巴集團服務有限公司 | 混合視圖的顯示方法及裝置 |
US10789420B2 (en) | 2016-03-24 | 2020-09-29 | Alibaba Group Holding Limited | Mixed view display method and device |
CN108710490A (zh) * | 2017-04-12 | 2018-10-26 | 北京京东尚科信息技术有限公司 | 一种Web页面的编辑方法和装置 |
CN108710490B (zh) * | 2017-04-12 | 2022-06-07 | 北京京东尚科信息技术有限公司 | 一种Web页面的编辑方法和装置 |
CN107066618A (zh) * | 2017-05-09 | 2017-08-18 | 灯塔财经信息有限公司 | 一种网页页面转换后显示方法和装置 |
CN107066618B (zh) * | 2017-05-09 | 2020-06-05 | 灯塔财经信息有限公司 | 一种网页页面转换后显示方法和装置 |
CN107450912A (zh) * | 2017-07-07 | 2017-12-08 | 北京小米移动软件有限公司 | 页面的布局方法、装置及终端 |
CN107423060A (zh) * | 2017-07-07 | 2017-12-01 | 北京小米移动软件有限公司 | 动画效果的呈现方法、装置及终端 |
CN107423060B (zh) * | 2017-07-07 | 2021-03-30 | 北京小米移动软件有限公司 | 动画效果的呈现方法、装置及终端 |
CN107450912B (zh) * | 2017-07-07 | 2021-01-29 | 北京小米移动软件有限公司 | 页面的布局方法、装置及终端 |
CN110020371B (zh) * | 2017-12-26 | 2021-04-16 | 航天信息股份有限公司 | 一种基于react-native页面布局联动的方法及装置 |
CN110020371A (zh) * | 2017-12-26 | 2019-07-16 | 航天信息股份有限公司 | 一种基于react-native页面布局联动的方法及装置 |
CN109542417A (zh) * | 2018-11-20 | 2019-03-29 | 北京小米移动软件有限公司 | 一种dom渲染网页的方法、装置、终端和存储介质 |
CN109542417B (zh) * | 2018-11-20 | 2022-03-01 | 北京小米移动软件有限公司 | 一种dom渲染网页的方法、装置、终端和存储介质 |
CN109634654A (zh) * | 2018-12-04 | 2019-04-16 | 北京马上慧科技术有限公司 | 一种页面封装方法、装置、***、计算机设备和存储介质 |
CN110929205A (zh) * | 2019-11-13 | 2020-03-27 | 贝壳技术有限公司 | 用于加载网页中的控件的方法及装置 |
CN111783010A (zh) * | 2020-01-19 | 2020-10-16 | 北京无限光场科技有限公司 | 网页空白页面监测方法、装置、终端及存储介质 |
CN111259301A (zh) * | 2020-01-19 | 2020-06-09 | 北京飞漫软件技术有限公司 | Html页面内元素渲染的方法、装置、设备和存储介质 |
CN111259301B (zh) * | 2020-01-19 | 2023-05-02 | 北京飞漫软件技术有限公司 | Html页面内元素渲染的方法、装置、设备和存储介质 |
CN111783010B (zh) * | 2020-01-19 | 2023-09-19 | 北京有竹居网络技术有限公司 | 网页空白页面监测方法、装置、终端及存储介质 |
CN112699653A (zh) * | 2021-01-07 | 2021-04-23 | 北京明略软件***有限公司 | 基于React的数据表格渲染方法和数据表格组件 |
CN112699653B (zh) * | 2021-01-07 | 2024-02-23 | 北京明略软件***有限公司 | 基于React的数据表格渲染方法和数据表格组件 |
CN113656717A (zh) * | 2021-08-06 | 2021-11-16 | 上海硬通网络科技有限公司 | 一种网页的控件渲染方法、装置、设备及存储介质 |
CN113656717B (zh) * | 2021-08-06 | 2024-05-28 | 上海硬通网络科技有限公司 | 一种网页的控件渲染方法、装置、设备及存储介质 |
CN114443024A (zh) * | 2022-01-14 | 2022-05-06 | 广州市玄武无线科技股份有限公司 | 实现不限制嵌套层级的可视化ui拖拽布局的方法及*** |
Also Published As
Publication number | Publication date |
---|---|
CN102073502B (zh) | 2013-02-20 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN102073502B (zh) | 一种利用web原生布局进行页面渲染的方法及装置 | |
CN110020307A (zh) | 一种客户端视图的绘制方法和装置 | |
JP5815114B2 (ja) | 中間フォーマットを用いた、swfのhtmlへのクロスコンパイル | |
US20040133854A1 (en) | Persistent document object model | |
CN104731594A (zh) | 一种基于Bootstrap显示运行时定制页面的方法 | |
US20150286739A1 (en) | Html5-protocol-based webpage presentation method and device | |
US20080303827A1 (en) | Methods and Systems for Animating Displayed Representations of Data Items | |
CN103377039B (zh) | 一种网页游戏开发、解析方法、一种编辑器以及解析装置 | |
CN102495735A (zh) | web 端UI组件应用框架*** | |
CN104820589B (zh) | 一种动态适配网页的方法及其装置 | |
CN102360296A (zh) | 一种基于web的在线表单开发工具 | |
CN104798036A (zh) | 使用声明性模板来标记出控件的用户界面控件框架 | |
US20080303826A1 (en) | Methods and Systems for Animating Displayed Representations of Data Items | |
CN104007967A (zh) | 一种基于可扩展标记语言的用户界面生成方法和装置 | |
CN102339291A (zh) | 一种列表生成方法及设备 | |
CN105373520A (zh) | 设置控件样式属性的方法和装置 | |
CN105528217A (zh) | 一种基于显示列表的局部刷新方法及装置 | |
CN104995622A (zh) | 用于图形函数的合成器支持 | |
CN100492360C (zh) | 一种生成网页的方法及*** | |
CN115982266A (zh) | 基于自定义配置属性字段的页面动态渲染方法及*** | |
CN103049430A (zh) | 一种基于idf格式文件的页面显示方法 | |
Overson et al. | Developing Web Components: UI from jQuery to Polymer | |
Dessart et al. | Animated transitions between user interface views | |
CN110020342A (zh) | 数据的处理方法及装置 | |
CN112068828A (zh) | 标题控件的生成方法、装置、***、设备以及介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
C14 | Grant of patent or utility model | ||
GR01 | Patent grant |