innerHTML와 html 작성 속도

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

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

 

 

이렇게 있었다.

 

아래 링크 가보면 총 4가지 방법(날 string 방법 포함한)에 대한 설명과 예제소스 속도 비교 페이지를 제공한다.

http://www.dengodekode.dk/artikler/DOM/no_innerhtml.php

테스트 해보니 여러 브라우저에서 사용하기 위해서 Array.join("") 이 제일 빠른듯 하다

[출처] innerHTML로 html 작성 속도|작성자 루든