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;
                    }
                });
            });
        }
    });

Peter · Accepted Answer · 2011-08-24 16:26:24Z

1

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.

answered Aug 24, 2011 at 16:26

Peter

4184 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

momo · Accepted Answer · 2011-08-24 17:03:43Z

0

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:

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

edited Aug 24, 2011 at 17:03

answered Aug 24, 2011 at 16:25

momo

21.4k8 gold badges41 silver badges38 bronze badges

4 Comments

itsbalur Over a year ago

Agree, I am trying to evaluate the performance of doing it client side vs server side. On the server side, I need to query a pretty complicated database with more than 300,000 records. Moreover, the database is on another database server than the one for the application. So, there are performance overheads on the server side as well.

itsbalur Over a year ago

Sorry, I was not clear in the question. The XML file is on the server. Ajax call is happening, HTML is being updated on the client. Even so the performance is not great.

momo Over a year ago

I am saying it's not ideal to transfer 42MB file over the network and then parse it there as well. It might be better to process it on the server then return the HTML and not process the HTML on the client' side

momo Over a year ago

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

Collectives™ on Stack Overflow

Parsing XML or JSON with Jquery

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related