如何优化向网页动态添加大量元素

Question

我需要从数据库中检索许多记录并将它们显示给用户。我使用ajax进行此操作，并将应添加到页面的所有内容存储在单个字符串中。目前，我在加载时间上有问题（每100条记录1秒）。例如，加载1000行需要10秒，而查询本身可以在不到1秒的时间内完全执行。这意味着瓶颈正在创建元素并将其添加到网页中。

//client side code    
$(document).ready(function () {
    loadGrid(function () {
    $(".rowCount").val($(".tbody .tr:visible").length);
});

function loadGrid(callback) {
    $.ajax({
        type: "POST", url: "Ledger.aspx/LoadGrid",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            $(".tbody").html(response.d);   //response.d = '<div class='tr'> <div class='td colIdVchItm'>1</div>...</div>'
            callback();
        },
        failure: function (response) {
            ShowMessage(response.d);
        }
    });
}

---

//server side code
[WebMethod]
    public static string LoadGrid()
    {
        string q = @"select cast((select 'tr' as [@class],  
'td colIdVchItm' as [div/@class] , a.IdVchItm as [div], ' ',
'td colNo' as [div/@class] , a.No as [div], ' ',
'td colRef' as [div/@class] ,a.Ref as [div], ' ',
'td colSeq' as [div/@class] ,a.Seq as [div], ' ',
'td colDescr' as [div/@class] ,a.Descr as [div], ' ',
'td colDebit' as [div/@class] , cast(a.Debit as decimal(38,0)) as [div], ' ',
'td colCredit' as [div/@class] , cast(a.Credit as decimal(38,0)) as [div], ' ',
'td colBalance' as [div/@class] ,null as [div] , ' ',
'td colCur' as [div/@class] ,b.Title as [div], ' ',
'td colCurVal' as [div/@class] ,a.CurVal as [div], ' ',
'td colEffDate' as [div/@class] ,dbo.ShamsiDate(a.EffectiveDate) as [div] , ' '
from a inner join Currency as b on a.IdCur = b.IdCur order by a.vchdate, a.no
for xml path('div')) as nvarchar(max))";
        // this query returns every records as an html text. for example: 
        // <div class='tr'> <div class='td colIdVchItm'>1</div>...
        string res = "";
        SqlConnection con = new SqlConnection(DAL.conStr);
        SqlCommand com = new SqlCommand(q, con);
        con.Open();
        SqlDataReader rd = com.ExecuteReader();
        rd.Read();
        res = rd[0].ToString();
        con.Close();
        return res;
    }

如果您能帮助我优化此过程，将不胜感激。

Answer 1

@Bhenam： $(".tbody").html() 内部使用innerHTML，这需要重建DOM，但使用append() jquery方法将内容添加到该节点中子节点的末尾。

你可以尝试使用下面的代码吗？

 success: function (response) {
            $(".tbody").html('');
             $(".tbody").append(response.d);

            callback();
        }

所有浏览器都支持。 https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild