我有一个Web应用程序,其中有多个class="classA"
元素。我想选择一个函数并将其应用于所有这些函数。我正在做明显的事情,即$(".classA").each(function () { ... })
。这在Chrome / Safari / Firefox中工作正常,但在IE中确实很慢。事实证明,在jQuery中通过CSS类选择内容时,IE存在严重的性能问题。
我想知道是否有人对解决这个问题有好的建议。我不能使用ID选择器,因为可能要选择多个DOM元素。
-编辑-
以下是我的测试代码。
test1使用document.getElementById("id")
并且非常快。
test2使用$("#id")
并且非常慢。
test3使用$(".class")
,甚至更慢。
据我所知,在IE8中没有document.getElementsByClassName的本地实现-尝试使用它时出现错误。
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
function test1 ()
{
var start = (new Date).getTime();
for (var i = 0; i < 10000; i++)
{
document.getElementById("test1");
}
var elapsed = (new Date).getTime() - start;
alert("test1 elapsed: " + elapsed);
}
function test2 ()
{
var start = (new Date).getTime();
for (var i = 0; i < 10000; i++)
{
var x = $("#test2");
}
var elapsed = (new Date).getTime() - start;
alert("test2 elapsed: " + elapsed);
}
function test3 ()
{
var start = (new Date).getTime();
for (var i = 0; i < 10000; i++)
{
$(".test3");
}
var elapsed = (new Date).getTime() - start;
alert("test3 elapsed: " + elapsed);
}
</script>
</head>
<body>
<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3" class="test3">test3 1</div>
<div id="test3" class="test3">test3 2</div>
<div id="test3" class="test3">test3 3</div>
<div id="test3" class="test3">test3 4</div>
<input type="button" onclick="test1();" value="test1" />
<input type="button" onclick="test2();" value="test2" />
<input type="button" onclick="test3();" value="test3" />
</body>
</html>
最佳答案
您可以尝试各种方法,但是IE经过优化,可以通过ID来获取元素,而别无其他(它将元素ID放在隐藏的哈希表中)。
如果您通过某种服务器端技术生成页面,则可以确定元素列表,然后输出这些元素ID的JavaScript数组,然后在页面加载时可以遍历该数组并通过以下方式收集元素ID。
这就是我们在ASP.NET应用程序中所取得的成功,尽管您可能正在做其他事情。我至少会调查jmbledsoe所描述的选项,它们可以有所帮助,但是我怀疑您是否会获得想要的性能。