3번째 만드는 CSS 셀렉터 엔진
컴퓨터/작업물
2008/05/14 11:13
http://hooriza.com/svn/javascript/chunks/cssQuery/
지난 달 개인수양 계획에 있었던 내용이라서 계속 만들고 있었는데...
목표로 했던 YUI 의 Ext.DomQuery 보다 속도가 턱없이 느려서 갈아엎고 갈아엎고...
4~5번을 그렇게 처음부터 새로 짜기를 반복하다가 드디어 노드 탐색을 양쪽 방향으로 하는 방법을 사용해서 일반적인 쿼리는 Ext.DomQuery 보다 약간 느리게, 어떤거는 조금 빠르게, 그리고 ID 로 찾는 # 가 쿼리의 중간에 있으면 기대이상으로 훨씬 더 빠른 속도를 보여주도록 완성!
Pseudo Class 는 아직 몇가지 간단한 것만 지원하는 상태...
그리고 HTMLDocument 를 탐색할때는 태그의 대소문자를 구별 하지 않고 XMLDocument 를 탐색할때는 대소문자를 구별 하도록 만들었습니다.
마구마구 귀찮아져서 막판에 소스가 개판으로 치닫은 게 있긴 했지만 일단 그럭저럭 잘 동작하는 것 같으니 공개.
다른(..이라고는 하지만 Ext.DomQuery 랑 Prototype.js 만) CSS query engine 하고 속도를 비교할 수 있도록 sample.html 을 만들어봤습니다.
css_query_engine.zip최신 버젼은 맨 위에 나와있는 서브버젼을 통해 받으셈
아래는 제 컴퓨터에서 확인한 테스트 결과이고요,
쿼리 샘플은 여기에서 따왔습니다.
빨간색과 회색글자는 지원하지 않는 쿼리라는 뜻입니다. 좀 많네요-_- (nth-child 는 만들었었는데 DomQuery 보다 5~6배나 느려서 일단 주석처리 해버렸습니다;;)
여기에는 없지만
div p.foo[align=center] + div#test ul li:empty
이런 형태로 #아이디 가 쿼리 중간에 들어있거나
div.foo.bar[align=center][align*=str]:empty
식으로 여러가지 제약조건이 붙은 상태의 쿼리 경우에는 DomQuery 보다 꽤 빠른 실행시간을 확인하실 수 있을겁니다.
근데 이름을 뭘로 짓지?
BoASelector? -_-;
음 이건 영어단어의 구성이 왠지 간지가 안 나는데-_-a
예전에 만들었던 야구찌BBS 가 생각나네;;
ps. 나머지 Pseudo class 도 구현해야 할 생각하니까 가슴이 답답해진다;;
- 영양가 있는 포스팅인가요
- (총 4분이 투표해서 3.8점) 3.8점
