야후의 YUI 가 공개되고 나서 확장판격인 YUI-EXT 1.0 이 나왔을때, 그 화려하고 다이내믹한 컴포넌트들에 열광했었습니다.
하지만 화려한 만큼 적용하기가 쉽지 않았고 여러가지 제약도 많아서 제대로 써보지도 못하고 감탄만 하고 말았었죠.
그렇게 그림의 떡 정도로 외면 당하기엔 아까운 화려한 인터페이스 라이브러리 Ext 가 안정적이고 최적화된 모습으로 Ext Js 2.0 을 공개했습니다.
그전에 ExtJs 2.0 과 Google Gears 가 통합했다는 소식을 접한 바 있었는데, 구글 기어즈가 safari 를 공식적으로 지원하지 않기 때문에 그다지 좋은 소식으로 들리진 않았지만 어떤 모습으로 더 강력해졌는지 자세히 살펴보고 싶어졌습니다.
공개된 샘플 에 있는 다양한 컴포넌트들 하나하나 들여다 보면 계속해서 놀라게 됩니다.
그 중에서 desktop 을 보고 있자니 말이 안나옵니다. javascript 가 이렇게 까지도 표현이 가능하군요!
API 는 물론 친절하게도 한국어 tutorial 도 제공하고 있습니다.
prototype.js 의 syntax 와 많이 비슷해서 쉽게 적응할 수 있을 듯 합니다.
자세한 기술적인 내용은 좀 더 다뤄보고 공부하면서 포스팅 할 생각 입니다.
지금까지 공개된 Ajax UI 컴포넌트 라이브러리 중에서 가장 강력한 기능을 가진놈이 아닐까 합니다.
웹 사이트 성능 최적화 에반젤리스트(Evangelist)로 활동 중인 YDN(Yahoo! Developer Network)의 Steve Souders씨가 작성한 15개의 웹 사이트 성능 최적화 지침이다. “High Performance Web Sites“라는 이름으로 책이 출간되어 있으며, Firebug의 확장기능인 YSlow역시 이 규칙들에 기반하고 있다. 다음 예제들은 지침에 근거하여 작성한 실습 예제들로서 조금더 구체적인 성능향상 방법들을 제시한다.
HTML에 속해있는 이미지, 스크립트, 플래시 등은 서버로 요청하고 응답받기까지의 시간을 필요로한다. 이러한 외부파일들이 많으면 많을 수록 웹 사이트의 성능을 떨어트리기 마련이다. 다음은 예제들은 HTTP 요청을 줄이기 위한 방법을 제시하며 동일한 결과물을 놓고 직접 비교할 수 있다. 참고로 예제 6 ,7번에서 사용된 Data URI는 IE7 이하에서 지원하지 않기 때문에 그림의 떡이나 마찬가지다.
CDN(Content Delivery Network)은 접속하는 사용자의 위치에 따라서 응답이 빠른 서버로 접속하여 필요한 파일들을 호출하는 것을 말한다. 글로벌라이제이션 서비스를 지향하는 서비스에 적절한 성능향상 방법으로 일반(특정 지역만을 대상으로 하는 서비스) 사이트에서는 만족스러운 향상효과를 기대하기 어렵다.
자바스크립트를 이용한 Ajax와 복잡한 UI 등이 널리 애용되면서 더욱 많은 외부파일(스크립트와 이미지, 스타일시트 등)들을 생산하게 됨에 따라 이를 효율적으로 처리하지 못할 경우 웹 사이트 성능이 크게 저하되기도 한다. 외부파일들의 헤더에 Expires 정보를 추가하여 캐시하는 것 만으로도 웹 사이트의 성능을 끌어 올릴 수 있다.
외부파일들을 압축하여 성능을 높일 수도 있다. 현존하는 대부분의 브라우저가 Gzip 압축전송을 지원하며, 이또한 헤더 정보를 수정하고 비교적 간단한 서버단 작업으로 구현할 수 있다.
스타일시트(CSS)는 HTML의 헤드(Head)태그의 최상단에 위치하는 것이 성능향상에 도움된다.
스크립트 파일들은 바디(Body)태그에서 호출하는 것으로 성능을 높일 수 있다. 다음 예제들은 자바스크립트 위치에 따른 성능변화를 매우 직관적으로 표현하고 있다.
IE계열 브라우저에서만 작동하는 expression은 IE6 이하에서 표현하지 못하는 스타일링에 상습적으로 사용한다. 브라우저로 하여금 다소 무리한 연산을 요구하기 때문에 사용을 자제하는 것이 좋다.
너무나도 당연한 성능향상을 기대할 수 있다. 일단 브라우저에서 캐시효과를 누릴 수 있는 것 외에도 필요한 스크립트만을 호출할 수 있는 등 부가적으로 얻어지는 가치는 상당하다.
DNS(Domain Name System)란 쉽게 말해 인터넷의 전화번호부라고 할 수 있다. 도메인이 사람이름이고 IP가 전화번호인 셈이다. 전화번호부에서 원하는 전화번호를 찾기위해 시간이 걸리는 것 처럼 브라우저 또한 DNS 확인을 위한 시간을 필요로한다. 여기에 들이는 시간을 줄여서 웹 사이트의 성능을 높일 수 있다. DNS정보 역시 브라우저의 저장영역에 캐시되어 있기 때문에 같은 도메인 네임을 사용할 경우 DNS 확인에 걸리는 시간을 최소화 할 수 있는 것이다. 도메인이 서로다른곳의 외부파일들을 불러올 때 고려해야 할 사항이다.
JS, CSS 파일을 압축(Minified) 또는 암호화(Obfuscated or Packed)하여 용량을 줄일 수 있다. Minify는 파일 내부의 개행과 주석 그리고 인텐트(들여쓰기) 등, 시스템이 이해하기에 불표한 문자열을 제거하여 용량을 줄이는 방법이고 Packing은 여러가지 압축기법으로 문장을 암호화하여 브라우저의 인터프리터에 의존해 해석(Evaluate)하는 방식으로 Minified 파일보다 압축률이 훨씬 높다. 참고로, 매번 Packed하는 것이 꼭 좋지만은 않다.
포워딩(Forwarding)과 달리 리다이렉트(Redirect)는 2차례에 걸쳐 통신하게 된다. 그만큼 서버로부터의 응답이 완료되기까지 소요되는 시간이 길기 때문이다.
때때로 자바스크립트 파일을 복수로 불러야할 때가 있다. 이 때 캐시설정을 하지 않았다면, 동일한 파일이라 할지라도 브라우저는 지속적으로 요청을 하고 같은 수행을 반복 한다. 이와 같은 스크립팅은 가급적이면 피하는 것이 좋다.
ETag는 HTTP/1.1에 기본으로 사용하도록 설정된 태그로서 파일캐시 및 갱신 진위여부를 가리는데 사용된다. 캐시와 밀접한 연관이 있으므로 외부파일의 헤더에는 ETag를 항상 설정하여 전송량을 최소화할 수 있다. 보다 자세한 내용은 “응답헤더 설정으로 웹사이트 성능 개선하기“를 참고하자.
Ajax요청 역시 Expires 헤더를 설정하여 캐시효과를 누릴 수 있다.
아이프레임역시 src 속성에 의해 브러우저로 하여금 HTTP 요청을 할당한다. 아이프레임을 다수 사용할 때 src 속성을 지정하지 않는 것으로 로딩속도를 향상시킬 수 있다.