PAEK, Seung-Hyun
- ProjectBS 재배하는 농부(committer)
- SHOU Communications 근무
- 웹개발자(JavaScript 사랑함)

projectBS

projectBS
bsJS??

projectBS
bsJS??

#domID 요소의
1. 모서리를 둥글게
2. 넓이를 지정
3. 글자색을 지정
4. Click event 설정
5. 글자색 취득

bsJS
var color = $('#domID').css( {
'borderRadius' : 5,
‘color’ : ‘#fff’
} )
.attr('width', 100)
.click(function(){alert(1)})
.css('color');
console.log(color) // "#fff"

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"

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회

Selector engine
왜 만들게
되었나?

bsJS의
Selector engine

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

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

승현이 니가
만들면 되겠네
~!!

승현이 니가
만들면 되겠네
~!!
!!??
(=_=);;;;

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.getElementById(tokens[i].substr(1));
else if(tokens[i].charAt(0) == '.')
document.getElementByClassName(tokens[i].substr(1));
else
document.getElementsByTagName('*');

CSS2 spec 은
기본아냐?

CSS2 spec 은
기본아냐?
ㅇㅇ~

CSS3 spec 도
하는김에 하지?

CSS3 spec 도
하는김에 하지?
으..으응..;;;

CSS4 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 17,559,678 19,073,485

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

쿼리 패턴별로
각 메서드 성능을
정리한 뒤
효율이 좋은 부분에 반영

820424
1501379
1372821
2343437
0 500000 1000000 1500000 2000000 2500000
jQuery
Sizzle
Mootools
bsSelector
Sizzle Benchmark

상황은 나아졌지만
…
다음은???

JavaScript는
인터프리터 언어

인터프리터?

몇가지
힌트를 통해 얻은
결론
기계적인 접근

몇가지
힌트를 통해 얻은
결론
기계적인 접근

기계적인 접근??
JavaScript 엔진이
하는일을 줄이는것

기계적인 접근??
JavaScript 엔진이
하는일을 줄이는것

함수 호출을
최소화

함수 호출을 최소화 한다

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

캐쉬 활용

LinkedList
getElementsByTagName
getElementsByClassName

var els = document.getElementsByTagName(‘div’);
Console.log(els.length); // 1
var newEl = document.createElement(‘div’);
document.body.appendChild(newEl);
console.log(els.length); // 2

반복의 제거

div
P[0] P[1] P[2]
‘p:last-child’

새로운
DOM 속성 활용

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

IE10

3010190
2758557
9054979
1960305
1941198
7240460
0 2000000 4000000 6000000 8000000 10000000
Sizzle
Mootools
bsSelector
with querySelectorAll
IE10 chrome

3155191
2662334
9036840
2408144
1749609
8094011
0 2000000 4000000 6000000 8000000 10000000
Sizzle
Mootools
bsSelector
without querySelectorAll
IE10 chrome

외제라고
넘사벽은 아닙니다.
국산도
할 수 있어요!!

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