在JavaScript中循環顯示XML數據的更有效方法？

Question

您能否看一下我的JavaScript，並讓我知道是否存在一種更有效的方式來遍歷XML？

我的JavaScript代碼如下所示：

<script type="text/javascript">
function loadXMLDoc(dname)
{
    xhttp=new XMLHttpRequest();
    xhttp.open("GET",dname,false);
    xhttp.send();
    return xhttp.responseXML;
} 

var xmlDoc=loadXMLDoc("building.txt");

x=xmlDoc.getElementsByTagName('Building');

for (i=0;i<x.length;i++)
{
    txt=xmlDoc.getElementsByTagName('Building')[i].getAttribute('Name');

    document.write(txt + "<BR>");    

    y=x[i].getElementsByTagName('Tenant');

    for (j=0;j<y.length;j++)
    {
        txt1=x[i].getElementsByTagName('Tenant')[j].getAttribute('DISPLAYNAME');
        document.write("> " + txt1 + "<BR>");
    }

    document.write("<HR>");
} 

我的XML數據如下所示-我將其粘貼到PasteBin中... http://pastebin.com/nhMHjCjP

Answer 1

使用緩存的優化版本：

 function loadXMLDoc(dname) { xhttp=new XMLHttpRequest(); xhttp.open("GET",dname,false); xhttp.send(); return xhttp.responseXML; } var xmlDoc=loadXMLDoc("building.txt"); var buildingTags = xmlDoc.getElementsByTagName('Building'); for (i=0,l=buildingTags.length;i<l;i++){ txt=buildingTags[i].getAttribute('Name'); document.write(txt + "<BR>"); var y=buildingTags[i].getElementsByTagName('Tenant'); for (j=0,l1=y.length,j<l1;j++){ txt1=y[j].getAttribute('DISPLAYNAME'); document.write(" > " + txt1 + "<BR>"); } document.write("<HR>"); } 

Answer 2

看看我發布給自己的問題的答案。

https://stackoverflow.com/a/17057095/2439211

我成功創建了一個帶有if else語句的for循環，該循環將搜索xml並將結果顯示在表中。 如果未找到結果，則會顯示一條消息，指出未找到任何聯系人。

Answer 3

1. 反向循環在這里不起作用，因為順序會有所不同（如果這對您很重要），但是您可以通過緩存變量來提高循環性能：

    for (i=0; i<x.length; i++) -> for (var i=0,n=x.length; i<n; i++) for (j=0; j<y.length; j++) -> for (var j=0,m=y.length; j<m; j++) 

2. 而不是調用多個獨立的document.write ，構建字符串並僅調用一個字符串會更快。

3. 如果這是HTML頁面，最好不要調用它， document.write有點陳舊，最好使用元素的.innerHTML或以其他方式附加它。

Answer 4

改變， 同時

var i = length; while(i--){...};

我相信雖然比JavaScript中的for 循環要快得多

Answer 5

這里最慢的功能可能是xmlDoc.getElementsByTagName調用。 對於您要查找的每個標簽，只需調用一次xmlDoc.getElementsByTagName即可，而不是兩個。 然后可以在for循環中使用它並訪問元素。 因此： 使用x你提到的第二次xmlDoc.getElementsByTagName('Building')並使用y你第二次提到x[i].getElementsByTagName('Tenant') 這將使您獲得最大的加速。

另一個更改將簡化您的代碼，並使您更輕松地進行優化（但本身可能不會提高太多）：與其隨便為文檔構建DOM元素，而是創建一個數據結構來保存數據。 這也將使調試更加容易。 稍后，它將幫助您隔離性能問題-現在，即使使用事件探查器，也很難判斷對它們的XML文檔的解析是緩慢的還是建立新的DOM節點。

因此：

  var buildings = []; // add this
  for(...)
    txt=x[i].getAttribute('Name');
    // SKIP: document.write(txt + "<BR>");    

    y=x[i].getElementsByTagName('Tenant');
    var tenants = []; 
    for (j=0;j<y.length;j++)
    {
        txt1=y[j].getAttribute('DISPLAYNAME');
        tenants.push(txt1); // instead of: document.write("> " + txt1 + "<BR>");
    }
    buildings.push({ name: txt, tenants: tenants }); 

現在，您有了更清晰的“導入”代碼。 而且您擁有一個不錯的數據結構，可用來生成DOM節點。