크롬에 appendChild 성능 문제가 발생했습니다.

Question

javascript에 appendchild 행이있는 Chrome에서 속도 문제가 있습니다. 이것은 파이어 폭스와 크롬에서 잘 돌아가고있는 것처럼 보이지만 크롬은 매우 느리지 않습니다. 버튼 클릭에 하나의 요소 만 추가하려고합니다. 페이지에는 이미 10,000 개가 넘는 요소가 있지만 문제의 일부인지 확실하지 않습니다.

내가 살펴 봤던 것들을 그냥 지나치는 것. 나는 documentfragment를 찾아보고 구현하려고 시도했지만 동일한 결과를 얻고있었습니다. 그리고 내가 모은 것에서 documentfragment는 대개 DOM에 많은 요소를 추가 할 때 성능을 향상시킵니다. (이 가정에 내가 틀렸다면 나를 바로 잡으십시오.) 또한 Chrome에서 타임 라인을 실행하여 '레이아웃'이 11.91 초를로드하고 appendchild 행에 걸려있는 것으로 나타났습니다. 나는 그 문제의 라인을 다음과 같이 주석 처리했다.

이전에 언급했듯이 개선이없는 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); 
} 

Answer 1

요소의 많은 수의 비난 가능성이 높습니다 만, 여기에 시도하는 뭔가 :

• getElementsByTagName 그것을 변경 때마다 업데이트해야합니다 라이브 목록을 반환합니다. 대신,이 시도 : 당신은 아무것도에 대한 id 속성을 사용하지 않는 경우, 그것을 제거

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

• . 서버에 일부 코드를 다시 정렬 할 수 있습니다 경우

• , 시도 :

  yr.name = "yr[]"; 
  

  그런 다음 서버에서이 값을 포함하는 배열로 $_POST['yr'] (PHP에서 예를 들어)를 얻을 것이다.

• 위의 두 항목을 모두 수행 할 수 있다면 더 이상 divArray이 필요하지 않으며 그만큼 완전히 제거 될 수 있으므로 많은 시간을 절약 할 수 있습니다.

• 이벤트 처리 방법을 변경하십시오. 모든 단일 요소에 세 개의 이벤트 처리기를 할당하는 대신 컨테이너에 단일 처리기를 할당하십시오. 당신이 이벤트 (evalled해야 함) 문자열 속성과 핸들러하지만 같은 표준 기능 (예 :`yr.onkeydown = 함수() {설정하지 않은 경우

  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); 
      } 
  };