RegexPal에서는 모든 키다운 이벤트에 문자열 강조를 위한 수전개의 엘리먼트 파괴와 창조 트리거들을 잠제적으로 가지고 있다. 이런 경우 el.innerHTML += str 또는 el.innerHTML = ""만을 가지고는 수천개의 자식 엘리먼트에 접근하여 업데이트하는 과정의 성능을 끌어올리지 못한다. 그래서 아래와같은 replaceHtml 함수를 개발했고 innerHTML과 비교한 성능 측정 페이지를 만들었다. el.innerHTML = newHtml 은 el = replaceHtml(el, newHtml) 처럼 사용할 수 있다.
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;
};파이어폭스 2.0.0.6에서 태스트한 결과 다음처럼 성능이 향상된 결과를 얻을 수 있었다.
엘리먼트의 수가 많을 수록 속도가 더욱 개선 되는 것을 알 수 있다. 사파리 브라우저의 성능향상률이 가장 좋았으며, 오페라 브라우저는 근소한 차이로 innerHTML 보다는 replaceHtml이 더 빠른 결과를 보여주었다. 특이하게도 오페라 9.23과 IE계열 브라우저에서는 다른 브라우저들과 다르게 더 느린 현상이 나타났다. 그럼에도 불구하고 이 함수를 사용하는 이유는 IE는 전형적으로 innerHTML의 처리가 타 브라우저에 비해 월등히 빠르기 때문에 1.1x 느린 정도의 페널티로 여러 브라우저에서 성능향상을 기대 할 수 있기 때문이다.
주. Prototype에 대응하여 아래처럼 Element 클래스에 등록해 사용하면 $(el).replaceHTML(newHTML)과 같은 형식으로 사용할 수 있다.
Element.addMethods({
replaceHTML: function(element, html) {
var oldEl = element;
/*@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;
}
});