Parsing XML or JSON with Jquery

Question

I have a fairly large XML file (around 42MB) that I am parsing with jquery. I need to selectively show certain nodes based on an ID. By doing this the web browser becomes unresponsive, and the average time for parsing is greater than 15 seconds.

My query is whether converting this large XML file to JSON, help improve the performance? Below is a sample of the XML.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE thesaurus SYSTEM "Thesaurus_1_4.dtd">
<thesaurus action="ExportLanguage" language="en" version="2.7" date="2011-08-15">
  <options/>
  <wordblocks>
    <wordblock>
      <term type="forbidden" lang="en" termid="18297">
        <value>1,1-DIETHOXYETHANE</value>
      </term>
      <terms>
        <term rel="USE" lang="en" termid="30" type="valid">
          <value>ACETAL</value>
        </term>
      </terms>
    </wordblock>
    <wordblock>
      <term type="forbidden" lang="en" termid="18307">
        <value>1,2,3-PROPANETRIOL</value>
      </term>
      <terms>
        <term rel="USE" lang="en" termid="4028" type="valid">
          <value>GLYCEROL</value>
        </term>
      </terms>
    </wordblock>
    <wordblock>
      <term type="forbidden" lang="en" termid="18308">
        <value>1,2,3-TRIHYDROXYBENZENE</value>
      </term>
      <terms>
        <term rel="USE" lang="en" termid="8094" type="valid">
          <value>PYROGALLOL</value>
        </term>
      </terms>
    </wordblock>
    <wordblock>
      <term type="forbidden" lang="en" termid="18309">
        <value>1,2,4,5-TETRAMETHYLBENZENE</value>
      </term>
      <terms>
        <term rel="USE" lang="en" termid="2814" type="valid">
          <value>DURENE</value>
        </term>
      </terms>
    </wordblock>
    <wordblock>
      <term type="forbidden" lang="en" termid="18298">
        <value>1,2-DIHYDROXYANTHRAQUINONE</value>
      </term>
      <terms>
        <term rel="USE" lang="en" termid="229" type="valid">
          <value>ALIZARIN</value>
        </term>
      </terms>
    </wordblock>
</wordblocks>
</thesaurus>

and here's the ajax call to the XML

LoadRelatedTerms = function (term) {
    $.ajax({
        type: "GET",
        url: "THESAURUS.xml",
        dataType: "xml",
        success: function (xml) {
            $('.items').html('');
            $(xml).find('wordblock').each(function () {
                $(this).children('term').each(function () {
                    var value = $(this).find('value').text();
                    if (value == term) {
                        $(this).parent().children('terms').children('term[level=1]').each(function () {
                            var id = $(this).attr('id');
                            var termValue = $(this).find('value').text();
                            $('<div class="items" id="term' + id + '"></div>').html(termValue).appendTo('#page-wrap');
                        });
                        return false;
                    }
                });
            });
        }
    });

Answer 1

To answer your question though, JSON would improve the performance as it is a native JS and I am sure the parsing have been optimized by many browsers. Moreover, the transmitted size will be smaller than XML

I am questioning the approach of taking such a large file to the client' side and parsing it there.

If possible by your architecture, you should do the parsing and HTML display in server side while providing progress indicator from the client side.

To be clear, the steps should be:

1. jquery call the server via AJAX to process the XML, show the progress indicator
2. On the server, parse the large XML file for necessary data and give the HTML fragments to the client
3. Append the HTML fragments to placeholder assigned, remove the progress indicator

Answer 2

In overall JSON beats XML at performance with a significant amount, so if it is possible you should give it a try switching your file to JSON from XML.