Rev. 2.73

Prorotype.js 1.5.1버전의 RC3가 릴리즈되었습니다. 마이너한 버그들이 수정되었고, 호환성 및 보안 강화와 몇몇 새로운 추가 메서드를 포함하며, 소소한 수행성능 향상이 있었습니다. 자세한 내용은 아래와 같습니다. $$() 유틸리티는 1.5.0 버전에 비해 대략 1/4 정도의 속도향상이 있는듯 합니다. 빨라졌다고는 하지만 Sylvain Zimmer씨가 직접 성능을 향상(20 times)시킨 셀렉터에 비하면 아직도 10배이상 차이가 있더군요. 쎔씨는 모두 잘 돌아가는 경우 이번 RC3는 1.5.1버전의 마지막 후보가 될 것이라고 전하였습니다. 읔! 용량이 95kb나 되는군요.

며칠후 Release candidate 4가 다시 출시 되었습니다. Sam씨는 한쌍의 벌레를 더 박멸하고 안전성을 높이기로 결정했다고 합니다. IE에서 창이 자동으로 닫히는 버그가 있었나봅니다. 체인지로그를 살펴보세요.

다운로드 : Prototype 1.5.1_rc4

버그 수정
* Element.addMethods now also again adds the methods to Element.
* Form.request also works with forms containing an input element with name="action".
* Safari no longer crashes on String#stripScripts and extractScripts with large <script>.
* Form.disable works again on non-form elements.
* String#endsWith now always returns the correct value.
* Ajax responses with no Content-type header are no longer evaluated.
* Hash#toQueryString again serializes undefined values to ensure consitency with String#toQueryParams.
* Various fixes of the $$() utility.

기능향상
* Ajax.Requests now supports per-request onCreate callbacks.
* JSON strings are automatically stripped of their security delimiters (if present) before eval.
* all toJSON methods now generate YAML-loadable JSON.
* Event.element now returns an extended element.
* Linefeed normalisation is now prevented in IE on String#escapeHTML and String#unescapeHTML for consistency with other browsers.
* Added a new Element.childElements method (shorter alias of Element.immediateDescendants).
* Added a new Element.firstDescendant method (same as using Element.down with no arguments).

수행성능
* Faster $$() utility and Element.getElemementsBySelector method.
* Optimized Element.next, Element.down, Element.up and Element.previous DOM methods.
* Speed improvements of String#escapeHTML and String#unescapeHTML in IE and Safari.

Comments

Even More Rounded Corners With CSS

(Another technique for the pile.)

There's an increasing desire (at time of writing, February 2007) to provide rounded corner dialogs with various visual effects. Based on the original More Rounded Corners With CSS, this update reduces the background to a single "sprite", retaining the alpha transparency benefits of PNG without bloating the markup required to produce the same effect. The end result is something which should allow for further customization.

Scott Schiller씨는 100% CSS기반의 예쁜 다이얼로그를 공개했습니다. 놀라운것은 알파값을 지닌 PNG 이미지를 하나만 사용하고 있습니다.(마치 맵핑소스처럼 사용하는군요.) PNG를 지원하지 않는 IE6에서는 일반 GIF이미지가 나타납니다. nate.koechley.comsquidfingers.com에서 함께 참여한듯 합니다. 요것 참 마음에 드는군요. 아래는 테스트삼아 여러가지 장난을 부려 보았습니다.

꿈틀대기 | 드래그 부여하기 | 리사이즈 부여하기 | 색상 : 빨강, 검정, 파랑

Comments

analytics.gif

최근 자바스크립트의 사용량이 많아지면서 트래픽도 덩달아 증가하고 있다. CPU 연산 의존도가 높은 자바스크립트는 당장 필요치않은 라이브러리들까지 처리하려니 브라우저도 죽을 맛이다. 조금 더 효율적인 처리방법은 없을까?
근간 호스팅 업체에서 제공하는 트래픽 분석 프로그램을 모니터링해 보니 좌측화면과 같이 상위권을 휩쓸고 있다. 브라우저가 파일캐시를 한다지만 신규방문자가 70-80% 이상이면 이것이 대안이라고 보기 힘들다. 자바스크립트 파일을 패키드(packed)하여 단순히 크기를 줄이는 방법도 있지만 브라우저에 부담을 주는 것은 마찬가지이다.

예를 들어 보자. 이미지를 멋지게 표현해주는 라이트박스(Lightbox JS)를 설치했으나 방분객은 이미지를 조회하지 않고 떠났다. 방문객은 필요치않은 자바스크립트 파일들을 다운로드 한 결과를 가져왔다. 물론 서버단에서 이미지가 있는 경우만을 체크하여 라이브러리를 로드했다 하더라도 작동을 시키지 않은것 또한 낭비인것은 사실이다. 페이지에 꼭 필요한 자바스크립만 로드하고 나머지는 필요한 때 동적으로 로드하도록 구현하여 쾌적한 브라우징 환경을 제공하면서 트래픽 손실도 줄이는 일석이조의 효과를 누려보자.

우선 자바스크립트를 동적으로 불러올 함수가 필요하다. 일전에 소개했던 "인클루드 (자바스크립트 || 스타일시트) 파일"을 변형해서 사용했으며 내용은 아래와 같다.(예제에 사용된 코드는 Prototype.js 1.5.1_rc2 기반으로 작성됨)

자, 이제 준비는 끝났다. 예를 들어 Scriptaculous의 dragdrop.js(30.46kb)을 동적으로 호출하는 코드를 만들어보자.

//Include dragdrop.js on action
var Draggable = function(element, options){
	new Include('dragdrop.js', function(){
		new Draggable(element, options);
	}); 
};

'Draggable' 이라는 함수를 미리 선언했다. 이 함수는 dragdrop.js의 메인 클래스이름과 동일하다. 만약 어딘가에서 'Draggable' 클래스를 작동시키면 'dragdrop.js'파일이 로드되고 작동시킨 함수는 온컴플리트(onComplete) 이벤트에 의해 실행되며 위에서 미리 선언한 함수는 'dragdrop.js' 원래의 클래스로 오버라이드(override)되는 로직이다. 위 코드는 이곳에서 실제 사용되는 코드로 키워드 뷰어나 댓글수정 등(Draggable 이 적용된 곳)에 적용되어 있으니 직접 사용해보자. Firefox의 JSView 플러그-인을 설치하면 자바스크립트 및 스타일시트의 사용현황을 쉽게 확인 할 수 있다.

var FishEye = function(element){
    new Include('fisheye.js', function(){
        new FishEye(element);
    });
};
var CMotion = function(element){
    new Include('cmotion.js', function(){
        new CMotion(element);
    });
};
var Favicon = function(element){
    new Include('favicons.js', function(){
        new Favicon(element);
    });
};

위 코드는 어떤 역할을 할까? 그렇다. 해당 기능이 작동할 때에만 자바스크립트가 로드되고 오버라이드 된다. 'fisheye'는 어안메뉴이고, 'cmotion'은 블로그 상단의 썸네일 모션이며, 'favicons'는 댓글쓴이의 이름앞에 패비콘을 찍어주는 작은 단위의 라이브러리들이다. 이 함수들을 개별 파일로 분리하여 필요한 때에 필요한 파일을 동적으로 호출하는 것이다. 오버라이딩하는 기법을 사용하지 않고 아래처럼 단순히 로드해서 사용해도 무방하다.

if($$('pre code').length){
	new Include('syntax.js, syntax.css');
}

끝으로, 이 작업을 거친후 페이지당 약 50-60KB로 용량을 절약할 수 있었으며, 하루평균 최소 100MB이상의 트래픽 손실 및 비용 절감 효과가 있다는 결론이 나왔다. 더불어 브라우저가 로딩압박에서 조금은 벗어난 것을 체감할 수 있었다. 앞으로 30~50KB이상을 더 세부적, 체계적으로 분리할 예정이며, 마치 관례처럼 사용되고 있는 자바스크립트 사용법(All in header)에 조금씩 변화를 가져볼 생각이다.

※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.

Comments