IE8(javascript):加载SELECT元素中的大型选项列表非常慢

Question

我正在使用createElement和添加方法加载带有6000个项目的SELECT元素.代码如下所示,也可以在此处访问.在IE8中,加载列表大约需要16秒,大约在同一时间清除它.在IE9和Firefox中,加载时间<2秒,清除时间<1秒.关于如何提高IE8速度的任何想法？

谢谢.

<script type="text/javascript">
window.onload = loadList;

function loadList() {
    clearList();
    var start = new Date().getTime();
    var o = document.getElementById("listLookupAvailableItems")
    for (var i = 0; i < 6000; i++) {
        var option = document.createElement("option");
        option.text = 'ABCDF ' + i;
        option.value = option.text;
        o.add(option, o.options[null]);
    }
    log('Load time: ' + (new Date().getTime() - start));
}
function clearList() {
    var start = new Date().getTime();
    document.getElementById("listLookupAvailableItems").options.length = 0;
    log('Clear time: ' + (new Date().getTime() - start));
    return false;
}
function log(txt) {
    document.getElementById('infoPanel').innerHTML += '</br>' + txt;
}
</script>

Answer 1

我的猜测是IE8中特定的DOM操作非常慢.通常,操纵DOM是任何浏览器中最慢的操作类型.为了解决这个问题,我通常会尝试找到将我的更改组合到一个DOM更新中的方法(例如,将6000行的HTML"批处理"添加到表中,而不是单独向表中添加6000行).

在这个例子中,唯一的方法可能是将所有<option>元素创建为HTML,然后使用innerHTML它们将它们插入到<select>.看到这个jsfiddle示例:http://jsfiddle.net/pseudosavant/bVAFF/

我没有IE8来测试,但它是很多,甚至在Firefox中,我(22毫秒VS 500毫秒)快.

更新

看起来它innerHTML在IE中不能用于加载列表,但它确实可以用于清除它.加载它使用jQuery工作$(o).html(html);.我更新了jsfiddle示例,它在IE9中工作,现在希望IE8.

使用Javascript:

$(document).ready(function(){
    loadListBatch();
});

function loadListBatch() {
    clearListBatch();
    var start = new Date().getTime();
    var o = document.getElementById("listLookupAvailableItems")
    var html = "";
    for (var i = 0; i < 6000; i++) {
        html += "<option value='"+'XYZ' + i+"'>"+'XYZ ' + i+"</option>";
    }
    // o.innerHTML = html; // Only one DOM operation, but still doesn't work in IE
    $(o).html(html); // Using jQuery to insert the HTML makes it work with IE
    console.log('Load time: ' + (new Date().getTime() - start));
}

function clearListBatch() {
    var start = new Date().getTime();
    document.getElementById("listLookupAvailableItems").innerHTML = ""; // It was already only one DOM call, but this is faster it seems.
    console.log('Clear time: ' + (new Date().getTime() - start));
    return false;
}