由jQuery创建的列表需要花费很多时间

Question

我有一个JSON数组，它有9000条记录，并使用list li显示。 HTML对象是使用jQuery创建的：

$j.each(DTOList, function(index,obj) {
              var $li = $j("<li/>");
              var $button = $j("<button/>", { type: "button" , onClick:"location.href='playfile.html?messageId="+obj.id+"&operation=play&to="+obj.to+"&from="+obj.from+"'" });
              var $parentDiv = $j("<div/>", { class: "buttonMargin" });
              var $numDiv =  $j("<div/>", { class: "num" ,text:obj.to});
              var $nameDiv =  $j("<div/>", { class: "name" ,text:obj.from});
              var $timeDiv =  $j("<div/>", { class: "time" , text:obj.time});

              $parentDiv.append($numDiv);
              $parentDiv.append($nameDiv);
              $parentDiv.append($timeDiv);
              $parentDiv.append($j("<hr>"));

              $j("#datalist").append($li.append($button.append($parentDiv)));

        });

以下是由上述代码创建的li的示例：

<li>
    <button type="button"
        onclick="location.href='playfile.html?messageId=1165484222&amp;operation=play&amp;to=Fax Line&amp;from=abc'">
        <div class="buttonMargin">
            <div class="num">Fax Line</div>
            <div class="name">def</div>
            <div class="time">Jan 04,2018 12:02:44 AM</div>
            <hr>
        </div>
    </button>
<li>

问题在于，上面的代码至少需要1.5分钟才能加载，直到那时我的HTML页面才空白。有没有办法改进上面的代码来提高性能？

Answer 1

查看https://jsfiddle.net/mafervemg/g0rb9xL1/性能测试。使用for循环代替.each()函数。 this

Answer 2

这里的主要问题可能是在这一行中执行的DOM操作

$j("#datalist").append($li.append($button.append($parentDiv)));

一遍又一遍地触发文件回流......

因此，作为第一个改进尝试首先生成所有项目（不将其附加到DOM中），然后通过一次操作将其追加。

这样的事情：

var elements = [];

$j.each(DTOList, function(index,obj) {
         .....
         elements.push($li);
});

$j("#datalist").append(elements);