Submit Search
Upload
bsSelector (GDG DevFest 2014)
•
Download as PPTX, PDF
•
5 likes
•
1,129 views
Seung-Hyun PAEK
Follow
bsSelector 발표자료 (GDG DevFest 2014)
Read less
Read more
Software
Report
Share
Report
Share
1 of 75
Download now
Recommended
bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)
Seung-Hyun PAEK
bsSelector (OKJSP)
bsSelector (OKJSP)
Seung-Hyun PAEK
MySQL delete.update
MySQL delete.update
Hoyoung Jung
Nuevas estrategias de resucitación en el pac traumatizado grave 2014 med int
Nuevas estrategias de resucitación en el pac traumatizado grave 2014 med int
Leyla Reyes Vásquez
Digital rf who are we
Digital rf who are we
nikkimp
Ley
Ley
Leyla Reyes Vásquez
Trident at times auto expo 2012
Trident at times auto expo 2012
t4trident
Tics
Tics
alberto.duran02
Recommended
bsSelector.js(OctoberSky.js)
bsSelector.js(OctoberSky.js)
Seung-Hyun PAEK
bsSelector (OKJSP)
bsSelector (OKJSP)
Seung-Hyun PAEK
MySQL delete.update
MySQL delete.update
Hoyoung Jung
Nuevas estrategias de resucitación en el pac traumatizado grave 2014 med int
Nuevas estrategias de resucitación en el pac traumatizado grave 2014 med int
Leyla Reyes Vásquez
Digital rf who are we
Digital rf who are we
nikkimp
Ley
Ley
Leyla Reyes Vásquez
Trident at times auto expo 2012
Trident at times auto expo 2012
t4trident
Tics
Tics
alberto.duran02
Emsec video
Emsec video
nikkimp
2015 aha-guidelines-highlights-spanish-1
2015 aha-guidelines-highlights-spanish-1
Leyla Reyes Vásquez
2013 JCO tipJS.com JavaScript MVC framework
2013 JCO tipJS.com JavaScript MVC framework
Seung-Hyun PAEK
Digital rf who are we
Digital rf who are we
nikkimp
Nuevas estrategias de resucitación en el pac traumatizado grave 2014 med int
Nuevas estrategias de resucitación en el pac traumatizado grave 2014 med int
Leyla Reyes Vásquez
Impact Investing in Germany
Impact Investing in Germany
Laura Kromminga
JavaScript defer & async
JavaScript defer & async
Seung-Hyun PAEK
Project bs oss
Project bs oss
Seung-Hyun PAEK
R 프로그래밍을 이용한 야생동물 행동권(HR) 분석
R 프로그래밍을 이용한 야생동물 행동권(HR) 분석
Byeong-Hyeok Yu
Javascript
Javascript
Hong Hyo Sang
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
SangHoon Han
NDC11_김성익_슈퍼클래스
NDC11_김성익_슈퍼클래스
Sungik Kim
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
KTH, 케이티하이텔
채팅 소스부터 Https 주소까지
채팅 소스부터 Https 주소까지
Kenu, GwangNam Heo
First Step In Ajax Korean
First Step In Ajax Korean
Terry Cho
처음배우는 자바스크립트, 제이쿼리 #3
처음배우는 자바스크립트, 제이쿼리 #3
성일 한
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4
성일 한
3주 CSS Basic
3주 CSS Basic
지수 윤
Web_03_Front-end Advance
Web_03_Front-end Advance
team air @ Dimigo
[0312 조진현] good bye dx9
[0312 조진현] good bye dx9
진현 조
R project_pt1
R project_pt1
Joonho Lee
Mongo db 최범균
Mongo db 최범균
beom kyun choi
More Related Content
Viewers also liked
Emsec video
Emsec video
nikkimp
2015 aha-guidelines-highlights-spanish-1
2015 aha-guidelines-highlights-spanish-1
Leyla Reyes Vásquez
2013 JCO tipJS.com JavaScript MVC framework
2013 JCO tipJS.com JavaScript MVC framework
Seung-Hyun PAEK
Digital rf who are we
Digital rf who are we
nikkimp
Nuevas estrategias de resucitación en el pac traumatizado grave 2014 med int
Nuevas estrategias de resucitación en el pac traumatizado grave 2014 med int
Leyla Reyes Vásquez
Impact Investing in Germany
Impact Investing in Germany
Laura Kromminga
JavaScript defer & async
JavaScript defer & async
Seung-Hyun PAEK
Project bs oss
Project bs oss
Seung-Hyun PAEK
Viewers also liked
(8)
Emsec video
Emsec video
2015 aha-guidelines-highlights-spanish-1
2015 aha-guidelines-highlights-spanish-1
2013 JCO tipJS.com JavaScript MVC framework
2013 JCO tipJS.com JavaScript MVC framework
Digital rf who are we
Digital rf who are we
Nuevas estrategias de resucitación en el pac traumatizado grave 2014 med int
Nuevas estrategias de resucitación en el pac traumatizado grave 2014 med int
Impact Investing in Germany
Impact Investing in Germany
JavaScript defer & async
JavaScript defer & async
Project bs oss
Project bs oss
Similar to bsSelector (GDG DevFest 2014)
R 프로그래밍을 이용한 야생동물 행동권(HR) 분석
R 프로그래밍을 이용한 야생동물 행동권(HR) 분석
Byeong-Hyeok Yu
Javascript
Javascript
Hong Hyo Sang
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
SangHoon Han
NDC11_김성익_슈퍼클래스
NDC11_김성익_슈퍼클래스
Sungik Kim
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
KTH, 케이티하이텔
채팅 소스부터 Https 주소까지
채팅 소스부터 Https 주소까지
Kenu, GwangNam Heo
First Step In Ajax Korean
First Step In Ajax Korean
Terry Cho
처음배우는 자바스크립트, 제이쿼리 #3
처음배우는 자바스크립트, 제이쿼리 #3
성일 한
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4
성일 한
3주 CSS Basic
3주 CSS Basic
지수 윤
Web_03_Front-end Advance
Web_03_Front-end Advance
team air @ Dimigo
[0312 조진현] good bye dx9
[0312 조진현] good bye dx9
진현 조
R project_pt1
R project_pt1
Joonho Lee
Mongo db 최범균
Mongo db 최범균
beom kyun choi
Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신
Circulus
TABLE ACCESS 패턴을 이용한 SQL 튜닝_Wh oracle
TABLE ACCESS 패턴을 이용한 SQL 튜닝_Wh oracle
엑셈
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
JeongHun Byeon
사례를 통해 살펴보는 프로파일링과 최적화 NDC2013
사례를 통해 살펴보는 프로파일링과 최적화 NDC2013
Esun Kim
Node.js at OKJSP
Node.js at OKJSP
JeongHun Byeon
EcmaScript6(2015) Overview
EcmaScript6(2015) Overview
yongwoo Jeon
Similar to bsSelector (GDG DevFest 2014)
(20)
R 프로그래밍을 이용한 야생동물 행동권(HR) 분석
R 프로그래밍을 이용한 야생동물 행동권(HR) 분석
Javascript
Javascript
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
ASP.NET MVC Framework 개발자를 위한 Razor Syntax.pdf
NDC11_김성익_슈퍼클래스
NDC11_김성익_슈퍼클래스
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
KTH_Detail day_화성에서 온 개발자 금성에서 온 기획자 시리즈_5차_데이터분석_조범석_20120613
채팅 소스부터 Https 주소까지
채팅 소스부터 Https 주소까지
First Step In Ajax Korean
First Step In Ajax Korean
처음배우는 자바스크립트, 제이쿼리 #3
처음배우는 자바스크립트, 제이쿼리 #3
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4
3주 CSS Basic
3주 CSS Basic
Web_03_Front-end Advance
Web_03_Front-end Advance
[0312 조진현] good bye dx9
[0312 조진현] good bye dx9
R project_pt1
R project_pt1
Mongo db 최범균
Mongo db 최범균
Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신
TABLE ACCESS 패턴을 이용한 SQL 튜닝_Wh oracle
TABLE ACCESS 패턴을 이용한 SQL 튜닝_Wh oracle
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
사례를 통해 살펴보는 프로파일링과 최적화 NDC2013
사례를 통해 살펴보는 프로파일링과 최적화 NDC2013
Node.js at OKJSP
Node.js at OKJSP
EcmaScript6(2015) Overview
EcmaScript6(2015) Overview
bsSelector (GDG DevFest 2014)
1.
2.
PAEK, Seung-Hyun - ProjectBS
재배하는 농부(committer) - SHOU Communications 근무 - 웹개발자(JavaScript 사랑함)
3.
projectBS
4.
projectBS bsJS??
5.
projectBS bsJS??
6.
#domID 요소의 1. 모서리를
둥글게 2. 넓이를 지정 3. 글자색을 지정 4. Click event 설정 5. 글자색 취득
7.
bsJS var color =
$('#domID').css( { 'borderRadius' : 5, ‘color’ : ‘#fff’ } ) .attr('width', 100) .click(function(){alert(1)}) .css('color'); console.log(color) // "#fff"
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"
9.
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회
10.
Selector engine 왜 만들게 되었나?
11.
bsJS의 Selector engine
12.
13.
bsJS 에 독자 적인
셀렉터를 갖고싶은데..
14.
bsJS 에 독자 적인
셀렉터를 갖고싶은데.. ㅇㅇ??
15.
승현이 니가 만들면 되겠네 ~!!
16.
승현이 니가 만들면 되겠네 ~!! !!?? (=_=);;;;
17.
18.
Selector process query의 tokenizer 요소
선택 요소 순환 요소 판정 결과 반환
19.
Selector process query의 tokenizer 요소
선택 요소 순환 요소 판정 결과 반환
20.
Selector process query의 tokenizer 요소
선택 요소 순환 요소 판정 결과 반환
21.
Selector process query의 tokenizer 요소
선택 요소 순환 요소 판정 결과 반환
22.
Selector process query의 tokenizer 요소
선택 요소 순환 요소 판정 결과 반환
23.
Selector process query의 tokenizer 요소
선택 요소 순환 요소 판정 결과 반환
24.
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('*');
25.
26.
CSS2 spec 은 기본아냐?
27.
CSS2 spec 은 기본아냐? ㅇㅇ~
28.
29.
CSS3 spec 도 하는김에
하지?
30.
CSS3 spec 도 하는김에
하지? 으..으응..;;;
31.
32.
CSS4 spec 이 새로
나왔던데?
33.
CSS4 spec 이 새로
나왔던데? 뭐?? (이 **야)
34.
일단 완성 성능이 궁금하다!!
35.
일단 완성 성능이 궁금하다!!
36.
Sizzle speed
37.
38.
jsPerf.com
39.
getElementById getElementsByTagName getElementsByClassName getElementsByName querySelectorAll
40.
41.
42.
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
43.
44.
ID TAG CLASS 124,963
126,480 106,504 1,091,549 222,199 210,918 2,020,367 321,119 339,747
45.
쿼리 패턴별로 각 메서드
성능을 정리한 뒤 효율이 좋은 부분에 반영
46.
820424 1501379 1372821 2343437 0 500000 1000000
1500000 2000000 2500000 jQuery Sizzle Mootools bsSelector Sizzle Benchmark
47.
48.
상황은 나아졌지만 … 다음은???
49.
JavaScript는 인터프리터 언어
50.
인터프리터?
51.
52.
몇가지 힌트를 통해 얻은 결론 기계적인
접근
53.
몇가지 힌트를 통해 얻은 결론 기계적인
접근
54.
기계적인 접근?? JavaScript 엔진이 하는일을
줄이는것
55.
기계적인 접근?? JavaScript 엔진이 하는일을
줄이는것
56.
함수 호출을 최소화
57.
함수 호출을 최소화
한다
58.
함수 호출을 최소화
한다 function Non function 16,830 54,080 49,063 49,436 51,524 52,066
59.
캐쉬 활용
60.
LinkedList getElementsByTagName getElementsByClassName
61.
var els =
document.getElementsByTagName(‘div’); Console.log(els.length); // 1 var newEl = document.createElement(‘div’); document.body.appendChild(newEl); console.log(els.length); // 2
62.
반복의 제거
63.
div P[0] P[1] P[2] ‘p:last-child’
64.
새로운 DOM 속성 활용
65.
element.childNodes; children.nodeType == 1; VS element.children
66.
이런 사실들을 바탕으로 재작성
67.
이런 사실들을 바탕으로 재작성
68.
Sizzle Mootools-slick bsSelector 함수개수
140 93 13 라인수 1,214 2,037 305 용량 60,335 37,935 13,485
69.
그 결과
70.
Chrome
71.
IE10
72.
3010190 2758557 9054979 1960305 1941198 7240460 0 2000000 4000000
6000000 8000000 10000000 Sizzle Mootools bsSelector with querySelectorAll IE10 chrome
73.
3155191 2662334 9036840 2408144 1749609 8094011 0 2000000 4000000
6000000 8000000 10000000 Sizzle Mootools bsSelector without querySelectorAll IE10 chrome
74.
외제라고 넘사벽은 아닙니다. 국산도 할 수
있어요!!
75.
감사합니다. ProjectBS group https://www.facebook.com/groups/bs5js/ github bsJS http://ligo.kr/i7 github
bsSelector http://ligo.kr/o8
Editor's Notes
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
Download now