728x90

HTML5Rock 에서 HTML5 개발 시 참고할 만한 유용한 자료를 공개했다

HTML5 와 CSS3 그리고 향상된 스크립트 등을 활용하여 보다 빠른 웹 어플리케이션을 개발하기 위한 실천적 지침을 제공해 주고 있다
Best Practices for a Faster Web App with HTML5

그리고 ETRI 에 근무하시면서 HTML5 관련 주요 활동을 많이 하시는 이원석님이 이 글을 번역해 주셨다. 매우 고마운 일이 아닐 수 없다 ^^;

아래는 이원석님의 번역본 이다
HTML5를 활용하여 빠른 웹 애플리케이션 개발하기

HTML5, CSS3, 자바스크립트 그리고 브라우저의 개선으로 확실히 웹은 향상되고 있다
이들 새로운 기능들을 활용하면 네트워크 대역폭의 효율적 사용은 물론 속도의 개선, 생산성 증가, 자원의 효율적 사용 등을 꾀할 수 있어 결국에는 웹 어플리케이션의 개발과 사용, 양 측면에서의 효과를 볼 수 있다. 번역된 위 블로그 글을 꼼꼼히 살펴 보기 바란다

아래는 위 글을 압축하여 지침과 결과만을 뽑아 본 것이다

쿠키 대신 웹 저장소를 사용하라
- HTTP 헤더 용량이 줄어들어 결국 요청 성능이 향상된다
자바스크립트 애니메이션 대신 CSS Transitions를 사용하라
- 훨씬 적은 코드로 전송 바이트트 수를 줄여 결국 응답 성능이 향상된다
서버와 통신하는 대신 클라이언트측의 데이터베이스를 사용하라
- 서버 통신을 줄여 결국 성능이 향상된다
자바스크립트 개선은 상당한 성능 개선을 제공한다
- 새로 추가된 스크립트 메서드 사용으로 성능이 개선된다
라이브 사이트에 대해서도 캐쉬 매니페스트(cache manifest)를 사용하라
- 어플리케이션 캐싱으로 실행속도를 최적화 시킨다
비주얼 처리를 개선하기 위해서 하드웨어 가속기능을 켜라
- GPU-레벨 가속기능을 활용하여 시각적,동적처리를 자연스럽고 부드럽게 한다
CPU에 부담을 많이 주는 오퍼레이션에 대해서는 웹 워커를 사용하라
- 비동기 처리로 속도와 UI 반응이 개선된다
HTML5 폼 애트리뷰트와 Input 타입
- 새로운 폼요소를 사용하면 코드를 줄일수 있고 성능이 향상된다
이미지 효과를 표현할 때 CSS3 effects를 최대한 활용해라
- CSS3로 이미지 효과를 대체하여 이미지 로딩과 요청을 줄일 수 있어 결국 성능이 향상된다
XHR보다 적은 밴드위스로 빠르게 전달할 수 있는 웹소켓
- Comet대신 웹소켓을 이용하여 훨씬 적은 네트워크 밴드위스를 사용한다
  결국 전송 속도가 빨리진다