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

时间:2020-12-10 14:24:17

There are a lot of similar posts but nothing quite fit my need. So I am forced create a post.

有很多类似的帖子,但没有什么适合我的需要。所以我*创建一个帖子。

List of names are displayed on a jsp page. When you hover over a name, I do an ajax call to display the details for that name in a tooltip popup.

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

The users will be using IE8. It takes approximately about 5 seconds to do this simple thing in IE8 where as in Firefox and chrome it happens instantly.

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

What I have also noticed is that as the numbers of name displayed increases or decreases, the response time also does the same in IE8.

我还注意到,随着显示的名称数量增加或减少,响应时间在IE8中也是如此。

How can I make it faster in IE8?

如何在IE8中加快速度?

jsp page

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

javascript function

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

3 个解决方案

#1


4  

Try this.

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

You'll probably see that the call is equally fast, but it's the subsequent rendering of the response that is slow in IE8.

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

If you confirm that, the question then is about what's in the responseText.

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

#2


2  

Instead:

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

try this:

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

Fix new Date

修复新日期

In your code lacked parentheses (Remember to separate Mathematics of Strings). Try:

在您的代码中缺少括号(请记住将字符串数学分开)。尝试:

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

Test Ajax Request:

测试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';
?>

results:

  • IE8: 5004 milliseconds

    IE8:5004毫秒

  • Chorme: 5005 milliseconds

    Chorme:5005毫秒

  • Firefox: 5014 milliseconds

    Firefox:5014毫秒

  • IE7: 5023 milliseconds

    IE7:5023毫秒

  • IE6: 5053 milliseconds

    IE6:5053毫秒

After the tests, concludes that perhaps something on the side of the server-side, to be more exact in your PHP.

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

#3


1  

If you want to use jquery:

如果你想使用jquery:

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

#1


4  

Try this.

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

You'll probably see that the call is equally fast, but it's the subsequent rendering of the response that is slow in IE8.

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

If you confirm that, the question then is about what's in the responseText.

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

#2


2  

Instead:

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

try this:

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

Fix new Date

修复新日期

In your code lacked parentheses (Remember to separate Mathematics of Strings). Try:

在您的代码中缺少括号(请记住将字符串数学分开)。尝试:

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

Test Ajax Request:

测试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';
?>

results:

  • IE8: 5004 milliseconds

    IE8:5004毫秒

  • Chorme: 5005 milliseconds

    Chorme:5005毫秒

  • Firefox: 5014 milliseconds

    Firefox:5014毫秒

  • IE7: 5023 milliseconds

    IE7:5023毫秒

  • IE6: 5053 milliseconds

    IE6:5053毫秒

After the tests, concludes that perhaps something on the side of the server-side, to be more exact in your PHP.

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

#3


1  

If you want to use jquery:

如果你想使用jquery:

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