日期:2014-05-16  浏览次数:20720 次

IE操作DOM差别 - Web 开发 / Ajax
我往一个select里添加1000个元素,在不同的机器上运行效果完全不同,有的很快,没感觉,有的要死好几秒,为什么?感觉IE的差别在于,用得慢的都是中文版,快得都是英文版.是这个原因吗?
有什么办法提高效率,下面是我的代码,我试了好几种写法,下面是我发现最快的.还有更好的吗?据说用innerHTML更好,好象对select innerHTML无效.

  var oFragment = document.createDocumentFragment();
  var curLength = 1000; 

  for(var i = 0; i< curLength ;i++)
  {
  var curValue = (i+1)*minqty;
  var op = document.createElement ("option");
  op.value = curValue;
  op.innerText = curValue;
  oFragment.appendChild(op);
  }
  oQtyEle.appendChild(oFragment);

------解决方案--------------------
以下方法1秒左右:
HTML code
<!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>无标题页</title>
    <style type="text/css">
        
    </style>
    
<script type="text/javascript">

    window.onload = function()
    {
        document.getElementById('s1').innerHTML ="开始时间:" + new Date().toLocaleString();
        var str = "<select>";
        var curLength = 1000;

        for (var i = 0; i < curLength; i++)
        {
            str += "<option value='" + i + "'>" + i + "</option>"
        }
        str += "</select>"

        document.getElementById("container").innerHTML = str;

        document.getElementById('s2').innerHTML = "结束时间:" + new Date().toLocaleString();
    }

</script>
</head>
<body >

<div id="container">

</div>

<span id="s1"></span><br />
<span id="s2"></span>
</body>
</html>

------解决方案--------------------
这样看的更清楚些
HTML code
<!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>无标题页</title>
    <style type="text/css">
        
    </style>
    
<script type="text/javascript">

    window.onload = function()
    {
        document.getElementById('s1').innerHTML = "开始时间:" + new Date().toLocaleString() +":" + new Date().getMilliseconds();
        var str = "<select>";
        var curLength = 1000;

        for (var i = 0; i < curLength; i++)
        {
            str += "<option value='" + i + "'>" + i + "</option>"
        }
        str += "</select>"

        document.getElementById("container").innerHTML = str;

        document.getElementById('s2').innerHTML = "结束时间:" + new Date().toLocaleString() + ":" + new Date().getMilliseconds();
    }

</script>
</head>
<body >

<div id="container">

</div>

<span id="s1"></span><br />
<span id="s2"></span>
</body>
</html>

------解决方案--------------------

------解决方案--------------------
HTML code

<!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>无标题页</title>
    <style type="text/css&q