bsSelector Beyond the Sizzle.js. Fastest pure-JavaScript CSS DOM Selector engine.

1. bsSelector.js

2. PAEK, Seung-Hyun
- projectBS core committer
- SHOU Communications

3. projectBS

4. projectBS
bsJS

5. bsJS
var color = bs.Dom('#domID')
.S('border-radius', 5, '@width', 100, 'color', '#fff');
console.log(color) // "#fff“
var color = $('#domID').css({
'borderRadius' : 5,
'WebkitBorderRadius' : 5,
'MozBorderRadius': 5
})
.attr('width', 100)
.css('color');
console.log(color) // "#fff"

7. 'bsJS 에 독자적인
셀렉터를 갖고싶은
데..'

8. ‘승현이 니가 만들
면 되겠네~!!'

9. bsSelector

10. Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환

11. Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환

12. Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환

13. Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환

14. Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환

15. Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환

16. query = 'ul.toc li.tocline2‘;
tokens = ['ul', '.toc', ' ', 'li', ‘.tocline2‘];
if(tokens[i].charAt(0) == '#')
document.getElementById(query);
else if(tokens[i].charAt(0) == '.')
document.getElementByClassName(query);
else
document.getElementsByTagName('*');

17. ‘CSS2 spec 은 기본
아냐?'

18. ‘CSS3 spec 도 하는
김에 하지?'

19. ‘CSS4 spec 도
&^&&^%&%'

20. 일단 완성

21. Sizzle speed

23. jsPerf.com

24. getElementById
getElementsByTagName
getElementsByClassName
getElementsByName
querySelectorAll

27. ID TAG CLASS NAME
2,096,567 1,876,875 1,841,273 1,575,123
17,090,351 8,920,145 8,285,463 8,031,034
19,384,745 16,661,973 17,559,678 19,073,485

29. ID TAG CLASS
124,963 126,480 106,504
1,091,549 222,199 210,918
2,020,367 321,119 339,747

30. 상황은 조금 나아
졌지만…
다음은???

31. JavaScript는
인터프리터 언어

32. 인터프리터?

34. 함수 호출을
최소화

35. 함수 호출을 최소화 한다

36. 함수 호출을 최소화 한다
function Non function
16,830 54,080
49,063 49,436
51,524 52,066

37. 네이티브메서드
안심하지 말자

38. 네이티브메서드라고 안심하지 말자

39. 네이티브메서드라고 안심하지 말자
forEach for()
300 879
658 2,851
142 4,229

40. 네이티브메서드라고 안심하지 말자

41. 네이티브메서드라고 안심하지 말자
Function.bind obj.add()
39,188,564 79,601,156
658 2851
5,125,064 473,773,657

42. LinkedList
getElementsByTagName
getElementsByClassName

43. var els = document.getElementByTagName(‘div’);
console.log(els.length);
var newEl = document.createElement(‘div’);
document.body.appendChild(newEl);
console.log(els.length);

44. 반복의 제거

45. div
P[0] P[1] P[2]

46. element.childNodes;
children.nodeType == 1;
VS
element.children

47. 이런 사실들과
알고리즘등을
고려하면서 재작성

48. 이런 사실들과
알고리즘등을
고려하면서 재작성

49. Sizzle Mootools-slick bsSelector
함수개수 : 140 93 13
라인수 : 1,214 2,037 305
용량 : 60,335 37,935 13,485

50. 그 결과

51. Chrome

52. IE

53. 감사합니다.
ProjectBS
https://www.facebook.com/groups/bs5js/
github bsJS
http://ligo.kr/i7
github bsSelector
http://ligo.kr/o8