PAEK, Seung-Hyun

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

projectBS

projectBSbsJS??

projectBSbsJS??

#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 en-

gine

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

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

ㅇㅇ ??

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

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

!!??(=_=);;;;

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

Selector processquery 의 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

getElementByIdgetElementsByTagName

getElementsByClass-Name

getElementsByNamequerySelectorAll

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,97317,559,67

819,073,48

5

ID TAG CLASS

124,963 126,480 106,504

1,091,549

222,199 210,918

2,020,367

321,119 339,747

쿼리 패턴별로각 메서드 성능을

정리한 뒤효율이 좋은 부분에 반영

jQuery

Sizzle

Mootools

bsSelector

0 500000 1000000 1500000 2000000 2500000

820424

1501379

1372821

2343437

Sizzle Benchmark

상황은 나아졌지만…

다음은 ???

JavaScript 는인터프리터 언어

인터프리터 ?

몇가지힌트를 통해 얻은

결론기계적인 접근

몇가지힌트를 통해 얻은

결론기계적인 접근

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

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

함수 호출을최소화

함수 호출을 최소화 한다

함수 호출을 최소화 한다

function Non function

16,830 54,080

49,063 49,436

51,524 52,066

캐쉬 활용

LinkedListgetElementsByTagName

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;

VSelement.children

이런 사실들을바탕으로 재작성

이런 사실들을바탕으로 재작성

Sizzle Mootools-slick

bsSelector

함수개수 140 93 13

라인수 1,214 2,037 305

용량 60,335 37,935 13,485

그 결과

Chrome

IE10

Sizzle

Mootools

bsSelector

0 2000000 4000000 6000000 8000000 10000000

3010190

2758557

9054979

1960305

1941198

7240460

with querySelectorAll

IE10 chrome

Sizzle

Mootools

bsSelector

0 2000000 4000000 6000000 8000000 10000000

3155191

2662334

9036840

2408144

1749609

8094011

without querySelectorAll

IE10 chrome

외제라고넘사벽은 아닙니다 .

국산도할 수 있어요 !!

감사합니다 .ProjectBS group

https://www.facebook.com/groups/bs5js/github bsJS

http://ligo.kr/i7github bsSelectorhttp://ligo.kr/o8