javascript + xml = ssslllooowww

[tim_myth]

Hi all. Long time listener. First time caller. ;)

I have an XML file with 5000 entries. It's format is:
Songbook
- Entry
--- artist
--- song
--- disc
--- duet
- /Entry
/Songbook
I am loading this into a data island and binding it a table as such:
<table id="table" datasrc="#xmldso_list" border="1">
<tr align="left" style="display: none">
<td><div datafld="artist" /></td>
<td><div datafld="song" /></td>
<td><div datafld="disc" /></td>
</tr>
</table>
I then add a textbox and submit button that allows you to search the artist and song title fields. The javascript loops through all the records and sets the tr's style.display to inline. Here's the js for that (bugs and all):
function movenext(searchbox)
{
window.status = "Searching..."
var x=xmldso_list.recordset
var counter=1
var s1
var s2
var startstamp = new Date()
var nowstamp = new Date()
xmldso_list.recordset.absoluteposition=1
searchbox = searchbox.toLowerCase()
while (counter++ < x.recordcount)
{
x.movenext()
s1 = String(xmldso_list.recordset("artist"))
s2 = String(xmldso_list.recordset("song"))
s2 = s2.toLowerCase()
s1 = s1.toLowerCase()
findit = s1.indexOf(searchbox) + s2.indexOf(searchbox)
if (findit >= 0)
{
document.getElementById("table").rows(counter).style.display = "inline"
} else {
document.getElementById("table").rows(counter).style.display = "none"
}
}
nowstamp = new Date()
window.status = "Done in " + String(nowstamp - startstamp)
}
This all works except for two things:
1. Its ungodly slow. It takes about 1 minute to run the search on my p4 2.4 with 512MB of ram (hey, it's my work PC :o ).
2. I can't find artists like 112, 311, or 3 Doors Down.

I'm assuming I can fix #2 by converting the contents of searchbox to a string, but I am hesitant to do that because of problem #1.

Any advice on making this faster, or is this just too big a task for XML and javascript?

[Alex Vincent]

Generally the latter. XML is verbose by design, so 5,000 records will not be nice to it.

That said, we can do some optimizations on your JS function. For instance, you call this part 5,000 times at least:

document.getElementById("table")

Also, a little CSS means you won't have to set the display property directly, which might be more expensive (I don't know for sure) than setting a class attribute.

What browser are you testing this in? I assume IE, since you mention data islands...

What does your actual XML look like? Give us about three sample records, if you would, please.

Finally, is the XML generated from a database somewhere? Maybe AJAX can be used (Asynchronous JavaScript and XML) to search the database directly.

[tim_myth]

Here's a snippet of the xml
<entry>
<artist>A Perfect Circle</artist>
<song>Blue (Remix)</song>
<disc>PHR0410</disc>
<duet>false</duet>
</entry>
<entry>
<artist>A3</artist>
<song>Woke Up This Morning (Theme From Sopranos)</song>
<disc>MM6297</disc>
<duet>false</duet>
</entry>
<entry>
<artist>Aaliyah</artist>
<song>At Your Best (You Are Love)</song>
<disc>NT2050</disc>
<duet>false</duet>
</entry>
<entry>
<artist>Aaliyah</artist>
<song>More Than A Woman</song>
<disc>SF184</disc>
<duet>false</duet>
</entry>
<entry>
<artist>Aaliyah</artist>
<song>Rock The Boat</song>
<disc>SC8726</disc>
<duet>false</duet>
</entry>

[tim_myth]

(note to self: don't click outside box and hit enter...)

As for the CSS thing... hmm. I suppose I could try giving/assigning/changing a class attribute to each td, but I'm not sure that'll make things any better. :confused:

The XML is generated monthly by an excel script I wrote and run manually. It (the xml data) resides on the web server in the same place as my html document.

I know nothing about ajax. I'm just learning xml and xsl. Is there a good tutorial on this?

Finally, I have been using IE for testing since approximately 90% of the vistors on the site are using IE.

[tim_myth]

One last thing. I tried assign document.getElementByID("table") to a variable, but kept getting the "Object does not support this property or method" error.

I tried:
var part = document.getElementByID("table")
var part = document.getElementByID('table')
part = document.getElementByID("table")
part = document.getElementByID('table')

??? How do I assign this part to a viarable? If it were vb, I'd use With, but... :rolleyes:

*** Scratch this ****
getElementByID <----Darn broken keyboard!! :D

[tim_myth]

That said, we can do some optimizations on your JS function. For instance, you call this part 5,000 times at least:

document.getElementById("table")

I bow to you!!! Once I corrected the error in my previous post (getElementById), my searches are only taking 1.5 to 3 seconds. This is very acceptable.

[tim_myth]

You can try this at http://www.byrequest.dj/byrequest/test2.html. It needs much polishing before it will become a page on the site, but I'm in the process of making the site xhtml compliant now (thus the whole search thing).

Again, thanks very much for the help.

[tim_myth]

Ok, I had been doing all my testing on my local machine (not through a webserver), and things went great. BUT, when I uploaded the document to my server, things changed drastically. The same script that runs in 2.3 seconds on my pc takes nearly four minutes when accessed from my web server. What gives??

[Puffin the Erb]

??? How do I assign this part to a viarable? If it were vb, I'd use With, but...

You can use "with" in Javascript too.

with(temporary scope)
{

}

[liorean]

Please, don't suggest use of with without explaining the gotchas. If you look at random javascripts out in the wild you see many more cases where with is sorely misused than where it is properly used. Including a majority of JavaScript tutorials using it.

[Alex Vincent]

The same script that runs in 2.3 seconds on my pc takes nearly four minutes when accessed from my web server. What gives??

How big is this XML file? Is your connection a dial-up? I'm thinking 5k records generates a lot of bytes to download. (Just off the first sample, I'm guessing over 571 kilobytes.)

Try loading just the XML file from your server into your browser and take the time for loading that out of the equation for a moment.

[tim_myth]

How big is this XML file? Is your connection a dial-up? I'm thinking 5k records generates a lot of bytes to download. (Just off the first sample, I'm guessing over 571 kilobytes.)

Try loading just the XML file from your server into your browser and take the time for loading that out of the equation for a moment.
The file is just under 1mb. It is available at http://www.byrequest.dj/byrequest/songbook.xml.

I was under the impression that loading the xml file into a data island would create the XML object on the client. I got the idea from w3schools. When testing the scrpit from the server (http://www.byrequest.dj/byrequest/test2.html) with IE, you can see in the status bar that the xml file is loading. It takes about 50-55 seconds with my 3Mb connection, and about the same amount of time with my DS3 connection at work so I assume some sort of processing is occuring during the load.

If loading the XML document into a data island won't make things faster for users, there isn't much point in pursuing this. I know I can do this quickly and efficiently with php and mysql. I just wanted to try something nifty and maybe take some load off my server. :p

[Alex Vincent]

Yeah, I think honestly you're asking too much of Internet Explorer there. Even Mozilla wouldn't react that quickly with the sheer amount of data you're feeding it.