ReiZes's Devlog

자바스크립트 프레임웍을 사용하여 개발을 하면, 가장 많이 사용하는 것이 DOM Selector이다.
그런만큼 DOM Selector의 성능은 자바스크립트 어플리케이션의 성능을 좌우하는 중요한 요소이기도 하다.
이전 프로젝트에서 prototype.js를 사용하여 개발 하였다가, 성능 문제로 결국 상당 부분을 document.getElementById로 복구시켜보았기 때문에 SWAF에서 DOM Selector의 성능은 가장 중요한 이슈이기도 했다.

그것에 더하여, 요즘 한창 이름을 날리는 jQuery와 같은 편리함 까지 갖출 수 있으면 얼마나 좋을까.

__proto__나 window.HTMLElement와 같은 것들이 등장하고, prototype이나 jQuery에서 이를 이용하여 더욱 발전된 자바스크립트 프레임웍의 모습을 보여주고 있다. 그러나, 결정적으로 점유율이 높은 IE에서 지원하지 않으며, 더욱이 이로 인해 이들 프레임웍이 IE에서 성능 저하의 모습을 보일 때 마다 MS의 정책에 욕을 한마디 해주고 싶기도 하다.

어쨌든, 여러가지 새로운 요소를 사용한 최첨단 프레임웍 보다는 실제 프로젝트에서 유용한 프레임웍을 만들기 위해 IE에서 지원되지 않는 요소는 배제하기로 하였다. 마찬가지로 jQuery에서 지원하는 XPath 방식의 selector 역시 그림의 떡일 뿐이었다.

성능과 편리함 사이에서 절충을 고심한 끝에 아래와 같은 DOM Selector를 만들었다.

1. $('div1') - id가 div1인 element
2. $('@data1') - name이 data1인 element들
3. $('#div',$('div1')) - id가 div1인 element의 child들 중 div태그들
4. $('.cls1') - css class name이 cls1인 element들
5. $('*3,$('div1')) - id가 div1인 element의 child 중 3번째 element
6. $('~div##') - id가 div01, div02, div03, ... 인 element들
7. $('%frm1) - name이 frm1인 form
8. $('%frm1.data1') - name이 frm1인 form에서 name이 data1인 form element
9. $(/inp*/i,$('div1')) - id가 div1인 element의 child들 중 id가 /inp*/i 정규식에 일치하는 element들
10. $('+xxx') - 현재 윈도(프레임) 및 하위 프레임/iframe들에 대해 $(xxx)를 수행
11. $('^xxx') - 현재 윈도(프레임) 및 상위 프레임/iframe들에 대해 $(xxx)를 수행

비록 다른 프레임웍 처럼 $('a').$('b') 나 $('a/b') 와 같은 식으로 사용하지는 못하지만, 위의 것들만 있더라도 필요로 하는 기능들은 충분할 것 같으며, 다소의 편의성을 손해본 대신 성능에서의 이득을 얻었다.

비록, 8월 릴리즈된 버전 기준이지만, 속도는 prototype의 selector보다 빠르며, docment.getElementById보다 약간 느린 수준이었다. 물론, 다른 프레임웍들도 지속적으로 개선되고 있기 때문에 최신 버전에 대한 테스트는 다시 해보아야 할 것이다.

이전(swaf 초기버전)에는 수십개의 메뉴들에 이벤트를 걸기 위해 각 element들에 모두 다른 id를 부여해야 했지만, 이제는 $listener($('#a',$('menu')),'click',onClickMenu); 와 같이 단 한줄의 명령으로 id 없이도 menu 밑에 있는 모든 a 태그들에 클릭 이벤트 핸들러를 연결시킬 수 있게 되었다.

예전의 swaf 초기버전에서 여러가지 기능을 추가하고, 편의성을 높이긴 했지만 prototype이나 jQuery에서 사용한 최근 기술들을 swaf에 적용시켜보고 싶은 것 또한 개발자의 욕심이다.

언제쯤 IE가 최신 기술들을 지원할까.. 아마도 아직은 계획이 없을 것이라는 생각에 조금은 우울해진다.