javascript - jQuery 创建的列表需要很多时间

Question

我有一个包含 9000 条记录的 JSON 数组，它使用列表 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

看this性能测试。使用 for 循环代替 .each() 函数。