我使用 JS 调用 XML 文件中的文本,然后向该文本添加 JS 函数。然而, react 却非常非常慢。有什么办法可以改善这个问题吗?
我有两个 XML 文件...一个是我创建的,另一个来自使用 flash 程序创建的数据库。我希望突出显示此 Flash 程序的某些功能。我已经通过以下三种方式之一完成了此操作:
我手动输入文本并使用 JS 在鼠标悬停时突出显示 Flash 功能(速度非常快,但我必须在 html 页面上手动输入所有文本,并且必须为每个文本执行此操作单个 flash 文件(我做了超过 50 个)另外,数据会经常更改,最好有一个数据库文档,而不是单独进入每个 flash 文件。
我在包含 JS 的 XML 文件中创建了一个标记,当我从页面调用它时,整个列表会立即填充,但是速度非常慢,每次鼠标悬停都要花费几秒钟每个文本)
我使用 JS 调用 XML 文本,并为鼠标悬停添加另一个 JS 函数。这也有效,但非常慢(虽然不像#2那么慢,但仍然很慢),而且 JS 很长,因为我必须单独调用每个文本,而不是像我在#2<中那样填充整个列表
以下是 2 和 3 的示例:
#2 的 XML
<VIRGINIAREP>
<DISTRICTS>
<STATE>Virginia</STATE>
<DISTRICT>1</DISTRICT>
<REPRESENTATIVE>Robert J. Wittman</REPRESENTATIVE>
<REPWEB>http://wittman.house.gov' onMouseOver='highlight1()' onMouseOut='highlight_clear()'</REPWEB>
<PARTY>R</PARTY>
</DISTRICTS>
<DISTRICTS>
<STATE>Virginia</STATE>
<DISTRICT>2</DISTRICT>
<REPRESENTATIVE>Scott Rigell</REPRESENTATIVE>
<REPWEB>http://rigell.house.gov' onMouseOver='highlight2()' onMouseOut='highlight_clear()'</REPWEB>
<PARTY>R</PARTY>
</DISTRICTS>
<DISTRICTS>
<STATE>Virginia</STATE>
<DISTRICT>3</DISTRICT>
<REPRESENTATIVE>Robert C. Scott</REPRESENTATIVE>
<REPWEB>http://www.house.gov/scott/' onMouseOver='highlight3()' onMouseOut='highlight_clear()'</REPWEB>
<PARTY>D</PARTY>
</DISTRICTS>..... etc.
#2 的 JS
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","113CongressC.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='0'>");
var x=xmlDoc.getElementsByTagName("DISTRICTS");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("DISTRICT")[0].childNodes[0].nodeValue + " -");
document.write("</td><td>");
document.write("<a TARGET='_blank' href='" + x[i].getElementsByTagName("REPWEB")[0].childNodes[0].nodeValue + "'>" + x[i].getElementsByTagName("REPRESENTATIVE")[0].childNodes[0].nodeValue) + "</a>";
document.write("</td><td>");
document.write("(" + x[i].getElementsByTagName("PARTY")[0].childNodes[0].nodeValue + ")");
document.write("</td></tr>");
}
document.write("</table>");
</script>
亮点功能
function highlight() {
theMap.features('DISTRICT="1"').highlight(
{visible: true, fillColor: "#FFFF00", fillAlpha: 1.0}
);
}
#3 的 XML
<VIRGINIAREP>
<DISTRICTS>
<STATE>Virginia</STATE>
<DISTRICT>1</DISTRICT>
<REPRESENTATIVE>Robert Wittman</REPRESENTATIVE>
<REPWEB>http://wittman.house.gov</REPWEB>
<PARTY>R</PARTY>
</DISTRICTS> ...etc.
#3 的 JS
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","113CongressC.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("DISTRICTS");
i=0;
function displayREPS()
{
rep="<a target = '_blank' onMouseOver='highlight()' onMouseOut='highlight_clear()' href = '" + (x[0].getElementsByTagName("REPWEB")[0].childNodes[0].nodeValue) + "'>" +(x[0].getElementsByTagName("REPRESENTATIVE")[0].childNodes[0].nodeValue) + "</a>";
district=(x[0].getElementsByTagName("DISTRICT")[0].childNodes[0].nodeValue);
party=(x[0].getElementsByTagName("PARTY")[0].childNodes[0].nodeValue);
//2
rep1="<a target = '_blank' onMouseOver='highlight1()' onMouseOut='highlight_clear()' href = '" + (x[1].getElementsByTagName("REPWEB")[0].childNodes[0].nodeValue) + "'>" +(x[1].getElementsByTagName("REPRESENTATIVE")[0].childNodes[0].nodeValue) + "</a>";
district1=(x[1].getElementsByTagName("DISTRICT")[0].childNodes[0].nodeValue);
party1=(x[1].getElementsByTagName("PARTY")[0].childNodes[0].nodeValue);
//3
rep2="<a target = '_blank' onMouseOver='highlight2()' onMouseOut='highlight_clear()' href = '" + (x[2].getElementsByTagName("REPWEB")[0].childNodes[0].nodeValue) + "'>" +(x[2].getElementsByTagName("REPRESENTATIVE")[0].childNodes[0].nodeValue) + "</a>";
district2=(x[2].getElementsByTagName("DISTRICT")[0].childNodes[0].nodeValue);
party2=(x[2].getElementsByTagName("PARTY")[0].childNodes[0].nodeValue);
...等等
//TXT
txt0=district + " - " + rep + " ("+ party + ")";
txt1=district1 + " - " + rep1 + " ("+ party1 + ")";
txt2=district2 + " - " + rep2 + " ("+ party2 + ")";
txt3=district3 + " - " + rep3 + " ("+ party3 + ")";
txt4=district4 + " - " + rep4 + " ("+ party4 + ")";
...etc
document.getElementById("showREPS").innerHTML=txt0 + "<br>" + txt1 + "<br>" + txt2 + "<br>" + txt3 + "<br>" + txt4 + "<br>" + txt5 + "<br>" + txt6 + "<br>" + txt7 + "<br>" + txt8 + "<br>" + txt9 + "<br>" + txt10 + "<br>";
}
</script>
</head>
<body onload="displayREPS()">
<div id='showREPS'></div>
我也尝试过:<REPWEB><![CDATA[<a target='_blank' href='http://wittman.house.gov' onMouseOver='highlight0()' onMouseOut='highlight_clear()'>]]></REPWEB>
对于 XML
关于如何以更快的速度更好、更高效地完成此操作,有什么建议吗?
最佳答案
我在 COM 代码中的 XHR 对象上发现了同样的问题。 当我使用 responseXML 方法而不是 responseText 时,xml 文档通过 XPath 查询查找节点的速度非常慢。 我正在使用 MSXML6。
- 使用responseText获取整个文本
- 创建 DOM 文档
- 通过新 DOM 文档的 loadXML(string) 方法加载 xml
瞧!真的更快了!我不明白为什么 XMLHTTPRequest 在 responseXML 上创建什么样的 DOM 文档才能获得如此缓慢的 DOM 文档,但创建新文档确实更快
关于javascript - 可以工作,但是非常慢...使用 JS 调用 XML,然后将 JS 函数添加到 XML 中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15413406/