一个有1000个td的table在IE8下响应鼠标事件的速度超级慢,IE7和FF基本正常。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE8 damn~~~~~~~~~</title>
<style>
td{background-color:#eeccaa;}
</style>
<body >
<table width=100% height=500 border=0 cellspacing=1 id="mytable">
<script>
for(i=0;i<20;i++){
var td ='';
for(j=0;j<50;j++){
td +='<td></td>';
}
document.writeln('<tr>'+td+'</tr>');
}
</script>
<table>
</body>
<script>
var myTable = document.getElementById('mytable');
myTable.onmouseover= function(event){
var evt = event || window.event,e = document.all?evt.srcElement:evt.target;
(e.tagName == 'TD') && (e.style.backgroundColor ='blue');
}
myTable.onmouseout= function(event){
var evt = event || window.event,e = document.all?evt.srcElement:evt.target;
(e.tagName == 'TD') && (e.style.backgroundColor ='#eeccaa');
}
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE8 damn~~~~~~~~~</title>
<style>
td{background-color:#eeccaa;}
</style>
<body >
<table width=100% height=500 border=0 cellspacing=1 id="mytable">
<script>
for(i=0;i<20;i++){
var td ='';
for(j=0;j<50;j++){
td +='<td></td>';
}
document.writeln('<tr>'+td+'</tr>');
}
</script>
<table>
</body>
<script>
var myTable = document.getElementById('mytable');
myTable.onmouseover= function(event){
var evt = event || window.event,e = document.all?evt.srcElement:evt.target;
(e.tagName == 'TD') && (e.style.backgroundColor ='blue');
}
myTable.onmouseout= function(event){
var evt = event || window.event,e = document.all?evt.srcElement:evt.target;
(e.tagName == 'TD') && (e.style.backgroundColor ='#eeccaa');
}
</script>
</html>
另外事件我只是加了两个啊,不算多吧?
那些为了测试FF和IE的速度而搞一个1000次循环的也是变态吗?
问题是IE8觉得1000个TD变态,所以很慢。但IE7和FF根本不觉得1000个TD算什么,速度一样飞快。
发现把 doctype 去掉会快