Rev. 2.73

  • x

  • d

  • c

  • f

  • v

  • b

  • h

  • n

  • j

  • m

  • k

  • ,

  • .


날씨가 우중충해서 며칠째 낚시하러 못나가고 있네요. 너무 심심해서 어제 소개Jabbify를 살짝 가지고 놀아 보았는데요. 식상하게도 너무나 쉽게 만들어져 버렸습니다. 아래의 핵심 메서드 3개만 다룰 줄 알면 게임 셋이에요. 서버가 외국에 위치해 있음에도 응답 속도가 꽤 빠릅니다. 멋진 연주 부탁드려요 ^^;

// 접속 초기화
Jabbify.connect({username: 'anonymous'});

// 이벤트 발송
Jabbify.send("message", "create", {player: $('player').value, key: el.id});

// 이벤트 트리커
OpenAjax.hub.subscribe("jabbify.message.create", function(name, results){
  results.data.each(play); // 이벤트 처리...
});

JavaScriptMVC 프레임웍을 무겁게 들고있는 것이 마음에 안들어서 Jabbify를 가볍게 만들어 보려고 벼루고 있습니다. 요녀석 완전 신기하고 재미있네요. AJ에게 Comet 서버하나 만들어 달라고 부탁해서 열나게 가지고 놀아야 겠습니다.

Comments

HTML :

<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript" src="Sly.js"></script> 

Javascript :

// Overriding CSS Selector Engine.
Sly.handlers = Selector.handlers;
Sly.prototype.findElements = Sly.prototype.search;
Sly.findElement = function(elements, expression, index) {
  if (Object.isNumber(expression)) {
    index = expression; expression = false;
  }
  return Sly(expression || '*').filter(elements)[index || 0];
};
Sly.findChildElements = function(element, expressions) {
  var result = Sly(expressions.join(',')).search(element);
  return Prototype.BrowserFeatures.ElementExtensions ?
    result : result.filter(Element.extend);
};
Selector = Sly;

Prototype의 성능이 다른 프레임웍들에 비해 떨어지는 주된 원인 중 하나는 DOM 셀렉터(Selector) 엔진에 있는 것으로 판단하고 위와 같은 코드를 작성하여 Prototype의 셀렉터 엔진을 더욱 성능이 좋은 Sly로 교체하는데 성공하였습니다. 그리고 SlickSpeed를 이용하여 실험하였는데, 그 결과가 매우 만족스럽습니다. 오옷! jQuery 와 비등비등하거나 더 빠르군요! 특히, 파이어폭스 3.0에서는 날아 다닙니다. 푸하핫!

My SlickSpeed Result :

  • Internet Explorer 8 : 2.5x faster
  • Internet Explorer 7 : 1.4x faster
  • Internet Explorer 6 : 1.6x faster
  • Mozilla Firefox 3.5 : 1.7x faster
  • Mozilla Firefox 3.0 : 8.7x faster
  • Mozilla Firefox 2.0 : 6.2x faster
  • Google Chrome 2.0 : 1.4x faster
  • Google Chrome 1.0 : 1.2x faster
  • Apple Safari 4.0 : 1.9x faster
  • Apple Safari 3.2 : 1.5x faster
  • Opera 9.6 : 4.7x faster

Comments

logo.png

Pete Higgins씨는 TaskSpeed라는 새로운 밴치마크 도구를 만들었습니다. DojoToolkit을 사용하여 졸라 멋진 SVG 차트로 만들어진 결과물도 제공합니다. 이 밴치마크 도구는 얼마전 Dojo 1.3의 발표와 관련하여 Dojo의 성능이 좋아졌다는 사실을 널리 알리려는 홍보성 도구로 보여집니다만, 조금 더 흥미로운 테스트 도구인것은 사실입니다. github.com에 소스를 공개하고 있어서 저도 설치해 보았습니다. 실은, Prototype 1.6.1 rc2의 성능이 궁금해서 였습니다. 혼자만의 성능 측정 결과만으로 가늠하는 것이 무의미 해 보여서 이 곳을 방문하고 사용하지 않은 채 3분을 넘기게 되면 자동으로 테스트를 실행하고 그 결과가 보고 되도록 했습니다.(주의 하세요!)

그건 그렇고, 그동안 무지막지한 덩치 때문에 사용을 기피해 오다가 오래간만에 새로운 Dojo를 살펴보니 사용법이 많이 편리해졌고 가벼워졌고 빨라졌네요. 코어 파일(dojo.js)의 크기가 27K(Gzipped)으로 줄었다고 자신있게 말하고 있습니다. 압축되지 않은(Uncompressed) 파일의 크기가 300kb를 넘는 것을 감안하면 매우 작은 크기라는 것을 알 수 있습니다.

// create a div.
var n = dojo.create("div");

// create a div with content and styles
var n = dojo.create("div", { innerHTML:"hi!", style:{ height:"200px" } });
// destroy the node safely
dojo.destroy(n);

// place an anchor somewhere, before the node with id="someNodeId"
var a = dojo.create("a", { href:"http://dojotoolkit.org" }, "someNodeId", "before");

// empty the contents of a node safely:
dojo.empty("someNodeId");
dojo.query(".nodes").empty();

// place a new LI in an UL at the first position
dojo.place("<li>Newly created DOM Node</li>", "someUl", "first");

// complex creation in dojo.query. passes through dojo.place
dojo.query("#myNode").addContent("hi there!", "first");

Pete씨는 "dojo.js"를 독립형(Standalone)으로 대체시키는 Plugd라는 플러그인을 발표 했는데, 이를 사용하면 프레임웍 간의 충돌을 막을 수 있고, 심지어는 jQuery에서 제공하는 체인 메서드들을 함께 사용할 수 있다고 말하면서, 광분 하셨습니다.(;)

$("p.baz")
    .appendTo("body")
    .addClass("bar")
    .onclick(function(e){
       e.target.innerHTML = "Wow, JavaScript"; 
    });

"Pete씨 저는 jQuery만으로도 충분하다구요~~"

Comments