Question

有很多类似的帖子，但没有什么比我的需要更合适。所以我被迫创建一个帖子。

名称列表显示在jsp页面上。当您将鼠标悬停在某个名称上时，我会进行一次ajax调用，以便在工具提示弹出窗口中显示该名称的详细信息。

用户将使用IE8。在IE8中执行这个简单的操作需要大约5秒钟，因为在Firefox和Chrome中它会立即发生。

我还注意到，当显示的名称数量增加或减少时，IE8中的响应时间也相同。

如何在IE8中加快速度？

jsp page

<td onmouseover ="showDetails('${origin }')">
    <a href="#"><c:out value="${origin}"></c:out><span id="info"></span></a> 
</td>

javascript功能

function showDetails(stop){
    var xmlHttpRequest; 
    if(window.XMLHttpRequest){
        xmlHttpRequest = new XMLHttpRequest();
    }else{
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttpRequest.onreadystatechange=function(){
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            document.getElementById("info").innerHTML = xmlHttpRequest.responseText;
        }
    }
    xmlHttpRequest.open("GET", "showStopsInfoPopup.do?stop="+stop, true);
    xmlHttpRequest.send();
}

Answer 1

试试这个。

function showDetails(stop){
    var t1 = new Date().getTime();
    var xmlHttpRequest; 
    if(window.XMLHttpRequest){
        xmlHttpRequest = new XMLHttpRequest();
    }else{
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttpRequest.onreadystatechange=function(){
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            alert("Call took " + (new Date().getTime() - t1) + " milliseconds");
            document.getElementById("info").innerHTML = xmlHttpRequest.responseText;
        }
    }
    xmlHttpRequest.open("GET", "showStopsInfoPopup.do?stop="+stop, true);
    xmlHttpRequest.send();
}

您可能会看到调用同样快，但是IE8中后续呈现的响应速度很慢。

如果你确认了，那么问题就是关于responseText中的内容。

Answer 2

相反：

xmlHttpRequest.onreadystatechange=function(){
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        alert("Call took " + new Date().getTime() - t1 + " milliseconds");
        document.getElementById("info").innerHTML = xmlHttpRequest.responseText;
    }
}
xmlHttpRequest.open("GET", "showStopsInfoPopup.do?stop="+stop, true);
xmlHttpRequest.send();

试试这个：

xmlHttpRequest.open("GET", "showStopsInfoPopup.do?stop="+stop, true);
xmlHttpRequest.onreadystatechange=function(){
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        alert("Call took " + new Date().getTime() - t1 + " milliseconds");
        document.getElementById("info").innerHTML = xmlHttpRequest.responseText;
    }
}
xmlHttpRequest.send(null);

修复新日期

在您的代码中缺少括号（请记住将Mathematics Strings分开。尝试：

xmlHttpRequest.open("GET", "showStopsInfoPopup.do?stop="+stop, true);
xmlHttpRequest.onreadystatechange=function(){
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        alert("Call took " + (new Date().getTime() - t1) + " milliseconds");
        document.getElementById("info").innerHTML = xmlHttpRequest.responseText;
    }
}
xmlHttpRequest.send(null);

<强>测试 Ajax请求：

<div id="info"></div>
<script>var xhr, t1;
if(window.ActiveXObject){
    try { xhr=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){
        try { xhr=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){}
    }
} else if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
}

xhr.open("GET", "teste.php", true);

t1 = new Date().getTime();//I start the timer that point to prevent the previous functions affect the end result

xhr.onreadystatechange=function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        document.getElementById("info").innerHTML = "Call took " + (new Date().getTime() - t1) + " milliseconds";
    }
}
xhr.send(null);
</script>

php（teste.php）：

<?php
sleep(5);
echo 'ok';
?>

<强>结果：

IE8：5004毫秒
Chorme：5005毫秒
Firefox：5014毫秒
IE7：5023毫秒
IE6：5053毫秒

在测试之后，得出结论可能是服务器端的某些内容，更准确地说是在PHP中。

Answer 3

如果你想使用jquery：

function showDetails(stop) {
  $('#info').load("showStopsInfoPopup.do?stop=" + stop);
}

在IE 8中ajax非常慢，但在firefox和chrome中速度非常快

3 个答案: