IE操作DOM差别-AJAX教程-爱易网页

IE操作DOM差别

日期：2014-05-16　浏览次数：20785 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

IE操作DOM差别

相关资料更多>

推荐阅读更多>