向页面添加大量元素时性能不佳

Question

我已经生成了一个表，但是我使用<div>s而不是<tr>s和<td>s。这是一个例子：

<div class="tbl tbl1">
    <div class="thead">
        <div class="tr">
            <div class="td colTitle" style="width: 120px"><span>Title</span></div>
            <div class="td colLink" style="width: 190px"><span>Link</span></div>
            <div class="td colSize numeric" style="width: 75px"><span>Size(MB)</span></div>
            <div class="td colUploadDate" style="width: 75px"><span>UploadDate</span></div>
            <div class="td colOpen" style="width: 50px; max-width: 50px;"><span>Show</span></div>
        </div>
        <div class="tr">
            <div class="td colTitle">
                <input type="text" class="Filter" />
            </div>
            <div class="td colLink">
                <input type="text" class="Filter" />
            </div>
            <div class="td colSize">
                <input type="text" class="Filter" />
            </div>
            <div class="td colUploadDate">
                <input type="text" class="Filter" />
            </div>
            <div class="td colOpen">
            </div>
        </div>
    </div>
    <div class="tbody">
    </div>
</div>

我将填充tbody一个ajax函数。从数据库中获取所有数据后，我将其存储到客户端的数组中。我使用以下代码使用array填充表arr。但是，当我有很多行时，要花很多时间在表中显示行。

var res = "";
arr.forEach(function (row) {
    res += "<div class='tr' idattachment='" + row["IdAttachment"] + "' >" +
            "<div class='td colTitle'>" + row["Title"] + "</div>" +
            "<div class='td colLink'>" + row["Name"] + "</div>" +
            "<div class='td colSize'>" + (row["Size"] / (1024 * 1024)).toFixed(2) + "</div>" +
            "<div class='td colUploadDate'>" + row["UploadDate"] + "</div>" +
            "<div class='td colOpen'><a class='link' href='uploads/" + row["Name"] + "'>Open</a></div>" +
            "</div>";
});
$(".tbody").html(res);

有没有更有效的方式将数据加载到表中？

Answer 1

加载时给浏览器一些喘息空间。

var nextRow = 0;
var handler;


//Process a row in every 250ms
var handler = setInterval(function() {

   //Select next row
   var row =arr[nextRow];

   var res= "<div class='tr' idattachment='" + row["IdAttachment"] + "' >" +
            "<div class='td colTitle'>" + row["Title"] + "</div>" +
            "<div class='td colLink'>" + row["Name"] + "</div>" +
            "<div class='td colSize'>" + (row["Size"] / (1024 * 1024)).toFixed(2) + "</div>" +
            "<div class='td colUploadDate'>" + row["UploadDate"] + "</div>" +
            "<div class='td colOpen'><a class='link' href='uploads/" + row["Name"] + "'>Open</a></div>" +
            "</div>";

   //Append
   $(".tbody").appendChild(res);

   //Move on
   nextRow++;

   //Exit at the end
   if (arr.length === nextRow)
      clearInterval(handler);

}, 250);

这将不断将您的数据添加到表中，直到最后。

另请记住，字符串连接的成本很高。您甚至可以尝试appendChild没有间隔的方法。