Languages/JavaScript
[JavaScript] 확장가능한 JavaScript 아키텍쳐 및 성능 전략
Peter Note
2012. 12. 23. 22:02
Java의 Spring과 같이 확장성이 높은 JavaScript 프레임워크를 만들기 위한 아키텍쳐에 대하여 알아보자
- Module Layer를 두어 모듈 단위로 모든것을 개발한다.
- SandBox Layer 를 두어 Module이 상호 통신하는 인터페이스와 보안, 가이드 역할을 한다.
- Core Layer 를 두어 Module의 LifeCycle을 책임진다. 모듈간 통신과 에러 핸들링, 확장을 수행.
- Base Library Layer 를 두어 기본 함수와 유틸을 제공한다. : JQuery, YUI 같은 것
> 유지보수 가능한 JavaScript 전략
> 고성능을 내기위한 JavaScript 전략 (Responsive JavaScript 코딩 전략)
- UI Thread 작업시에는 Queue를 이용하라
- JavaScript Execution 시간을 50ms 이상으로 하지 마라
- JavaScript 다운로드하고 파싱하고 실행할때까지 HTML Rendering이 멈춘다. JavaScript은 무조건 HTML 맨 밑에 배치함
- JavaScript를 쪼개 놓지 말고 합쳐서 다운로드 타임으로 조금이라도 줄여라
- 필요한 시점에 동적으로 스크립트 파일을 로딩한다
- Reflow와 Repaint 횟수를 줄이는 것이 성능 최적화에 중요함