0
bsSelector.js
PAEK, Seung-Hyun
- projectBS core committer
- SHOU Communications
projectBS
projectBS
bsJS
bsJS
var color = bs.Dom('#domID')
.S('border-radius', 5, '@width', 100, 'color', '#fff');
console.log(color) // "#fff“
var...
'bsJS 에 독자적인
셀렉터를 갖고싶은
데..'
‘승현이 니가 만들
면 되겠네~!!'
bsSelector
Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환
Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환
Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환
Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환
Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환
Selector process
query의 tokenizer
요소 선택
요소 순환
요소 판정
결과 반환
query = 'ul.toc li.tocline2‘;
tokens = ['ul', '.toc', ' ', 'li', ‘.tocline2‘];
if(tokens[i].charAt(0) == '#')
document.get...
‘CSS2 spec 은 기본
아냐?'
‘CSS3 spec 도 하는
김에 하지?'
‘CSS4 spec 도
&^&&^%&%'
일단 완성
Sizzle speed
jsPerf.com
getElementById
getElementsByTagName
getElementsByClassName
getElementsByName
querySelectorAll
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 1...
ID TAG CLASS
124,963 126,480 106,504
1,091,549 222,199 210,918
2,020,367 321,119 339,747
상황은 조금 나아
졌지만…
다음은???
JavaScript는
인터프리터 언어
인터프리터?
함수 호출을
최소화
함수 호출을 최소화 한다
함수 호출을 최소화 한다
function Non function
16,830 54,080
49,063 49,436
51,524 52,066
네이티브메서드
안심하지 말자
네이티브메서드라고 안심하지 말자
네이티브메서드라고 안심하지 말자
forEach for()
300 879
658 2,851
142 4,229
네이티브메서드라고 안심하지 말자
네이티브메서드라고 안심하지 말자
Function.bind obj.add()
39,188,564 79,601,156
658 2851
5,125,064 473,773,657
LinkedList
getElementsByTagName
getElementsByClassName
var els = document.getElementByTagName(‘div’);
console.log(els.length);
var newEl = document.createElement(‘div’);
documen...
반복의 제거
div
P[0] P[1] P[2]
element.childNodes;
children.nodeType == 1;
VS
element.children
이런 사실들과
알고리즘등을
고려하면서 재작성
이런 사실들과
알고리즘등을
고려하면서 재작성
Sizzle Mootools-slick bsSelector
함수개수 : 140 93 13
라인수 : 1,214 2,037 305
용량 : 60,335 37,935 13,485
그 결과
Chrome
IE
감사합니다.
ProjectBS
https://www.facebook.com/groups/bs5js/
github bsJS
http://ligo.kr/i7
github bsSelector
http://ligo.kr/o8
bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)
Upcoming SlideShare
Loading in...5
×

bsSelector.js(OctoberSky.js)

840

Published on

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

Published in: Software
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
840
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • http://jsperf.com/jsconf-id-class-name-tag

  • http://jsperf.com/jsconf-id-class-name-tag/2

  • http://jsperf.com/jsconf-function-vs-non-function
  • http://jsperf.com/jsconf-array-prototype-foreach
  • http://jsperf.com/jsconf-native-method-function-prototype-bind
  • Transcript of "bsSelector.js(OctoberSky.js)"

    1. 1. bsSelector.js
    2. 2. PAEK, Seung-Hyun - projectBS core committer - SHOU Communications
    3. 3. projectBS
    4. 4. projectBS bsJS
    5. 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"
    6. 6. 'bsJS 에 독자적인 셀렉터를 갖고싶은 데..'
    7. 7. ‘승현이 니가 만들 면 되겠네~!!'
    8. 8. bsSelector
    9. 9. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    10. 10. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    11. 11. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    12. 12. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    13. 13. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    14. 14. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    15. 15. 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('*');
    16. 16. ‘CSS2 spec 은 기본 아냐?'
    17. 17. ‘CSS3 spec 도 하는 김에 하지?'
    18. 18. ‘CSS4 spec 도 &^&&^%&%'
    19. 19. 일단 완성
    20. 20. Sizzle speed
    21. 21. jsPerf.com
    22. 22. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelectorAll
    23. 23. 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
    24. 24. ID TAG CLASS 124,963 126,480 106,504 1,091,549 222,199 210,918 2,020,367 321,119 339,747
    25. 25. 상황은 조금 나아 졌지만… 다음은???
    26. 26. JavaScript는 인터프리터 언어
    27. 27. 인터프리터?
    28. 28. 함수 호출을 최소화
    29. 29. 함수 호출을 최소화 한다
    30. 30. 함수 호출을 최소화 한다 function Non function 16,830 54,080 49,063 49,436 51,524 52,066
    31. 31. 네이티브메서드 안심하지 말자
    32. 32. 네이티브메서드라고 안심하지 말자
    33. 33. 네이티브메서드라고 안심하지 말자 forEach for() 300 879 658 2,851 142 4,229
    34. 34. 네이티브메서드라고 안심하지 말자
    35. 35. 네이티브메서드라고 안심하지 말자 Function.bind obj.add() 39,188,564 79,601,156 658 2851 5,125,064 473,773,657
    36. 36. LinkedList getElementsByTagName getElementsByClassName
    37. 37. var els = document.getElementByTagName(‘div’); console.log(els.length); var newEl = document.createElement(‘div’); document.body.appendChild(newEl); console.log(els.length);
    38. 38. 반복의 제거
    39. 39. div P[0] P[1] P[2]
    40. 40. element.childNodes; children.nodeType == 1; VS element.children
    41. 41. 이런 사실들과 알고리즘등을 고려하면서 재작성
    42. 42. 이런 사실들과 알고리즘등을 고려하면서 재작성
    43. 43. Sizzle Mootools-slick bsSelector 함수개수 : 140 93 13 라인수 : 1,214 2,037 305 용량 : 60,335 37,935 13,485
    44. 44. 그 결과
    45. 45. Chrome
    46. 46. IE
    47. 47. 감사합니다. ProjectBS https://www.facebook.com/groups/bs5js/ github bsJS http://ligo.kr/i7 github bsSelector http://ligo.kr/o8
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×