When innerHTML isn't Fast Enough

http://blog.stevenlevithan.com/archives/faster-than-innerhtml

 

1. /* This is much faster than using (el.innerHTML = value) when there are many
   existing descendants, because in some browsers, innerHTML spends much longer
   removing existing elements than it does creating new ones. */
   function replaceHtml(el, html) {
   var oldEl = (typeof el === "string" ? document.getElementById(el) : el);
   /*@cc_on // Pure innerHTML is slightly faster in IE
   oldEl.innerHTML = html;
   return oldEl;
   @*/
   var newEl = oldEl.cloneNode(false);
   newEl.innerHTML = html;
   oldEl.parentNode.replaceChild(newEl, oldEl);
   /* Since we just removed the old element from the DOM, return a reference
   to the new element, which can be used to restore variable references. */
   return newEl;
   };

innerHTML이 createElement/appendChild조합보다 빠르다는 것은 많이 알려진 사실인데... 그것보다 더 빠른 방법이 있다고 하는데...
원 출처에서는 장황하게 설명하고 있지만, 핵심은 cloneNode를 통해서 기존의 노드를 document로부터 detach한 상태에서 innerHTML에 접근한 덕분에 성능이 향상되는 것으로 보인다.

이 글은 스프링노트에서 작성되었습니다.