Javascript 如何加快html元素的更新？

我目前使用以下代码-

jQuery(window).on('load', function() {
  // read list of items from the table
  ...
  // getting data the DB
  var connectionstring="Data Source=datasource;Initial Catalog=catalog;User 
  ID=userid;Password=pass;Provider=SQLOLEDB";

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

  rs.Open("select top 10 from db where id in myitems_list")

... 
// display the result
for (currentRow = 1; currentRow < myitems_list.length + 1; currentRow++) { 
    rs.MoveFirst;
    while(!rs.eof)
        if (jQuery(jQuery(".mytable")[1].rows[currentRow].cells[0]).text().trim()==rs.fields(0)) {
jQuery(jQuery(".mytable")[1].rows[currentRow].cells[1]).html(rs.fields(1));
        ...
    }
});

jQuery（窗口）.on（'load'，function（））{
//从表中读取项目列表
...
//从数据库中获取数据
var connectionstring=“数据源=数据源；初始目录=目录；用户
ID=userid；Password=pass；Provider=SQLOLEDB”；
连接。打开（连接字符串）；
var rs=新的ActiveXObject（“ADODB.Recordset”）；
rs.Open（“从数据库中选择前10名，其中我的项目列表中的id”）
... 
//显示结果
对于（currentRow=1；currentRow

在这里，我做以下工作：

从表的第一列读取项目列表（有ID）

对于表中找到的每个项目，从数据库中获取数据

使用从数据库接收的数据更新表（项目的初始顺序应保持不变）

更新表需要几分钟的时间。 如何加快表更新过程？

---

或者，我可能应该将其移动到单独的线程？

我不确定此模式的名称，但您有两个已排序的数据集，并且希望有效地更新其中一个。您可以使用一种算法，在每个列表中循环一次

对两个列表进行相同的排序，并为每个列表创建一个计数器变量。 将a1的第i个元素与a2的第j个元素进行比较。如果相等，则从a2更新a1，并增加i和j。如果小于，则增加i。否则增加j

var a1 = [sorted array];
var a2 = [similarly sorted array];

var i=0, j=0;

while (i < a1.length && j < a2.length) {
  if (a1[i] == a2[j]) {
    // update a1[i]
    i++;
    j++;
  } else if (a1[i] < a2[j]) {
    i++;
  } else {
    j++;
  }
}

var a1=[sorted array]；
var a2=[类似排序的数组]；
var i=0，j=0；
而（i

问题在于

rs

对象上的循环

当我把代码改成

// display the result
rs.MoveFirst;
while(!rs.eof) {
    for (currentRow = 1; currentRow < myitems_list.length + 1; currentRow++) { 
        if (jQuery(jQuery(".mytable")[1].rows[currentRow].cells[0]).text().trim()==rs.fields(0)) {
jQuery(jQuery(".mytable")[1].rows[currentRow].cells[1]).html(rs.fields(1));
        ...
        break;
    }
});

//显示结果
首先是卢布；
而（！rs.eof）{
对于（currentRow=1；currentRow

---

它开始快速工作。

一种不需要排序的技术。从现有内容构建一个哈希表，将id映射到html元素，然后使用哈希表

var ht = {};

for (currentRow = 1; currentRow < myitems_list.length + 1; currentRow++) {
        ht[jQuery(".mytable")[1].rows[currentRow].cells[0]).text().trim()] = jQuery(".mytable")[1].rows[currentRow].cells[1];
    }

rs.MoveFirst;
while(!rs.eof) {
  if(ht[rs.fields(0)]) {
    jQuery(ht[rs.fields(0)]).html(rs.fields(1));
  }
  rs.MoveNext();
}

var-ht={}；
对于（currentRow=1；currentRow

什么是“rs”？为什么在（！rs.eof）时有此语句？假设瓶颈不是很慢的AJAX，可能值得为此使用React.js之类的东西，因为它使用的虚拟DOM将比使用jQuery更新要快得多。@karthick，我已经更新了问题中的代码。但这在这里并不重要。对于表中的每一行，您都会循环整个记录集以查找匹配项？是的，这是正确的听起来既昂贵又缓慢。听起来您的算法可以在Javascript中查找瓶颈之前进行改进。还可以尝试将

jQuery（“.mytable”）[1]存储在循环外部的行

，这样就不会在每次迭代中执行DOM遍历和查找。谢谢，James。我不确定如何对记录集进行排序（这是SQL数据库查询的结果），我无法更改表值的排序顺序（

jQuery（.mytable”）[1]

）-顺序在这里很重要。