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"> </style> <script type="text/javascript"> window.onload = function() { document.getElementById('s1').innerHTML = "开始时间:" + new Date().toLocaleString() +":" + new Date().getMilliseconds(); var curLength = 1000; var ary = new Array();//用array效率更高，效果更明显 ary.push("<select>"); for (var i = 0; i < curLength; i++) { ary.push("<option value='"); ary.push(i); ary.push("'>"); ary.push(i); ary.push("</option>"); } ary.push("</select>"); document.getElementById("container").innerHTML = ary.join(''); 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>稍作改动下，效率更高！！！
[解决办法]
[解决办法]
不同的方法操作 DOM 是有性能差别的，因为插入节点，并重新进行页面的渲染。方法不同，性能不同。下面是提高 DOM 性能的12个法则
http://msdn.microsoft.com/en-us/library/ms533019%28VS.85%29.aspx