使用Jquery解析XML或JSON

时间:2022-05-25 20:37:14

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.

我有一个相当大的XML文件(大约42MB),我用jquery解析。我需要根据ID有选择地显示某些节点​​。通过这样做,Web浏览器变得无响应,并且解析的平均时间大于15秒。

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

我的疑问是将这个大型XML文件转换为JSON,是否有助于提高性能?下面是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

这是对XML的ajax调用

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

2 个解决方案

#1


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

要回答你的问题,JSON会提高性能,因为它是一个本机JS,我确信解析已被许多浏览器优化。而且,传输的大小将小于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.

如果可能,您的体系结构应该在服务器端进行解析和HTML显示,同时从客户端提供进度指示器。

To be clear, the steps should be:

需要说明的是,步骤应该是:

  1. jquery call the server via AJAX to process the XML, show the progress indicator
  2. jquery通过AJAX调用服务器来处理XML,显示进度指示器
  3. On the server, parse the large XML file for necessary data and give the HTML fragments to the client
  4. 在服务器上,解析大型XML文件以获取必要的数据,并将HTML片段提供给客户端
  5. Append the HTML fragments to placeholder assigned, remove the progress indicator
  6. 将HTML片段附加到分配的占位符,删除进度指示器

#2


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.

总体而言,JSON在性能方面击败了XML,因此如果可能的话,您应该尝试将文件从XML切换为JSON。

#1


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

要回答你的问题,JSON会提高性能,因为它是一个本机JS,我确信解析已被许多浏览器优化。而且,传输的大小将小于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.

如果可能,您的体系结构应该在服务器端进行解析和HTML显示,同时从客户端提供进度指示器。

To be clear, the steps should be:

需要说明的是,步骤应该是:

  1. jquery call the server via AJAX to process the XML, show the progress indicator
  2. jquery通过AJAX调用服务器来处理XML,显示进度指示器
  3. On the server, parse the large XML file for necessary data and give the HTML fragments to the client
  4. 在服务器上,解析大型XML文件以获取必要的数据,并将HTML片段提供给客户端
  5. Append the HTML fragments to placeholder assigned, remove the progress indicator
  6. 将HTML片段附加到分配的占位符,删除进度指示器

#2


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.

总体而言,JSON在性能方面击败了XML,因此如果可能的话,您应该尝试将文件从XML切换为JSON。