javascript 성능 향상 코딩

1. String concatenation을 최소화한다
- 사용 시 StringBuffer를 사용함
- 바람직한 사용 예

(div id="div1")들어갈내용
(/div)
(script)
function StringBuffer() {
 this.buffer = [];
} 
StringBuffer.prototype.append = function append(string) {   
 this.buffer.push(string);
 return this;
};
StringBuffer.prototype.toString = function toString() {
 return this.buffer.join(""); 
}; 
var buf = new StringBuffer();
buf.append("hello");
buf.append("world");
var div1 = document.getElementById("div1");
div1.innerText = buf.toString();
(/script)


2. Cache Variables
 - 일반적인 사용 예

function BuildUI() {
   var baseElement = document.getElementById("target");
   baseElement.innerHTML = "";
   baseElement.innerHTML += BuildTitle();
   baseElement.innerHTML += BuildBody();
   baseElement.innerHTML += BuildFooter();
}

위의 예는 innerHTML 수행이 반복되고 많은 temporary 변수들을 임의적으로 생성되어 성능에 안좋다.

 - 바람직한 사용 예 

 function BuildUI() {
    var elementText = BuildTitle() + BuildBody() + BuildFooter();
    document.getElementById("target").innerHTML = elementText;
}



 3. defer 속성 사용하기

script 태그에는 src, defer, charset 과 같은 속성을 지정할 수 있다. charset 속성에는 스크립트의 문자 인코딩 방식을 설정하며, 문서(웹페이지)의 인코딩 방식과 같다면 굳이 따로 지정할 필요가 없다.

여기서 defer 라는 속성을 아주 유용하게 사용할 수 있다. defer 속성값을 'defer' 로 지정하면, 브라우저에게 스크립트가 문서 컨텐츠를 생성하지 않는다는 것을 명시해준다. 이에 따라, 브라우저는 웹페이지의 나머지 부분을 우선적으로 처리해 화면에 표시하는 것을 끝내고 난 후, 스크립트를 처리한다.

<script type="text/javascript" defer="defer">
... defer 속성을 지정함으로써 화면 표시와는 관련이 없다는 것을 브라우저에게 알려준다.
</script>

이러한 방법을 사용하면,, 자바스크립트 코드의 분량이 많거나 자바스크립트 라이브러리를 사용하는 경우에는 페이지를 로드할 때 상당한 속도 향상 효과를 볼 수 있다.

4. script는 body~/body 요소의 닫기 태그 바로 위에 적습니다

웹 브라우저는 HTML/CSS/Javascript 구문을 해석(Parsing)할 때 하나의 파일을 모두 해석한 다음 한꺼번에 화면에 출력하지 않고 한줄 한줄씩 해석해내는대로 화면에 출력해 냅니다.

따라서 문서 <head></head>에 포함된 (script)문을 모두 해석한 다음 본문에 해당하는 <body></body>영역을 출력하게 되죠. 이때 (script)문을 해석하는 시간이 오래 걸린다면 어떻게 될까요?

웹 브라우저 화면과 사용자의 얼굴은 하얗게 질려 있겠죠. 때문에 Steve Souder는 말했습니다. ‘Put Scripts at the Bottom‘  스크립트는 바닥에 넣으라고 말이죠.

Script Top vs. Bottom 이라는 페이지를 확인해 보세요. 어느쪽이 빨리 뜨는지. 단, (script) 요소는 반드시 <body></head>또는 <body>~</body>영역 바깥쪽에 (script)를 넣으면

문법적으로 유효하지 않기 때문에 HTML Validation 오류를 만나시게 됩니다.

신고

'javascript' 카테고리의 다른 글

팝업 리사이징  (0) 2011.02.09
Javascript 특수문자 제거 Form submit  (1) 2010.11.04
익스프롤러 버전 체크  (0) 2010.10.29
SSL 적용시 페이지 리다이렉트  (0) 2010.10.29
table안에 td를 노드로 접근  (0) 2010.10.29
javascript 성능 향상 코딩  (0) 2010.10.28
by 화니뿡뿡 2010.10.28 16:50