1. Ajax 의 성능 제대로 이해하기.
개발자들은 브라우저가 응용프로그램을 위한 플랫폼이 아니라 Script 언어와 Dom 을 사용하는 간단한 Form 으로 구성된 응용프로그램을 만드는데 사용하도록 고안되어져 있다는 것을 인지해야 한다. 웹 사이트의 응답시간을 줄이기 위해서 Ajax 를 사용하기도 하는데 흔하게 하는 실수가 응용프로그램의 모든 데이터를 브라우저로 내려 보내는 것이다. Ajax 와 Javascript, Dom 을 사용하면서 Javascript 가 bottleneck 이라고들 하지만 일반적으로 성능 저하의 원인은 Dom 에 있다. 브라우저가 Javascript 를 실행하는데 들이는 시간은 대체로 적다. 대부분의 시간은 Dom 과 관련된 곳에서 소비된다. Ajax 는 페이지를 갱신하는 데 매우 효과적이지만 브라우저와 서버 간의 올바른균형을 이루어 내도록 해야 합니다.
2. 빠른 웹 응용프로그램 만들기.
웹페이지가 충분한 성능을 내지 못할 경우 프로파일러를 사용해 지연 시간을 측정하거나 수동으로 측정하기도 합니다. 만약 충분한 성능을 내지 못하는 부분을 찾았다면 이를 최적화 해야 하는데요. 전통적인 해결방벙으로 멀티스레드를 사용합니다. 하지만 현재 Javascript 에는 스레드가 없으며 이러한 제약에 변경도 없을 것입니다. 이런 단점을 극복하기 위해 Web Worker API, Web Worker API 를 지원하지 않는 브라우저는 구글의 Gears 를 사용하기도 합니다. XMLHttpRequest 의 비동기 모드 또한 Web Worker API 를 사용하는 것과 비슷하며 주의할 점은 XMLHttpRequest 의 동기 모드는 사용하지 않는 것이 좋습니다.
Javascript 의 빠른 화면 렌더링도 중요하지만 메모리 사용 또한 이에 못지 않게 중요합니다. Javascript 런타임들은 GC(garbage collection)을 구현하고 있지만 이로 인해 브라우저가 주기적으로 얼어버릴 수 있습니다. 현재로서는 메모리에서 더 이상 사용되지 않은 Javascript 객체를 delete 키워드를 사용하여 해제하는 것과 DOM 에서 더 이상 필요하지 않는 노드들을 부모 노드로 removeChild() 를 호출하는 방법을 추천합니다.
3. 초반 다운로드를 분산시키기.
Javascript 를 다운 받을 때 blocking 되니 코드를 쪼개서 다운받을 수 있도록 하며 MS 연구소에서 개발한 Doloto를 참고 하고 쪼개는데 있어서 undefined symbol(다른 함수나 변수를 참조하는 symbol) 이 없어야 할 것입니다.
CSS 또한 Javascript 처럼 쪼개서 다운될 수 있도록 하는데 Javascript 처럼 blocking 현상은 없지만 Javascript 를 쪼갰을 때만큼 얻는 이득은 덜합니다.
4. 블로킹 없이 스크립트 로드하기.
대부분의 브라우저들은 여러 script 들을 동시에 다운 받을 수 없었으나 최근에는 동시에 다운로드를 할 수 있게 되었습니다.(몇몇을 빼고) 그러나 script 는 동시에 다운로드 하지만 그 후에 오는리소스들은 여전히 blocking 됩니다.
ex) http://stevesouders.com/cuzillion/?ex=10008&title=Scripts+Block+Downloads
그래서 blocking 을 피하기 위한 몇 가지 방법들이 있으며 다음과 같습니다.
- XHR Eval
- http://stevesouders.com/cuzillion/?ex=10009&title=Load+Scripts+using+XHR+Eval
- XHR Injection
- http://stevesouders.com/cuzillion/?ex=10015&title=XHR+Injection
- Iframe 에 스크립트 넣기.
- http://stevesouders.com/cuzillion/?ex=10012&title=Script+in+Iframe
- Script DOM Element
- http://stevesouders.com/cuzillion/?ex=10010&title=Script+Dom+Elements
- Script Defer
- http://stevesouders.com/cuzillion/?ex=10013&title=Script+Defer
- document.write Tag
- http://stevesouders.com/cuzillion/?ex=10014&title=document.write+Script+Tag
위의 방법들로 blocking 을 없앴으나 scrpit 들을 순서대로 실행하고 싶거나 그 반대일 경우 문제가 발생합니다. ie 의 경우 Script Defer 기법과 document.write Script Tag 기법들을 사용하면 다운로드 순서에 상관없이 스크립트가 순서대로 실행됨을 보장받을 수 있습니다.
- IE 실행 순서 보장.
- http://stevesouders.com/cuzillion/?ex=10017&title=IE+Ensure+Ordered+Execution
Firefox 의 경우에는 Script Dom Element 기법을 사용하면 됩니다. 모두 첫 번째 스크립트가 가장 마지막으로 다운로드 되지만 가장 먼저 실행됩니다.
- Firefox 실행 순서 보장.
- http://stevesouders.com/cuzillion/?ex=10018&title=FF+Ensure+Ordered+Execution
다운로드 되는 대로 실행하게 하려면 XHR Eval 과 XHR Injection 기법을 사용하면 됩니다.
- 순차 실행 피하기.
- http://stevesouders.com/cuzillion/?ex=10019&title=Avoid+Ordered+Execution
지금 까지의 내용을 요약해 보면 하나의 최적 솔루션은 없으며 상황에 맞게 사용해야 한다는 결론을 낼 수 있습니다.
5. 비동기 스크립트와 결합시키기.
6. 인라인 스크립트를 올바르게 배치하기.
7. 효율적인 자바스크립트 작성하기.
8. 코멧을 이용한 확장.