.append 上的大字符串 HTML 在 IE 10 中需要很长时间

Question

我在工作中遇到了一些 jQuery 代码的问题，我现在没有确切的代码，但我会尽力提供伪代码。我对 javascript 比较陌生，所以有些语法可能是错误的。

我正在为表格中的每一列动态创建一个不同值的 HTML 列表，然后将它们放在一个菜单中，当您单击列标题时会打开该菜单（功能类似于 Excel 中的表格）。所以我有一个字符串数组，我用这一行为每一列调用一个函数（有 12 个）：

$(name of ul element).empty().append(myFunction(items, nColumnNum));

那么我调用的函数如下：

myFunction(items, nColumnNum) {
    var r = "";
    var i = 0;
    for (i = 0; i < items.length; i++)
    {
        r += "HTML with <li> tag with checkbox and label inside"
    }
    return r;

现在我已经做了一些基本的分析，我知道“myFunction”并不是需要这么长时间的。需要很长时间的部分是“.append”函数调用。这在 Firefox 中进行得非常快，但在 IE 10 中，当我处理“items”数组中的大约 2200 个项目时，大约需要 1.5 秒。由于几列有这么多项目，而我有 12 列，这需要很长时间。我已经尝试单独附加每个列表元素（尽管我认为这行不通）并且我尝试设置 innerHTML 而不是 '.append' 但它都不起作用。

IE 引擎中是否存在针对此类事情的某种错误，如果存在，是否有解决这种情况的方法？还是有更有效的方法来做到这一点？

谢谢，提前。

Answer 1

请找到与之相关的小提琴，它在 IE 上也可以正常工作。

让我们举一个拥有物品的例子

var items = [1,2,3,4,5,6,7,8,9,10,11,12,13];
items.length = 2200;

JS 代码

$(document).ready(function(){
  $("#list_elements").empty().append(myFunction(items, 10));
});

function myFunction(items, nColumnNum) {
    var r = "";
    var i = 0;
    for (i = 0; i < items.length; i++)
    {
        r += "HTML with <li> tag with checkbox and label inside"
    }
    return r;
}

html代码：

<ul id="list_elements"></ul>

jsfiddle