DOM Selecting &

jQuery

By 김훈민
NHN Technology Services Corp.
Front-End Development Team
http://huns.me
 Huns.me
http://huns.me

DOM API
Document Object Model
JavaScript & DOM

Webkit & Webkit2

(Embedding API)

Bindings
(JS API, Objective-C API)

Web Core
(HTML, CSS, DOM, ETC)
JavaScript Core
(JS Engine)
Platform
(Network, Storage, Graphic)

WTF
(Data Structures, Threading)
DOM API

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

http://www.w3.org/DOM/DOMTR
DOM Level 1 – 1998.10.1

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

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

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

http://www.w3.org/TR/2000/REC-DOM-Level-2-
Core-20001113/core.html
DOM Level 4 – 2014.02.04(working draft)

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

http://www.w3.org/TR/2014/WD-dom-
20140204/
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 API
querySelector, querySelectorAll
Selector…?

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

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

ul { … } type selector

#huns { … } id selector

h1[title] { … } attribute selector

.huns-class { … } class selector

*{…} universal selector

Compound selector

ul li #huns { … }
Complex selector

Combinator

ul > li #huns { … }
Selector…?

?
ul li > input[type=‘text’]
Selectors API
/**
* @name querySelector
* @param { DOMString selectors }
* @return { Element }
*/

http://www.w3.org/TR/selectors-api2/
Selectors API
/*
* @name querySelectorAll
* @param { DOMString selectors }
* @return { NodeList }
*/

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

DOM4에 포함될 예정

http://www.w3.org/TR/selectors-api2/
Selectors API
Performance
Searching, Parsing
Style rules

HTML DOM
Parser Tree

ID
Attachement

CLASS
CSS Style
Parser Rule
TYPE(TAG)

UNIVERSAL
Style rules

ID • #huns
ClASS • .classname
TYPE(TAG) • ul
UNIVERSAL • *
Key Selectors

• #main-navigation { }
• body.home #page-wrap { }
• .main-navigation { }
• ul li a.current { }
• ul { }
• ul li a { }
• *{}
• #content[title='home']
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
getElementsByTagName

V
S querySelectorAll
getElementsByTagName vs querySelectorAll

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

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.c
pp
var HTMLCollection = document.getElementsByTagName("div");

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

HTMLCollection[N]
document.body.appendChild( document.createElement( "div" ) );

Infinite Loop
querySelectorAll

Query Parsing Time

StaticNodeList

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

https://github.com/isis-
project/WebKit/blob/master/Source/WebCore/css/StyleResolver.cpp
var nodeList = document.querySelectorAll("div");

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

NodeList[N]
document.body.appendChild( document.createElement( "div" ) );

}
createSelectorNodeList

http://trac.webkit.org/browser/trunk/WebCore/do
m/SelectorNodeList.cpp?rev=41093#L61
return StaticNodeList::adopt(nodes);
Native vs jQuery

jQuery Selector
In jQuery selector

$( “#first” ) getElementById

$( “li” ) getElementsByTagName

$( “.classname” ) getElementsByClassName

$( “ul li:first-child” ) querySelectorAll

Native

V
S jQuery
Native vs jQuery Performance

getElementById(“#lg_link_msg”)

querySelector(“#lg_link_msg” )

$( “#lg_link_msg” )
Native vs jQuery Performance

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

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”).first();

$( “ul li:last-child”) $( “ul li”).last();

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

$( “ul li:first-child”)

V
S $( “ul li”).first()
:first-child vs .first()

<ul>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
.
. x1
. x 500
</ul>
x 1000
:first-child vs .first() x 1
:first-child vs .first() x 500
:first-child vs .first() x 1000

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

엘리먼트 수가 적다면,
:first-child <= .first()
$( “ul li:last-child”)

V
S $( “ul li”).last()
:last-child vs .last() x 1
:last-child vs .last() x 500
:last-child vs .last() x 1000

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

엘리먼트 수가 적다면,
:last-child <= .last()
$( “ul li:nth-child(N)”)

V
S $( “ul li”).eq(N)
jQuery.eq(N)

$( … ).eq(N)는…

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

:nth-child vs eq() x 1
:nth-child vs eq() x 500
:nth-child vs eq() x 1000

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

엘리먼트 수가 적다면,
:nth-child <= .eq()
.
.
크롬은 예외
 :first-child

V :nth-child(1)

S .eq(0)
: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.