2009/03/30 18:10
jQuery 1.3 새 릴리즈, 그리고 성능 Issues 새로움2009/03/30 18:10
jQuery로 인해 웹개발의 패러다임이 바뀌고 있다.
10년전 골칫덩어리 javascript가 화려하게 framework로 변신하여 이젠 어디에 내놔도 든든한 일꾼이 되어버렸다.
jQuery에 대한 기본적인 지식은 아래 IBM developerWorks 컬럼을 참고하세요.
jQuery로 Ajax 개발을 단순화 하기
jQuery로 작업하기, Part 1: 브라우저로 데스크톱 응용 옮기기
jQuery로 작업하기, Part 2: 내일 나올 웹 응용을 오늘 구현해보자
jQuery로 작업하기, 3부: jQuery와 Ajax로 RIA 만들기
jQuery 1.3 새 버전 무엇이 달라졌나?
지난 1월 jQuery는 1.2.6 에서 1.3으로 버전업 된 라이브러리를 릴리즈 했다.
Minor 버전이 바뀐것으로 보아 어느정도의 변화는 감지 가능했는데, 이번에 바뀐 기능은 아래와 같다.
- Live Event 적용
- 새로운 CSS Selector 엔진적용 - Sizzle
- Faster Effect
- New Browser Sniffing Method
대표적인 새로운 기능이라면 Live Event가 적용되었다는 것.
Live Event
Live Event는 이벤트 핸들러를 통해 이벤트를 지정해 주면 그 이벤트가 시간을 초월하여 적용 된다.
예를 들어 p tag를 클릭하면 alert()창을 띄운다고 했을때, 일반적으로 현재 존재하는 모든 p tag에는 적용이 되지만, 후에 Dynamic하게 생성된 p tag에는 적용되지 않는다. 하지만 Live Event를 걸어 주면 시간을 초월하여 p tag가 언제 생성되든 LiveEvent가 적용되게 할 수 있다.
예를 들어 게임을 만든다고 했을 때, 게임의 오브젝트의 속성을 처음 LiveEvent로 정의해 두면 오브젝트가 생길때 마다 내용을 다시 적용하는 일이 필요없게 된다. 재미있는 기능이며 용도에 따라선 아주 유용한 기능이라 볼 수 있다.
Performance
그리고 성능의 큰 변화는 CSS Selector 엔진이 바뀌었다는 것이다.
누가 뭐라해도 가장 편리하게 쓰고 있고, 가장 많이 쓰고 있는 기능이 jQuery의 Selector 기능인데, 이 부분을 새로운 엔진으로 대체하여 성능개선이 이루어짐으로 인해, 전체적인 jQuery 사이트의 성능이 향상되리라 예측할 수 있다.
아래는 엔진 성능에 대한 비교 차트다.
플랫폼별 Selector 성능 비교차트
위에서 보듯 1.2.6버전에서 1.3 버전으로의 성능차이가 특히 firefox 3.1 에서 크게 개선되었다.
이번에는 Dojo 라이브러리보다 에서 느렸던 부분이 지금은 더 빠르게 작동한다는 것을 볼 수 있다.
플랫폼별 Insert 성능비교 차트
더욱 놀라운 것은 insert 성능, 새로운 element를 삽입할 때의 성능이 상당히 개선되었다. 어림 짐작으로만 봐도 6배 이상 개선됨을 알 수 있다. 동적으로 Element의 삽입이나 삭제가 많을 경우에는 정말 훌륭한 성능을 보일 것으로 예측된다.
Delegation Filtering과 offset 부분에서도 성능이 상당히 개선된 걸로 보아, 이번 버전의 목표를 다시한번 확인할 수 있었다. 또한 Effect 부분에도 성능의 개선이 이루어져 Visual한 부분까지 부드럽고 빠른 리액션을 기대할 수 있다.
Browser Sniffing
그리고 다른 부분으로는 Browser Sniffing 의 방식을 바꿔 놓았다는 점.
예전에는 어떤 브라우저인지 감지하려면 브라우저의 속성변수($.browser.safari 또는 $.browser.msie 등과 같은)로 알 수 있었으나, 그 방식이 미래지향적인 웹개발을 저해한다는 판단아래 방식을 특징탐지 기반으로 바꾸었다.
그말 즉슨, 어떤 특정기능이 구현되어 있느냐 없느냐를 판별하여 거기에 맞는 처리를 해주는 것, 브라우저는 계속 진화하는데, 브라우저 버전별로 특정기능 구현이 되어 있을수도 안 되어 있을 수도 있다. 그것을 토대로 프로그래밍을 하게되면, 나중에 개발자의 의도와 무관한 결과를 볼 수 있게 된다. 그리하여 특징을 토대로 구현을 나누면 구현이 되어있다면 언제라도 그에 따른 대처를 할 수 있어 미래지향적인 프로그래밍이 가능하다. 물론 그렇다고 이전 방식을 포기한것은 아니다. 이전방식도 사용 가능하다.
최근에 접한 또 다른 selector 엔진소식이 있어 소개해 본다.
Sly라는 엔진인데, 무척이나 재빠른 녀석이다.
플랫폼별 Selector 성능비교차트
IE를 제외하곤 성능이 아주 탁월하다. jQuery도 Sly라는 새 Selector 엔진에는 역부족인가 보다.
jQuery 만큼의 기능이 필요하지 않고 가벼운 사이트가 목표일 때 큰 도움이 되리라 본다.
용량도 3kb로 무척이나 작다.
이렇게 jQuery와 성능에 대해서 짧게나마 이야기 해 보았다.
이런 좋은 도구도 실제 활용하여야 보배이기에, 잘 익혀두고 자신이 필요한 시점에 적절이 활용 할 수 있기를~
