Rev. 2.73

lazierload.gif

lazierLoad는 보다 빠른 웹페이지 로딩을 위해 만들어진 자바스크립트 라이브러리이다. 웹페이지의 HTML이 완성되는 시점에 이벤트(oncontentloaded)가 발생하고 현재 스크롤 위치와 창크기를 분석하여 방문객이 실제로 보고 있는 영역에 속한 이미지만을 로드하여 마치 브라우저의 페이지 읽기 속도가 향상된 것처럼 속이는 기발한 이미지 로더이다. 위아래로 긴 페이지에 이미지가 즐비하거나, 사진 위주의 블로그에는 더없이 좋은 솔루션이다. 더불어 미스클릭 또는 엉뚱한 검색으로 연결된 타게팅 되지 않은 방문객들(스크롤 하지않고 바로 떠나는)에게 이미지 트래픽을 더이상 낭비하지 않아도 된다.(잘못된 내용입니다.)

화면에 표시되지 않은 나머지 이미지들은 로딩 인디케이터(Indicator)와 blink 이미지로 대체되며, 스크롤이 해당영역으로 이동했을 때 원본 이미지를 로드하고 할당된 이벤트를 파괴한다. lazierLoad는 Prototype기반 사이트에서 자바스크립트 파일을 추가하는 것 만으로 손쉽게 적용할 수 있다.

<script type="text/javascript" src="js/bramus/lazierLoad.js"></script>

Comments

Steven Levithan씨는 자신의 블로그에 흥미로운 내용의 글을 작성했다. "이 포스트는 innerHTML vs. W3C DOM 메서드들의 찬반양론에 관한 것이 아니다."로 시작하는 범상치 않은 이 포스트는 innerHTML의 성능을 끌어올리는 방법을 소개한다. 몇몇 브라우저(주목할 만한 녀석은 파이어폭스)에서는 일반적으로 DOM 메서드를 사용하는 것 보다는 innerHTML이 훨씬 빠르다는 사실을 우리는 잘 알고 있다. RegexPal 을 개발하면서 주된 성능 최적화 작업을 통해 이 사실을 알아냈다. RegexPal은 자바스크립트를 이용하여 문자열을 정규식으로 비교하고 동일한 문자열을 강조하는 테스트 사이트이다.

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에서 태스트한 결과 다음처럼 성능이 향상된 결과를 얻을 수 있었다.

1000 elements...
innerHTML (destroy only): 156ms
innerHTML (create only): 15ms
innerHTML (destroy & create): 172ms
replaceHtml (destroy only): 0ms (faster)
replaceHtml (create only): 15ms (~ same speed)
replaceHtml (destroy & create): 15ms (11.5x faster)

15000 elements...
innerHTML (destroy only): 14703ms
innerHTML (create only): 250ms
innerHTML (destroy & create): 14922ms
replaceHtml (destroy only): 31ms (474.3x faster)
replaceHtml (create only): 250ms (~ same speed)
replaceHtml (destroy & create): 297ms (50.2x faster)

엘리먼트의 수가 많을 수록 속도가 더욱 개선 되는 것을 알 수 있다. 사파리 브라우저의 성능향상률이 가장 좋았으며, 오페라 브라우저는 근소한 차이로 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;
  }
});

Comments

JPU.gif

Andrea Giammarchi씨는 단일 스래딩 자바스크립트의 CPU 사용량을 자바스크립트로 측정하고 모니터하는 JPU - JavaScript CPU Monitor를 만들고 실험했다. 북마크릿의 형태를 띠고있는 JPU는 브라우저 화면 우측 상단에 상주하여 현재 페이지가 소요하는 사용량을 그래프로 디스플레이한다. Andrea Giammarchi씨는 단순히 재미를 위해서 만든 것을 기억해달라고 했다. 만약 JPU를 당신의 사이트에 추가하고자 한다면 다음처럼 하면된다.

<script type="text/javascript" src="http://www.3site.eu/JPU/JPU.js">
<!--//
 JPU - by WebReflection
//-->
</script>

JPU에서 반환하는 결과를 이벤트화 해서 재미있는 위젯을 만들수도 있겠다.

Comments