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