iTunes2web and ajaxslt
July 14th, 2006There are still times when the speed of a computer surprises me. I feel like I should be over this; it shouldn’t surprise me but it still happens. There are also times when the slowness of a computer doesn’t surprise me. When coming up with a solution to a coding problem, it can be hard to differentiate between the two cases without writing and running code.
This happened recently when I re-wrote the Javascript front-end for iTunes2web. The web portion of iTunes2web is an AJAX application that constantly makes HTTP requests when the user clicks elements on the page. Each request returns an XML file which is parsed and translated into HTML. This HTML dynamically displayed on the webpage.
To make this a bit concrete, let’s look at how the list of albums is loaded and displayed. When the user clicks on an artist, the Javascript function loadAlbums() gets called. This method generates a request for a list of albums. The request returns an xml file that is a list of albums.
An excerpt is shown here:
<artist>
<key>db/Library/b/beachboys.artist.xml</key>
<val>Beach Boys</val>
</artist>
<artist>
<key>db/Library/t/thebeatles.artist.xml</key>
<val>The Beatles</val>
</artist>
In this example, each album entry is turned into an element in a SELECT list and the key is used as an argument for the function that is called when you click on an album.
The downside of this whole process is writing the code that extracts the content from the XML document and generates HTML. It hurts to write this code and debugging bad html that is generated in this way is non-trivial.
The nice part about this process is that it is very fast. Even when a list of albums is hundreds of albums long, the list is generated almost instantly.
When I ran across Google’s AJAXSTL, I thought that this would be a great way to clean up my code. AJAXSLT is a Javascript implementation of XSL-T (and as a result, XPath too). The idea here is that I could remove all of the ugly presentation code and also generate well-formed HTML from my XML. My fear was that this would be slow; would the speed of my computer surprise me?
No. Even for small XML documents, performance is mediocre. I’m not criticizing Google’s implementation of XSLT or anything like that. They did a great job and the code is easy to read and use. However, it’s not for this app (and I didn’t really expect it to be). Here’s a link to the ajax implementation. Here’s a link to the less elegant yet faster implementation. The number of milliseconds that it takes to load the albums will be shown at the top-left corner of the page. Note that the only difference in the pages is how the list of albums is loaded. The times do not include the time needed to download the xml file, only the time needed to take the xml string and write out the html content. This code is not finished yet so you’ll need to click on ‘All’ artists after selecting a playlist to get the albums for that playlist to load and see how long it takes. The results are as follows:
| Playlist | render method | number of albums | Safari Render Time (ms) | FF Render Time (ms) |
| Library | XSLT | 568 | 70546 ms | 62010 ms |
| Library | Manual | 568 | 206 ms | 431 ms |
| iPod | XSLT | 216 | 17436 ms | 9972 ms |
| iPod | Manual | 216 | 102 ms | 212 ms |
| Purchased | XSLT | 8 | 166 ms | 75 ms |
| Purchased | Manual | 8 | 4 ms | 23 ms |
There are some more things worth noting. First, this is not a comparison of Firefox’s and Safari’s Javascript speed! I used both browsers because they are installed on my machine and it verifies that any performance issues with the code are not tied to a particular browser. I used a recent nightly build of Safari and Firefox 1.5.0.4. Second, I should have taken more time to create playlists with more meaningful numbers of albums like 10,100, and 1000 but I’m too lazy. Instead, just note that the running time of the playlists is non-linear with respect to the number of albums. This is bad news for large XML files. Third, note that loading a list of songs is relatively easy work compared to loading content for other parts of the page; loading the table of songs is more complicated and will take a lot longer, especially when someone wants to view all songs from all albums. Finally, it’s worth noting that on my machine the list of albums in the Libary can be transformed using xsltproc in about 36ms.
In conclusion, ajaxslt is great but is not intended for anything but small XML input. I suspected this but was curious to see how it would compare with a manual transformation.