jquery - 如何优化将大量元素动态添加到网页中
问题描述
我需要从我的数据库中检索许多记录并将它们展示给用户。我使用 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;
}
如果您能帮助我优化此过程,我们将不胜感激。
解决方案
@Bhenam: $(".tbody").html() 内部使用需要重建 DOM 的 innerHTML,但使用 append() jquery 方法将内容添加到该节点中子节点的末尾。
你可以试试下面的代码。
success: function (response) {
$(".tbody").html('');
$(".tbody").append(response.d);
callback();
}
所有浏览器都支持。 https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
推荐阅读
- javascript - 如何使用 date-fns 将数字字符串转换为时间?
- typescript - 使用有区别的联合避免代码重复
- macos - RuntimeError:JupyterLab 构建失败
- swift - 更新到最新 iOS 15 测试版后出现灰屏,Xcode 警告 _disableAlpha
- jenkins - 詹金斯 - 从第一阶段保持流程直到管道结束
- reactjs - db.collection("users").onSnapshot 不会在 forEach 中循环,我正在尝试检索所有用户并列出他们的所有文档和集合
- sql - 从存储过程中删除参数
- flutter - 如何在 Flutter 中访问 Document Snapshot 中的数据
- javascript - 如何将字符串数组的元素连接成由空格连接到一定长度的较大字符串
- app-store-connect - 我可以通过自己的帐户发布为客户构建的应用程序吗?