挑战你能耐的时候到了：如何提高这段脚本在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>
    <title>Untitled Page</title>
    <style type="text/css">
    td{width:10px;height:15px;border-color:#ccd4e4;}
    </style>
</head>
<body>
<div id="board" style="border: outset 5px #6688ff;width:600px;">
<script type="text/javascript">
    var tmp = "<table id=grid width=600 height=600 border=1 cellpadding=0 style='border-collapse: collapse;font-size:4px;'>";
    for (var i = 0; i < 40; i++) {
        tmp+="<tr>";
        for (var j = 0; j < 40; j++) {
            tmp+="<td></td>";
        }
        tmp += "</tr>";
    }
    tmp += "</table>";
    document.write(tmp);
    var grid = document.getElementById("grid");
    grid.onselectstart=grid.ondrag = function() { return false; };
    var mdown = false;
    grid.onmousedown = function(e) {
        mdown = true;
    };
    grid.onmouseup = function(e) {
        mdown = false;
    };
    grid.onmousemove = function(e) {
        if (!e) e = window.event;
        var tag = e.srcElement || e.target;
        if (mdown) {
            if (e.ctrlKey) {
                tag.style.backgroundColor = "";
            }
            else{
                tag.style.backgroundColor = "gray";
            }
        }
    };
    
</script>
</div>
</body>
</html>

解决方案 »

  1.   

    不知道你用什么IE版本，你去http://validator.w3.org/check  把你这段代码一验证。好多问题，11个错误，4个警告，很多地方没有加引号，结尾也不规范。现在像 fiefox  这些浏览器都会主动忽略这些小问题，甚至你没有写会在解析时候帮你加上，可IE这个东西就不会那么好了，虽然也有很多小问题IE是会忽略的，但解析过程很很慢 ，这个和IE本身有关，所以建议你去改善这个小问题，自然你的性能就提高了，问题也少了。
      

  2.   

    生成table的那段用强语言进行，这样的话处理更快，让浏览器有更多的时间来处理其他问题，那个40x40的表格如果非要用脚本生成的话，建议你用Array.join和Array.push方式来组织字符串
      

  3.   

    1. IE8以前的版本  字符串用join操作 快于 + 操作
    2. 你这个表格在没有按下鼠标的时候也在监听onmousemove事件。可以上去先不加onmousemove，onmousedown之后加上监听，onmouseup移除监听。
      

  4.   

    字符串的+ 可以改成Array的 join("")
      

  5.   


        var tmp = "<table id=grid width=600 height=600 border=1 cellpadding=0 style='border-collapse: collapse;font-size:4px;'>";
        for (var i = 0; i < 40; i++) {
            tmp+="<tr>";
            for (var j = 0; j < 40; j++) {
                tmp+="<td></td>";
            }
            tmp += "</tr>";
        }
        tmp += "</table>";
        document.write(tmp);用数组的push、join    var tmp = [];
        tmp.push("<table id=grid width=600 height=600 border=1 cellpadding=0 style='border-collapse: collapse;font-size:4px;'>");
        for (var i = 0; i < 40; i++) {
            tmp.push("<tr>");
            for (var j = 0; j < 40; j++) {
                tmp.push("<td></td>");
            }
            tmp.push("</tr>");
        }
        tmp.push("</table>");
        document.write(tmp.join(''));
      

  6.   

    中间的双层for循环替换成下面一行即可：tmp += new Array(41).join('<tr>' + new Array(41).join('<td></td>') + '</tr>');貌似我的IE6太强劲了？楼主的写法也是一闪就出来了。把楼主的代码改成200x200的表格，我的代码改成201，就能看出差距了：tmp += new Array(201).join('<tr>' + new Array(201).join('<td></td>') + '</tr>');