[jquery] 동적으로 html table(테이블) 생성 속도

결론 :  Array에 문자열을 넣어 innerHTML 에서 Array.join("") 하여 출력하는 걸로 구현하였음

 

 

 

AJAX나 Javascript를 쓰다보면 innerHTML을 쓸일이 꼭 생긴다.

몇 줄 안되는 html 같은 경우 innerHTML로 넣으면 그럭저럭 빠르다. 티도 안나니  굳이 속도도 따질 필요도 없다. 

하지만

------------------------------------

<p><strong>TEST</strong></p>
<div>TEST<span>TEST</span>TEST</div>
<em>TEST</em>

------------------------------------

 

이런게 1000개 2000개 이렇게 innerHTML로 만든다면 속도를 생각 안할수 없다.

한번 직접 innerHTML로 만들어 보면 속도 부분의 이슈가 꼭 생길것이다..

 

innerHTML로 html 을 넣는다면 대부분 이렇게 넣는다.

 

------------------------------------

var sHTML = "";

for(var i=0;i<1000;i++)

{

    sHTML += "<p><strong>TEST</strong></p>"
               + "<div>TEST<span>TEST</span>TEST</div>"

               + "<em>TEST</em>";

}

document.getElementById("target").innerHTML = sHTML;

------------------------------------

<div id="target"></div>

------------------------------------

 

만들어보면 알겠지만.. 엄청 느리다..

 

 

 

다른 방법이 없는가 찾다가 3가지 방법을 찾아냈다. (document.write()는 제외함)

 

1. Array에 문자열을 넣어 innerHTML 에서 Array.join("") 하여 출력하는것

------------------------------------

var aHTML = [];

for(var i=0;i<1000;i++)

{

    aHTML.push("<p><strong>TEST</strong></p><div>TEST<span>TEST</span>TEST</div><em>TEST</em>");

}

document.getElementById("target").innerHTML = aHTML.join("");

------------------------------------

 

 

2. DOM을 가지고 document.createElement() 하여 appendChild() 하는것

------------------------------------

var oParent = document.getElementById("target");
var oClone = oParent.cloneNode(false);
for (var i=0; i<1000; i++) {
 // 엘리멘트 만들고 텍스트룰 붙혀 넣고 oClone의 자식으로 추가 시킴
}
oParent.parentNode.replaceChild(oClone, oParent);

------------------------------------

 

 

3. DOM을 가지고 document.createDocumentFragment()로 만드는것

------------------------------------

var oParent = document.getElementById("target");
var oClone = oParent.cloneNode(false);
var oTemplate = document.createDocumentFragment();
/*
HTML구조를 엘리멘트형태로 생성하고 삽입한다
만든 구조를 현재 아이템인 oTemplate에 추가한다
*/
var oTmp = null;
for (var i=0; i<1000; i++) {
    oTmp = oTemplate.cloneNode(true);
    // oTemplate 안에 텍스트 노드를 삽입함
    oClone.appendChild(oTmp);
}
oParent.parentNode.replaceChild(oClone, oParent);

------------------------------------

 

 

감사합니다.

출처 : m.blog.naver.com/PostView.nhn?blogId=loudon23&logNo=30061435593&proxyReferer=https:%2F%2Fwww.google.com%2F