No offense, but that code is really frightening. Not your fault though.
JSON is not only much faster than all this XML/DOM garbage, but it is *much*
easier to understand and use too!
If you're coding JavaScript, you need to know how to use ordinary JavaScript
objects and arrays, yes?
If you know how to work with those, then you *already know JSON*. Because
JSON is just JavaScript objects. (D'oh! JavaScript Object Notation!)
So here's your XML file transcribed fairly faithfully into JSON:
{
"sites": [
{
"label": "site",
"id": 2,
"lat": 27,
"lng": 305,
"location": {
"city": "Las Vegas",
"state": "NV",
"region": "West"
}
},
{
"label": "site",
"id": 3,
"lat": 106,
"lng": 35,
"location": {
"city": "Pittsburgh",
"state": "Penn",
"region": "North East"
}
}
]
}
I only included a couple of the entries to keep the example short. As you
can see, that's just a JavaScript object. This JavaScript object contains a
single property called 'sites'. That property is an array of objects, each
one representing a single site. Those site objects have the same properties
as your XML file.
So here's how you use it. I didn't try to exactly duplicate what your code
is doing - I wasn't sure what it was trying to do with all the $('div')
calls. Wouldn't those append to every DIV in your page? Oh - is there only a
single DIV that you're appending everything to? You should give it an ID and
reference it that way instead.
Also I realized I didn't quite duplicate what you're doing with those
label="Location" elements. It looks like you might have other kinds of
label="Something" elements as well? I didn't notice that, but tell you what,
here's the code as I understood it:
$.getJSON( 'sites.json', function( json ) {
var html = [];
html.push( '<div>' );
var sites = json.sites;
for( var site, i = -1; site = sites[++i]; ) {
var location = site.location;
html.push(
site.label, ' ', site.id, '<br/>',
'Lat: ', site.lat, ' Lng: ', site.lng, '<br/>',
location.city, ', ', location.state, '<br/>',
location.region
);
}
html.push( '</div>' );
$('#container').html( html.join('') );
});
As you can see, that is many times simpler - and *much* easier to understand
- than the XML parsing.
Some other speed notes...
* The for loop uses a slightly unusual form that is faster than the usual
numeric incrementing.
* Instead of appending elements to the HTML DOM as we go, we construct a
single HTML string and append it in one operation.
* That HTML string has an outermost DIV that wraps all the elements inside
it.
* We construct the HTML string not with += but by pushing the elements onto
an array and joining it at the end.
There is actually a way to speed this up a slight bit more in IE, but let's
leave that for the next installment. :-) As it is now, this code will be
many times faster than the XML code - at least one order of magnitude
faster, and maybe two.
Let me know what the real deal is with those label="location" elements and I
can suggest how to handle them.
-Mike
On Thu, Jan 28, 2010 at 11:31 AM, augur <312...@gmail.com> wrote:
> Funny thing is, my lead engineer said the same thing...
>
> Mostly this was an experiment to gain a better understanding of DOM
> outside of HTML. This is about as exciting as a SAX parser when it
> comes to speed (<5sec in safari for 20K lines, slightly longer in
> FireFox, and noticeably longer in Chrome), though it is fairly
> efficient, and gives me exactly the results I was wanting to see.
> There are some practical applications.
>
> Realizing that there is only so much memory out there more efficiency
> is what I am going for, so any input on this script is helpful. I have
> approached it this way because I get XML and DOM, and I am getting
> decent at jQuery. Thus this method was in my range of current
> understanding. JSON is something that I am just now becoming more
> familiar with.
>
