xml与json在javascript中解析并使用,速度大约相差4倍。(在IE中测试的结果)。
其中主要不在于eval,与xml parse的时间差别,主要在于属性访问上的差别:
xml中使用这样的方式 markers[i].getAttribute("info")
与json中使用这样的方式 var info = markers[i].info;
相比, xml要慢不少。
以下为测试的详情:
代码
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xmlns:v ="urn:schemas-microsoft-com:vml" >
< head >
< meta http-equiv ="content-type" content ="text/html; charset=utf-8" />
< title > Google Maps JavaScript API Example: Simple Map </ title >
< script src ="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type ="text/javascript" ></ script >
< script type ="text/javascript" >
// 全局变量
var map = null ;
function initialize() {
if ( ! GBrowserIsCompatible()) return ;
map = new GMap2(document.getElementById( " map_canvas " ));
map.addMapType( G_PHYSICAL_MAP );
map.addMapType(G_SATELLITE_3D_MAP);
map.setCenter( new GLatLng( 39.9 , 116.00 ), 6 );
map.addControl( new GMapTypeControl() );
map.addControl( new GLargeMapControl() );
map.enableContinuousZoom();
GEvent.addListener(map, " mousemove " , function (p){
if ( ! p) return ;
window.status = " 经纬度 " + (Math.round(p.lng() * 100000 ) / 100000 ) + " , "
+ (Math.round(p.lat() * 100000 ) / 100000 );
});
var t0 = new Date();
for ( var i = 0 ; i < 100 ; i ++ ){
var home_point = new GLatLng( 37.056136 + i / 1e4,114.457626+i / 1e4 );
map.addOverlay( new GMarker(home_point));
}
var t1 = new Date();
alert(t1 - t0); // 1000用时6.3秒
testSpeed();
}
function testSpeed()
{
// -----------------------------------
var ary = [];
for ( var i = 0 ; i < 10000 ; i ++ ){
ary.push( ' <marker msid="13615532361" lng="104.0447" lat="30.684" status="0" info="川A7G222. <br> 力帆体育场店<br> 2010-10-27 12:54:39 " /> ' );
}
var doc = " <current> " + ary.join( "" ) + " </current> " ;
var t0 = new Date();
var xmlDoc = GXml.parse(doc);
if ( ! xmlDoc || ! xmlDoc.documentElement) return ;
var markers = xmlDoc.documentElement.getElementsByTagName( " marker " );
for ( var i = 0 ; i < markers.length; i ++ ) {
var lat = parseFloat(markers[i].getAttribute( " lat " ));
var lng = parseFloat(markers[i].getAttribute( " lng " ));
var msid = markers[i].getAttribute( " msid " );
var status = markers[i].getAttribute( " status " );
var info = markers[i].getAttribute( " info " );
}
var t1 = new Date();
alert(t1 - t0); // 0.57秒
// -----------------------------------
var ary = [];
for ( var i = 0 ; i < 10000 ; i ++ ){
ary.push( ' ["13615532361",104.0447,30.684,0,"川A7G222. <br> 力帆体育场店<br> 2010-10-27 12:54:39"] ' );
}
var doc = " [ " + ary.join( " , " ) + " ] " ;
var t0 = new Date();
var markers = eval(doc);
for ( var i = 0 ; i < markers.length; i ++ ) {
var lat = parseFloat(markers[i][ 1 ]);
var lng = parseFloat(markers[i][ 2 ]);
var msid = markers[i][ 0 ];
var status = markers[i][ 3 ];
var info = markers[i][ 4 ];
}
var t1 = new Date();
alert(t1 - t0); // 0.15秒
// -----------------------------------
var ary = [];
for ( var i = 0 ; i < 10000 ; i ++ ){
ary.push( ' {msid:"13615532361",lng:104.0447,lat:30.684,status:0,info:"川A7G222. <br> 力帆体育场店<br> 2010-10-27 12:54:39"} ' );
}
var doc = " [ " + ary.join( " , " ) + " ] " ;
var t0 = new Date();
var markers = eval(doc);
for ( var i = 0 ; i < markers.length; i ++ ) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].lat);
var lng = parseFloat(markers[i].lng);
var msid = markers[i].msid;
var status = markers[i].status;
var info = markers[i].info;
}
var t1 = new Date();
alert(t1 - t0); // 0.15秒
}
</ script >
</ head >
< body onload ="initialize()" onunload ="GUnload()" >
< div id ="map_canvas" style ="width: 800px; height: 600px" ></ div >
</ body >
</ html >
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xmlns:v ="urn:schemas-microsoft-com:vml" >
< head >
< meta http-equiv ="content-type" content ="text/html; charset=utf-8" />
< title > Google Maps JavaScript API Example: Simple Map </ title >
< script src ="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type ="text/javascript" ></ script >
< script type ="text/javascript" >
// 全局变量
var map = null ;
function initialize() {
if ( ! GBrowserIsCompatible()) return ;
map = new GMap2(document.getElementById( " map_canvas " ));
map.addMapType( G_PHYSICAL_MAP );
map.addMapType(G_SATELLITE_3D_MAP);
map.setCenter( new GLatLng( 39.9 , 116.00 ), 6 );
map.addControl( new GMapTypeControl() );
map.addControl( new GLargeMapControl() );
map.enableContinuousZoom();
GEvent.addListener(map, " mousemove " , function (p){
if ( ! p) return ;
window.status = " 经纬度 " + (Math.round(p.lng() * 100000 ) / 100000 ) + " , "
+ (Math.round(p.lat() * 100000 ) / 100000 );
});
var t0 = new Date();
for ( var i = 0 ; i < 100 ; i ++ ){
var home_point = new GLatLng( 37.056136 + i / 1e4,114.457626+i / 1e4 );
map.addOverlay( new GMarker(home_point));
}
var t1 = new Date();
alert(t1 - t0); // 1000用时6.3秒
testSpeed();
}
function testSpeed()
{
// -----------------------------------
var ary = [];
for ( var i = 0 ; i < 10000 ; i ++ ){
ary.push( ' <marker msid="13615532361" lng="104.0447" lat="30.684" status="0" info="川A7G222. <br> 力帆体育场店<br> 2010-10-27 12:54:39 " /> ' );
}
var doc = " <current> " + ary.join( "" ) + " </current> " ;
var t0 = new Date();
var xmlDoc = GXml.parse(doc);
if ( ! xmlDoc || ! xmlDoc.documentElement) return ;
var markers = xmlDoc.documentElement.getElementsByTagName( " marker " );
for ( var i = 0 ; i < markers.length; i ++ ) {
var lat = parseFloat(markers[i].getAttribute( " lat " ));
var lng = parseFloat(markers[i].getAttribute( " lng " ));
var msid = markers[i].getAttribute( " msid " );
var status = markers[i].getAttribute( " status " );
var info = markers[i].getAttribute( " info " );
}
var t1 = new Date();
alert(t1 - t0); // 0.57秒
// -----------------------------------
var ary = [];
for ( var i = 0 ; i < 10000 ; i ++ ){
ary.push( ' ["13615532361",104.0447,30.684,0,"川A7G222. <br> 力帆体育场店<br> 2010-10-27 12:54:39"] ' );
}
var doc = " [ " + ary.join( " , " ) + " ] " ;
var t0 = new Date();
var markers = eval(doc);
for ( var i = 0 ; i < markers.length; i ++ ) {
var lat = parseFloat(markers[i][ 1 ]);
var lng = parseFloat(markers[i][ 2 ]);
var msid = markers[i][ 0 ];
var status = markers[i][ 3 ];
var info = markers[i][ 4 ];
}
var t1 = new Date();
alert(t1 - t0); // 0.15秒
// -----------------------------------
var ary = [];
for ( var i = 0 ; i < 10000 ; i ++ ){
ary.push( ' {msid:"13615532361",lng:104.0447,lat:30.684,status:0,info:"川A7G222. <br> 力帆体育场店<br> 2010-10-27 12:54:39"} ' );
}
var doc = " [ " + ary.join( " , " ) + " ] " ;
var t0 = new Date();
var markers = eval(doc);
for ( var i = 0 ; i < markers.length; i ++ ) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].lat);
var lng = parseFloat(markers[i].lng);
var msid = markers[i].msid;
var status = markers[i].status;
var info = markers[i].info;
}
var t1 = new Date();
alert(t1 - t0); // 0.15秒
}
</ script >
</ head >
< body onload ="initialize()" onunload ="GUnload()" >
< div id ="map_canvas" style ="width: 800px; height: 600px" ></ div >
</ body >
</ html >