오늘 정신이 번쩍띄는 글을 확인했습니다. ^^ :--)
그동안 손쉽게 사용하던 script 들이 얼마나 브라우져의 화면 랜더링(구성)에 악영향을 미칠 수 있는지를
확인 했습니다.
조금 관심 있으신분들은 아래의 URL 로 들어 가셔서 slide를 보시길 강 추 해 드립니다.
(pdf로도 다운로드 가능하군요.... 참 고마운 slideshare 입니다.. thanks alot !)
특히 slide 후반으로 가시면 re-flow 와 re-paint 부분이 나오는데, 가슴이 먹먹해 지는 깨닭음을 느낄 수 있었습니다.
보통 each 나 for loop 안에서 $.append 나 .prepend 또는 html(''), text('') 등을 사용하지 맙시다...
루프에 동일한 re-flow 가 일어 납니다...
루프 안에서 string buffer 로 변수로 받아 낸후 루프 밖에서 한방에 처리 해야 됩니다....
그리고 script는 바닥에 두기, js include 는 시리얼하게 하기 등등 .. 사소하지만 성능에 영향을 주는 요소 이군요...
그리고 비동기 js loading 도 중요하게 다루고 있는데, 아래의 코드를 좀 보시면 도움이 될겁니다. (위 링크의 slide 에 있는 소스도 요긴 합니다)
function loadScript(url, callback) {
var f = arguments.callee;
if (!("queue" in f))
f.queue = {};
var queue = f.queue;
if (url in queue) { // script is already in the document
if (callback) {
if (queue[url]) // still loading
queue[url].push(callback);
else // loaded
callback();
}
return;
}
queue[url] = callback ? [callback] : [];
var script = document.createElement("script");
script.type = "text/javascript";
script.onload = script.onreadystatechange = function() {
if (script.readyState && script.readyState != "loaded" && script.readyState != "complete")
return;
script.onreadystatechange = script.onload = null;
while (queue[url].length)
queue[url].shift()();
queue[url] = null;
};
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
사실페이지 로깅에 관계가 없는 후반 작업에 필요한 script라면 dynamic 로딩을 이용하면 엄청 이득이 많을 듯 합니다.
이글은 계속 수정하여 추가 하겠습니다.. (지금 업무 중이라서.. 긴 포스트가 어렵군요)