Dom selecting & jQuery

DOM Selecting & jQuery

By 김훈민NHN Technology Services Corp.

Front-End Development Teamhttp://huns.me

http://huns.me/

DOM APIDocument Object Model

Huns.mehttp://huns.me

http://huns.me/

JavaScript & DOM

Webkit & Webkit2(Embedding API)

Bindings(JS API, Objective-C API)

Web Core(HTML, CSS, DOM, ETC)

Platform(Network, Storage,

Graphic)WTF

(Data Structures, Threading)

JavaScript Core(JS Engine)

• DOM Level 1 ~ 3• DOM Level 4(Working Draft)

DOM API

http://www.w3.org/DOM/DOMTR

http://www.w3.org/DOM/DOMTR

DOM Level 1 – 1998.10.1

http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html

/** * @name getElementsByTagName * @param { DOMString name } * @returns { NodeList } */



DOM Level 2 – 2000.11.13

http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html

/* * @name getElementById * @param { DOMString elementId } * @return { Element } */



DOM Level 4 – 2014.02.04(working draft)

http://www.w3.org/TR/2014/WD-dom-20140204/

/* * @name getElementsByClassName * @param { DOMString elementId } * @returns { NodeList } */



Which one is the fastest?

DOM API Performance Test

<ul> <li> <label>What's your name?</label> <input id="inputBox" type="text" value="Huns"> </li></ul>

getElementById("inputBox");getElementsByClassName("input-box")[0];getElementsByTagName("input")[0];

DOM API Performance Benchmark

http://jsperf.com/dom-api-performance-test



사용 목적이 다르고 ,DOM 복잡도에 따라서 성능이 달라질 수 있기 때문에 단순 비교는 무의미

어쨌든 , getElementById 가 가장 빠르다 .

Selectors APIquerySelector, querySelectorAll

Selector…?

ul li > input[type=‘text’] { color : red}

http://www.w3.org/TR/2013/WD-selectors4-20130502

ul li > input[type=‘text’] { color : red}



Simple Selector

ul { … }

#huns { … }

h1[title] { … }

.huns-class { … }

* { … }

type selector

id selector

attribute selector

class selector

universal selector

Compound selector

ul li #huns { … }

Complex selector

ul > li #huns { … }

Combinator

Selector…?

ul li > input[type=‘text’]?

Selectors API

http://www.w3.org/TR/selectors-api2/

/** * @name querySelector * @param { DOMString selectors } * @return { Element } */


Selectors API


/* * @name querySelectorAll * @param { DOMString selectors } * @return { NodeList } */


Selectors API


DOM4 에 포함될 예정


Selectors API Performance

Searching, Parsing

Style rules

Style Rule

CSS Parser

DOM Tree

HTMLParser

AttachementID

CLASS

TYPE(TAG)

UNIVERSAL

Style rules

• #huns

• .classname

• ul

• *

ID

ClASS

TYPE(TAG)

UNIVERSAL

• #main-navigation { } • body.home #page-wrap { }• .main-navigation { } • ul li a.current { } • ul { } • ul li a { } • * { } • #content[title='home']

• #main-navigation { } • body.home #page-wrap { }• .main-navigation { } • ul li a.current { } • ul { } • ul li a { } • * { } • #content[title='home']

Key Selectors

Selectors API performance

일반적으로 Key Selector 를 기준으로 봤을 때 ,

ID > CLASS > TAG > UNIVERSAL

순으로 빠르다 .

Right to Left

section .contents #name { … }

#name

<div class="contents"> <ul> <li> <span id="name"></span> </li> </ul></div>

querySelectorAll

1. ( “#name” )2. ( “div.contents #name”)3. ( “div.contents li #name” )4. ( “div.contents ul li #name”

)

Right to Left Test

http://jsperf.com/decendent-test



<div class="contents"> <ul> <li> <span id="name"></span> </li> </ul></div>

querySelectorAll

1. ( “#name” )2. ( “div.contents ul li > #name”)3. ( “div.contents ul > li >

#name” )

Right to Left Test

http://jsperf.com/right-to-left-css-parsing-test2/3



querySelectorAll

getElementsByTagName

VS

getElementsByTagName vs querySelectorAll

http://jsperf.com/queryselectorall-vs-getelementsby





DynamicNodeList

http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177

https://github.com/isis-project/WebKit/blob/master/Source/WebCore/dom/DynamicNodeList.cpp






var HTMLCollection = document.getElementsByTagName("div");

for(var i = 0; i < HTMLCollection.length; i++){

document.body.appendChild( document.createElement( "div" ) );

}

HTMLCollection[N]

Infinite Loop

querySelectorAll

Query Parsing Time

http://www.w3.org/TR/selectors-api2/#findelements

https://github.com/isis-project/WebKit/blob/master/Source/WebCore/css/StyleResolver.cpp

StaticNodeList







var nodeList = document.querySelectorAll("div");

for(var i = 0; i < nodeList .length; i++){

document.body.appendChild( document.createElement( "div" ) );

}

NodeList[N]

createSelectorNodeList

http://trac.webkit.org/browser/trunk/WebCore/dom/SelectorNodeList.cpp?rev=41093#L61return StaticNodeList::adopt(node

s);

http://trac.webkit.org/browser/trunk/WebCore/dom/SelectorNodeList.cpp?rev=41093#L61



jQuery Selector

Native vs jQuery

In jQuery selector

$( “#first” )

$( “li” )

$( “.classname” )

$( “ul li:first-child” )

getElementById


getElementsByClassName

querySelectorAll

jQuery

Native

VS

Native vs jQuery Performance

getElementById(“#lg_link_msg”)

querySelector(“#lg_link_msg” )

$( “#lg_link_msg” )


http://jsperf.com/id-class-tag-universal-performance-test-on-naver-main




Native


>Native

jQuery

Structural Pseudo Classes & jQuery

구조 가상 클래스

Structural Pseudo Classes…?

:first-child:last-child:nth-child:only-child

:empty..

구조 가상 클래스

jQuery Method Support

$( “ul li:first-child”)

$( “ul li:last-child”)

$( “ul li:nth-child(N)”)

$( “ul li”).first();

$( “ul li”).last();

$( “ul li”).eq(N);

$( “ul li”).first()

$( “ul li:first-child”)

VS

:first-child vs .first()

<ul> <li>Hello World</li> <li>Hello World</li> <li>Hello World</li> . . .</ul>

x 1x 500x 1000

:first-child vs .first() x 1



일반적으로 ,:first-child > .first()

엘리먼트 수가 적다면 ,:first-child <= .first()

$( “ul li”).last()

$( “ul li:last-child”)

VS

:last-child vs .last() x 1


일반적으로 ,:last-child > .last()

엘리먼트 수가 적다면 ,:last-child <= .last()


$( “ul li”).eq(N)

$( “ul li:nth-child(N)”)

VS

jQuery.eq(N)

$( … ).eq(N) 는…

$( … )[N] 와 비슷한 성능을 보임

:nth-child vs eq() x 1



크롬은 예외

일반적으로 ,:nth-child > .eq()

엘리먼트 수가 적다면 ,:nth-child <= .eq()

.

.

:first-child

:nth-child(1)

.eq(0)

VS

:nth-child vs :first-child vs .eq()

Why chrome’s

nth-child rule is

too slow?

Sorry,I don’t know.

I’ll be back.

Thanks.

Software

Dom selecting & jQuery