onMouseOver和onMouseOut会占用大量CPU？

有一个表格，有100行，16列，HTML中很简单，就只定义了几个简单的CSS，JS也就一个确认删除函数而已
在TR中定义了ondblclick、ononMouseOver和onMouseOut事件实现鼠标经过行时背景色加深，移出行时背景色换回来
之前数据量小的时候，在IE8下测试倒还好好的，但现在数据量也才100行16列...在IE8下既然就卡了...
E5300 2*2G DDR800内存，CPU占用率在50%以上...
经过分页显示把行数缩小到50行，但还是比之前一个50行8列的表格来得卡...
如果不用这2个事件，还有什么办法可以实现上面说的功能吗？(刚开始是用JQuery，数据量多的时候超卡...)BTW，上面是在IE8上测试的，同样一个表格，在FF 3.5中速度就很快，而且还是280行的数据...chrome速度也很快，但...
客户只要求在IE上能运行就好...而且就只用IE...所以...
<!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>XXXX</title>
    <style type = "text/css">
      img {border:0}
      table {border:none; border-collapse:collapse; border-spacing:0; font-size:12px; color:#091F53; font-family:Arial;}
      table th {background:#86B9E4; color:#D7E2EB; height:26px; line-height:26px; border: solid #C6D5E1; border-width:1px 1px 0px 1px; color:#000000;}
      table tr {border:1px solid #C6D5E1; height:20px; line-height:20px; padding-left:10px; padding-right:10px;}
      table td {border:1px solid #C6D5E1; height:20px; line-height:20px; padding-left:10px; padding-right:10px;}
      table caption {font-size:17px; color:#000000; font-weight:bolder;}
    </style>
    <script type = "text/javascript">
      function del_xxx() {
        var is_confirmed = confirm("确定删除？");
        return is_confirmed;
      }
    </script>
  </head>
  <body>
      <input type="button" value="增加xxxx" onclick="parent.location = 'http://localhost/xxx/add_xxx.html'" />
      <table border="0" cellspacing="0">
        <caption>XXXX</caption>
        <tr>
          <th>AA期</th>
          <th>BB期</th>
          <th>xxxx</th>
          <th>X号</th>
          <th>Y号</th>
          <th>Z</th>
          <th>A</th>
          <th>xxxx数</th>
          <th>B数</th>
          <th>C数</th>
          <th>D数</th>
          <th>E数</th>
          <th>F</th>
          <th>G</th>
          <th>H</th>
          <th>删除</th>
        </tr>
              <tr ondblclick="parent.location = 'http://localhost/xxx/show_xxx/266.html'" onMouseOut="this.style.background = ''" onMouseOver="this.style.background = '#DCE6EE'" title="查看或修改详细信息请双击">
                <td>2010-01-24</td>
          <td>2010-01-24</td>
          <td>YT0026/10</td>
          <td>WD-1002</td>
          <td></td>
          <td>AAAAAAAA</td>
          <td>BBBBB</td>
          <td>21683</td>
          <td></td>
          <td>4</td>
          <td></td>
          <td></td>
          <td>-21679</td>
          <td></td>
          <td>3.32</td>
          <td><a href="http://localhost/xxx/del_xxx/266.html" onclick = "return del_xxx()"><img src="http://localhost/img/b_drop.png" title="删除此xxxx" alt="删除此xxxx" class="icon" width="16" height="16" /></a></td>
        </tr>
              <tr ondblclick="parent.location = 'http://localhost/xxx/show_xxx/265.html'" onMouseOut="this.style.background = '#ECF2F6'" onMouseOver="this.style.background = '#DCE6EE'" style="background:#ECF2F6;" title="查看或修改详细信息请双击">
                <td>2010-01-23</td>
          <td>2010-01-23</td>
          <td>YT0025/10</td>
          <td>MH-1124</td>
          <td></td>
          <td>CCCCC</td>
          <td>DDDDD</td>
          <td>4182</td>
          <td>1812</td>
          <td>2856</td>
          <td></td>
          <td></td>
          <td>1044</td>
          <td></td>
          <td>2006.22</td>
          <td><a href="http://localhost/xxx/del_xxx/265.html" onclick = "return del_xxx()"><img src="http://localhost/img/b_drop.png" title="删除此xxxx" alt="删除此xxxx" class="icon" width="16" height="16" /></a></td>
        </tr>
              <tr ondblclick="parent.location = 'http://localhost/xxx/show_xxx/264.html'" onMouseOut="this.style.background = ''" onMouseOver="this.style.background = '#DCE6EE'" title="查看或修改详细信息请双击">
                <td>2010-01-19</td>
          <td>2010-01-19</td>
          <td>YT0024/10</td>
          <td>3C0425</td>
          <td></td>
          <td>EEEEE</td>
          <td>FFF</td>
          <td>15</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>-15</td>
          <td></td>
          <td></td>
          <td><a href="http://localhost/xxx/del_xxx/264.html" onclick = "return del_xxx()"><img src="http://localhost/img/b_drop.png" title="删除此xxxx" alt="删除此xxxx" class="icon" width="16" height="16" /></a></td>
        </tr>
              <tr ondblclick="parent.location = 'http://localhost/xxx/show_xxx/261.html'" onMouseOut="this.style.background = '#ECF2F6'" onMouseOver="this.style.background = '#DCE6EE'" style="background:#ECF2F6;" title="查看或修改详细信息请双击">
                <td>2010-01-19</td>
          <td>2010-01-19</td>
          <td>YT0022/10</td>
          <td>10W-01564</td>
          <td></td>
          <td>GGGGG</td>
          <td>HHHH</td>
          <td>4</td>
          <td>4</td>
          <td>4</td>
          <td></td>
          <td></td>
          <td>0</td>
          <td></td>
          <td>5.84</td>
          <td><a href="http://localhost/xxx/del_xxx/261.html" onclick = "return del_xxx()"><img src="http://localhost/img/b_drop.png" title="删除此xxxx" alt="删除此xxxx" class="icon" width="16" height="16" /></a></td>
          </table>
  </body>
</html>

解决方案 »

  1.   

    .......表格在20行的情况下，在IE8下移动鼠标，CPU占用率也能达到35%...
    E5300的CPU啊...办公用电脑已经算好了吧....
      

  2.   

    确实，ie真够破的
    使用css hover吧table tr:hover{background:...}只有ie6不支持，在ie6上另外加上用js来弄
      

  3.   

    刚开始就是用的JQuery，数据量大的话很卡能说具体点吗？？
    我试着将onMouseOver和onMouseOut事件删掉换成你上面说的CSS
    但是本来就有背景色的就不会变色了...
    table tr,td{border:1px solid #C6D5E1; height:20px; line-height:20px; padding-left:10px; padding-right:10px;}
    table tr:hover {background:#DCE6EE;}
    如上面的表格偶数行都是默认有背景色“#ECF2F6”的，但是当鼠标移动过去的时候偶数行背景色还是一样...
    奇数行倒是实现了以前的功能
      

  4.   

    ........不过...
    发现即使改成这样...CPU占用率也没降下来...
      

  5.   

    <!--=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>123</title>
        <style type = "text/css">
          img {border:0}
          
          table caption {font-size:17px; color:#000000; font-weight:bolder;}
        </style>
        <script type = "text/javascript">
    function ld(){
            document.getElementById('t1').onmouseover= function del(eventTag) {   
    var e = eventTag||window.event;   
    var et=e.srcElement||e.target; 

        while(et.tagName!='TR'){
    //alert(et.id);
    if(et.tagName=='TABLE')return;
        et=et.parentElement || et.parentNode;
    }
    et.style['backgroundColor']=et.getAttribute('c1');
    }
    document.getElementById('t1').onmouseout= function del(eventTag) {   
    var e = eventTag||window.event;   
    var et=e.srcElement||e.target; 

        while(et.tagName!='TR'){
    if(et.tagName=='TABLE')return;
        et=et.parentElement || et.parentNode;
    }
    et.style['backgroundColor']=et.getAttribute('c2');
    }
      }
        </script>
      </head>
      <body onload='ld()'>
         
        <table id='t1' border="1" WIDTH='100%'; cellspacing="0">
            <caption>XXXX</caption>
            <tr  c1='#ccc' c2='#fff'>
              <th>AA期</th>
              <th>BB期</th>
              <th>xxxx</th>
              <th>X号</th>
              <th>Y号</th>
              <th>Z</th>
              <th>A</th>
              <th>xxxx数</th>
              <th>B数</th>
              <th>C数</th>
              <th>D数</th>
              <th>E数</th>
              <th>F</th>
              <th>G</th>
              <th>H</th>
              <th>删除</th>
            </tr>
              </table>  </body>
    </html>
    吧事件捕获封装在TABLE里看看
      

  6.   

    .........这个写的确快多了，CPU占用率也低下来了...
    但是当我在我的网页上添加你的JS时，却发现还是很卡...
    于是一句一句对照，明明就一模一样...最后....
    发现最顶端的这句
    <!--=DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
    和我之前写的
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    不一样...但是...我这句是直接从DW中拷贝出来的，应该没错啊...试着改成和你一样的...结果既然就可以了...CPU占用率也低下来了...改回我之前写的onMouseOver事件，也变快了...
    没想到既然是这句话在搞鬼...这2句话有什么差别吗？？
      

  7.   

    占大量CPU要看你执行的逻辑里面了。