bsSelector (GDG DevFest 2014)

980 views

Published on

bsSelector 발표자료 (GDG DevFest 2014)

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

No Downloads
Views
Total views
980
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
5
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
  • bsSelector (GDG DevFest 2014)

    1. 1. PAEK, Seung-Hyun - ProjectBS 재배하는 농부(committer) - SHOU Communications 근무 - 웹개발자(JavaScript 사랑함)
    2. 2. projectBS
    3. 3. projectBS bsJS??
    4. 4. projectBS bsJS??
    5. 5. #domID 요소의 1. 모서리를 둥글게 2. 넓이를 지정 3. 글자색을 지정 4. Click event 설정 5. 글자색 취득
    6. 6. bsJS var color = $('#domID').css( { 'borderRadius' : 5, ‘color’ : ‘#fff’ } ) .attr('width', 100) .click(function(){alert(1)}) .css('color'); console.log(color) // "#fff"
    7. 7. bsJS var color = $('#domID').css( { 'borderRadius' : 5, ‘color’ : ‘#fff’ } ) .attr('width', 100) .click(function(){alert(1)}) .css('color'); console.log(color) // "#fff" var color = bs.Dom('#domID') .S('border-radius', 5, '@width', 100, ‘click’, function(){alert(1)}, ’color', '#fff'); console.log(color) // "#fff"
    8. 8. bsJS var color = $('#domID').css( { 'borderRadius' : 5, ‘color’ : ‘#fff’ } ) .attr('width', 100) .click(function(){alert(1)}) .css('color'); console.log(color) // "#fff" var color = bs.Dom('#domID') .S('border-radius', 5, '@width', 100, ‘click’, function(){alert(1)}, ’color', '#fff'); console.log(color) // "#fff" 호스트코드: 110 byte 오브젝트 생성: O 함수호출: 4회 호스트코드: 94 byte 오브젝트 생성: X 함수호출: 1회
    9. 9. Selector engine 왜 만들게 되었나?
    10. 10. bsJS의 Selector engine
    11. 11. bsJS 에 독자 적인 셀렉터를 갖고싶은데..
    12. 12. bsJS 에 독자 적인 셀렉터를 갖고싶은데.. ㅇㅇ??
    13. 13. 승현이 니가 만들면 되겠네 ~!!
    14. 14. 승현이 니가 만들면 되겠네 ~!! !!?? (=_=);;;;
    15. 15. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    16. 16. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    17. 17. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    18. 18. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    19. 19. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    20. 20. Selector process query의 tokenizer 요소 선택 요소 순환 요소 판정 결과 반환
    21. 21. query = 'ul.toc li.tocline2‘; tokens = ['ul', '.toc', ' ', 'li', ‘.tocline2‘]; if(tokens[i].charAt(0) == '#') document.getElementById(tokens[i].substr(1)); else if(tokens[i].charAt(0) == '.') document.getElementByClassName(tokens[i].substr(1)); else document.getElementsByTagName('*');
    22. 22. CSS2 spec 은 기본아냐?
    23. 23. CSS2 spec 은 기본아냐? ㅇㅇ~
    24. 24. CSS3 spec 도 하는김에 하지?
    25. 25. CSS3 spec 도 하는김에 하지? 으..으응..;;;
    26. 26. CSS4 spec 이 새로 나왔던데?
    27. 27. CSS4 spec 이 새로 나왔던데? 뭐?? (이 **야)
    28. 28. 일단 완성 성능이 궁금하다!!
    29. 29. 일단 완성 성능이 궁금하다!!
    30. 30. Sizzle speed
    31. 31. jsPerf.com
    32. 32. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelectorAll
    33. 33. 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
    34. 34. ID TAG CLASS 124,963 126,480 106,504 1,091,549 222,199 210,918 2,020,367 321,119 339,747
    35. 35. 쿼리 패턴별로 각 메서드 성능을 정리한 뒤 효율이 좋은 부분에 반영
    36. 36. 820424 1501379 1372821 2343437 0 500000 1000000 1500000 2000000 2500000 jQuery Sizzle Mootools bsSelector Sizzle Benchmark
    37. 37. 상황은 나아졌지만 … 다음은???
    38. 38. JavaScript는 인터프리터 언어
    39. 39. 인터프리터?
    40. 40. 몇가지 힌트를 통해 얻은 결론 기계적인 접근
    41. 41. 몇가지 힌트를 통해 얻은 결론 기계적인 접근
    42. 42. 기계적인 접근?? JavaScript 엔진이 하는일을 줄이는것
    43. 43. 기계적인 접근?? JavaScript 엔진이 하는일을 줄이는것
    44. 44. 함수 호출을 최소화
    45. 45. 함수 호출을 최소화 한다
    46. 46. 함수 호출을 최소화 한다 function Non function 16,830 54,080 49,063 49,436 51,524 52,066
    47. 47. 캐쉬 활용
    48. 48. LinkedList getElementsByTagName getElementsByClassName
    49. 49. var els = document.getElementsByTagName(‘div’); Console.log(els.length); // 1 var newEl = document.createElement(‘div’); document.body.appendChild(newEl); console.log(els.length); // 2
    50. 50. 반복의 제거
    51. 51. div P[0] P[1] P[2] ‘p:last-child’
    52. 52. 새로운 DOM 속성 활용
    53. 53. element.childNodes; children.nodeType == 1; VS element.children
    54. 54. 이런 사실들을 바탕으로 재작성
    55. 55. 이런 사실들을 바탕으로 재작성
    56. 56. Sizzle Mootools-slick bsSelector 함수개수 140 93 13 라인수 1,214 2,037 305 용량 60,335 37,935 13,485
    57. 57. 그 결과
    58. 58. Chrome
    59. 59. IE10
    60. 60. 3010190 2758557 9054979 1960305 1941198 7240460 0 2000000 4000000 6000000 8000000 10000000 Sizzle Mootools bsSelector with querySelectorAll IE10 chrome
    61. 61. 3155191 2662334 9036840 2408144 1749609 8094011 0 2000000 4000000 6000000 8000000 10000000 Sizzle Mootools bsSelector without querySelectorAll IE10 chrome
    62. 62. 외제라고 넘사벽은 아닙니다. 국산도 할 수 있어요!!
    63. 63. 감사합니다. ProjectBS group https://www.facebook.com/groups/bs5js/ github bsJS http://ligo.kr/i7 github bsSelector http://ligo.kr/o8

    ×