Javascript Chrome中的子性能问题

我在chrome中遇到了一个速度问题，javascript中有一个子行。这在firefox和chrome中似乎运行良好，但chrome的运行速度却非常慢。我只想在点击按钮时添加一个元素。这个页面已经有超过10000个元素，但我不确定这是否是问题的一部分

只是回顾一下我看过的东西。我查找了documentfragment，并尝试实现它，但得到了相同的结果。据我所知，documentfragment通常会在向dom中添加大量元素（而不仅仅是一个）时提高性能。（如果我在这个假设上错了，请随时纠正我）。我还在Chrome中运行了时间线，发现“布局”需要11.91秒才能加载，似乎卡在了子行上。我已经在下面评论了这句话

正如我前面提到的，我尝试了documentfragment，但并没有任何改进，所以这是我的原始代码

function addYr() { 
         divArray = document.getElementById('acct_sect').getElementsByTagName("div");
         divRow = document.createElement("div");
         divRow.id = "acct_row_" + (divArray.length);

         var yr  = document.createElement("input");
         yr.type= "text";
         yr.id= "yr_" + divArray.length;
         yr.name= "yr_" + divArray.length;
         yr.setAttribute("onkeydown", "TabNext(this,'down',2); return justNums(event);");
         yr.setAttribute("onkeyup", "TabNext(this,'up',2,this.form.fnd_)");
         yr.maxLength = 2;   
         yr.className = "c1";
         yr.setAttribute("onchange", "buildAccountMultiRow(this)");
         yr.value = "";

         divRow.appendChild(yr);


    //line that is taking a while
    document.getElementById('acct_sect').appendChild(divRow);
}

---

大量的元素可能是罪魁祸首，但这里有一些东西可以尝试：

• getElementsByTagName

  返回一个实时列表，该列表必须在每次更改时更新。相反，请尝试以下方法：

  divArray = document.getElementById('acct_sect').children;
  

• 如果没有将

  id

  属性用于任何内容，请删除该属性

• 如果可以重新排列服务器上的某些代码，请尝试：

  yr.name = "yr[]";
  

  然后在服务器上（例如在PHP中）

  $\u POST['yr']

  作为包含值的数组

• 如果您可以同时执行上述两项，那么您将发现您甚至不再需要

  divArray

  ，并且可以完全摆脱它，这将节省大量时间
• 尝试改变处理事件的方式。不要为每个元素分配三个事件处理程序，而是为容器分配一个事件处理程序

  var ac = document.getElementById('acct_sect');
  ac.onkeydown = function(e) {
      e = e || window.event;
      var t = e.srcElement || e.target;
      if( t.nodeName == "INPUT") {
          tabNext(t,'down',2);
          return justNums(e);
      }
  };
  ac.onkeyup = function(e) {
      e = e || window.event;
      var t = e.srcElement || e.target;
      if( t.nodeName == "INPUT") {
          tabNext(t,'up',2,t.form.fnd_);
      }
  };
  ac.onchange = function(e) {
      e = e || window.event;
      var t = e.srcElement || e.target;
      if( t.nodeName == "INPUT") {
          buildAccountMultiRow(t);
      }
  };
  

---

如果不将事件处理程序设置为字符串属性（必须求值），而将其设置为标准函数（即

yr.onkeydown=function（）{…

），可能会快得多对所有元素使用相同的函数会更好。@Dysoy，谢谢你的评论。我会试试这个。这可能只是我愚蠢的阅读理解，但你说“对所有元素使用相同的函数”是什么意思。我的意思是您的字符串是相同的。因此，只需在循环之外定义一个函数

function myFunction（）{TabNext（this，'down'，2）；返回justNums（event）}

并在追加时执行

yr.onkeydown=myFunction

。是否在循环中添加新行？