javascript - 创建 DOM 表行然后插入以提高效率

Question

我正在尝试将一些工作程序从 excel 转换为 HTA，这样我就可以利用浏览器 GUI 和 javascript 与 VBA 相比的速度。不过，我的第一个测试是在我的 HTML 中附加一个表格。但是，执行大约 1000 行似乎需要大约 30 秒，考虑到它会导致我的 HTA 浏览器窗口在 30 秒内没有响应，这似乎很长。从我对这里的研究来看，我似乎需要创建行，然后一次附加所有表，以减少回流到 DOM 的数量。我很难做到这一点。这是我到目前为止的代码:

function myFunction() {
var today = new Date();
var t0 =  today.getSeconds();
var connection = new ActiveXObject("ADODB.Connection") ;
var table = document.getElementById("myTable");

var connectionstring="Provider=Microsoft.ACE.OLEDB.12.0;Data Source=dbPATH\\test.accdb;Jet OLEDB:Engine Type=5;Persist Security Info=False;Mode=Share Exclusive;"

connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");

rs.Open("SELECT * FROM TABLE1", connection);
rs.MoveFirst

while(!rs.eof)
{
    var row = table.insertRow(1);

    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = rs.fields(1);
    cell2.innerHTML = rs.fields(2);
    cell3.innerHTML = rs.fields(3);
    rs.movenext;
}

rs.close;
connection.close; 
var today2 = new Date();
var t1 =  today2.getSeconds();
alert(t1-t0);
}

*编辑:我想我会尝试更新我的代码，现在只附加一次 DOM，但我的代码仍然需要很长时间才能响应，但我认为它好一点。我知道这不可能是无所事事的循环，因为如果我只是循环而不尝试向屏幕写入任何内容，程序将在不到一秒的时间内完成创建 htmlSTR 变量。所以它的 .after 太慢了。

function myFunction() {
var today = new Date();
var t0 =  today.getSeconds();
var connection = new ActiveXObject("ADODB.Connection") ;
var table = document.getElementById("myTable");
var htmlSTR;
var connectionstring="Provider=Microsoft.ACE.OLEDB.12.0;Data Source=dbPATH\\test.accdb;Jet OLEDB:Engine Type=5;Persist Security Info=False;Mode=Share Exclusive;"

connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");

rs.Open("SELECT * FROM TABLE1", connection);
rs.MoveFirst

while(!rs.eof)
{
htmlSTR = htmlSTR + '<tr><td>' + rs.fields(1) + '</td>'
    + '<td>' + rs.fields(2) + '</td>'
    + '<td>' + rs.fields(3) + '</td></tr>'
rs.movenext;
}

$('#myTable tr:last').after(htmlSTR);


rs.close;
connection.close; 
var today2 = new Date();
var t1 =  today2.getSeconds();
alert(t1-t0);
}

Answer 1

据我了解，实际问题可能是查询而不是 DOM 操作。

另一种优雅的解决方案是使用 GetString这将完全消除 while 循环；

recordset.GetString(,,"</td><td>","</td></tr><tr><td>","&nbsp;");