Rev. 2.73

slowjavascript.png

Script.aculo.us 개발자인 Thomas Fuchs씨와 그의 마눌님이신 Amy Hoy씨는 31가지 성능향상 비법이 담긴 체크리스트와 문제 해결방법이 담긴 FAQ 사이트(slowjavascript.com)를 구축하고 공개했습니다. "당신이 작성한 자바스크립트가 조낸 느리세요? 이제 걱정하지 마세요!"라고 하시네요. 체크리스트는 PDF로 작성되었으며 그들이 저술한 "JavaScript Performance Rocks!" 책 광고 페이지로 연결됩니다. 뉴스 레터에 가입하면 갱신되는 정보도 알려준다고 합니다.

Comments

마이크로소프트에서도 YUI Compressor와 같은 자바스크립트 압축도구를 발표했습니다. 이름이 "Microsoft Ajax Minifier"군요. 이 두 녀석을 간략하게 비교해 보도록 하겠습니다.

사용법:

// Ajax Minifier Best Option
ajaxmin.exe -hc input.js -o output.js

// YUI Compressor Best Option
java -jar yuicompressor-2.4.2.jar input.js -o output.js

YUI Compressor와 비교되는 Ajax Minifier의 두드러진 특징은 Hypercrunch Plus C 옵션을 제공하여 압축 비율을 더욱 높일수 있다고 합니다. 이 옵션은 한 블록에서 동일한 문자열이 반복되는 경우 자동으로 변수에 할당하는 옵션입니다. 다음 출력 결과물을 비교해 보세요.

인풋:

(function(){
  node["onclick"] = function onclick(){
    node["onclick"] = null;
    setTimeout(function() {
      node["onclick"] = onclick;
    }, 1000);
  };
})();

아웃풋:

// Ajax Minifier
(function(){var a="onclick";node[a]=function b(){node[a]=null;setTimeout(function(){node[a]=b},1e3)}})()
 
// YUI Compressor
(function(){node.onclick=function a(){node.onclick=null;setTimeout(function(){node.onclick=a},1000)}})();

YUI Compressor는 주석문을 유지시키는 방법으로 "/*! Comments */"형식으로 작성하는 것을 허용합니다만 Ajax Minifier는 이를 무시하는 군요. 이러한 룰은 YUI Compressor뿐만 아니라 다수의 JS Minifier 도구들이 지원하고 있습니다. 또다른 문제는 IE인지를 구분하기 위한 방법으로 아래와 같은 코드를 쓰는 경우가 종종 있습니다. Ajax Minifier는 이것 역시 무시합니다. 매우 조심해야 할 부분입니다.

var b = false;
/*@cc_on
b = true;
@*/
 
// will be
var b=false;b=true

두 압축기 모두 장단점이 있네요.

Comments