This document discusses DOM selection and jQuery. It begins by explaining the DOM API and its levels. It then covers DOM selection methods like getElementById and querySelectorAll. It finds getElementById is typically fastest. The document also discusses CSS selectors and structural pseudo-classes. It shows querySelectorAll generally outperforms getElementsByTagName. Finally, it compares jQuery selector performance to native methods, finding native often faster, especially for structural pseudo-classes like :first-child versus jQuery's .first() method.

1. DOM Selecting &
jQuery
By 김훈민
NHN Technology Services Corp.
Front-End Development Team
http://huns.me

2. DOM API
Document Object Model
Huns.me
http://huns.me

3. 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)

4. • DOM Level 1 ~ 3
• DOM Level 4(Working Draft)
DOM API
http://www.w3.org/DOM/DOMTR

5. 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 }
*/

6. 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 }
*/

7. DOM Level 4 – 2014.02.04(working draft)
http://www.w3.org/TR/2014/WD-dom-
20140204/
/*
* @name getElementsByClassName
* @param { DOMString elementId }
* @returns { NodeList }
*/

8. Which one is
the fastest?

9. 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];

10. DOM API Performance Benchmark
http://jsperf.com/dom-api-performance-test

11. 사용 목적이 다르고,
DOM 복잡도에 따라서 성능이
달라질 수 있기 때문에
단순 비교는 무의미
어쨌든,
getElementById가 가장 빠르다.

12. Selectors API
querySelector, querySelectorAll

13. Selector…?
ul li > input[type=‘text’] {
color : red
}
http://www.w3.org/TR/2013/WD-selectors4-20130502
ul li > input[type=‘text’] {
color : red
}

14. Simple Selector
ul { … }
#huns { … }
h1[title] { … }
.huns-class { … }
* { … }
type selector
id selector
attribute selector
class selector
universal selector

15. Compound selector
ul li #huns { … }

16. Complex selector
ul > li #huns { … }
Combinator

17. Selector…?
ul li > input[type=‘text’]
?

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

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

20. Selectors API
http://www.w3.org/TR/selectors-api2/
DOM4에 포함될 예정

21. Selectors API
Performance
Searching, Parsing

22. Style rules
Style
Rule
CSS
Parser
DOM
Tree
HTML
Parser
Attachement
ID
CLASS
TYPE(TAG)
UNIVERSAL

23. Style rules
• #huns
• .classname
• ul
• *
ID
ClASS
TYPE(TAG)
UNIVERSAL

24. • #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

25. Selectors API performance
일반적으로 Key Selector를
기준으로 봤을 때,
ID > CLASS > TAG > UNIVERSAL
순으로 빠르다.

26. Right to Left
section .contents #name {
…
}
#name

27. <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” )

28. Right to Left Test
http://jsperf.com/decendent-test

29. <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” )

30. Right to Left Test
http://jsperf.com/right-to-left-css-parsing-test2/3

31. querySelectorAll
getElementsByTagName
V
S

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

33. 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

34. var HTMLCollection = document.getElementsByTagName("div");
for(var i = 0; i < HTMLCollection.length; i++){
document.body.appendChild( document.createElement( "div" ) );
}
HTMLCollection[N]
Infinite Loop

35. 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

36. var nodeList = document.querySelectorAll("div");
for(var i = 0; i < nodeList .length; i++){
document.body.appendChild( document.createElement( "div" ) );
}
NodeList[N]

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

38. jQuery Selector
Native vs jQuery

39. In jQuery selector
$( “#first” )
$( “li” )
$( “.classname” )
$( “ul li:first-child” )
getElementById
getElementsByTagName
getElementsByClassName
querySelectorAll

40. jQuery
Native
V
S

41. Native vs jQuery Performance
getElementById(“#lg_link_msg”)
querySelector(“#lg_link_msg” )
$( “#lg_link_msg” )

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

43. Native
Native vs jQuery Performance
>Native jQuery

44. Structural
Pseudo Classes
&
jQuery
구조 가상 클래스

45. Structural Pseudo Classes…?
:first-child
:last-child
:nth-child
:only-child
:empty
.
.
구조 가상 클래스

46. 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);

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

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

49. :first-child vs .first() x 1

50. :first-child vs .first() x 500

51. :first-child vs .first() x 1000
일반적으로,
:first-child > .first()
엘리먼트 수가 적다면,
:first-child <= .first()

52. $( “ul li”).last()
$( “ul li:last-child”)
V
S

53. :last-child vs .last() x 1

54. :last-child vs .last() x 500

55. 일반적으로,
:last-child > .last()
엘리먼트 수가 적다면,
:last-child <= .last()
:last-child vs .last() x 1000

56. $( “ul li”).eq(N)
$( “ul li:nth-child(N)”)
V
S

57. jQuery.eq(N)
$( … ).eq(N)는…
$( … )[N] 와 비슷한 성능을 보임

58. :nth-child vs eq() x 1

59. :nth-child vs eq() x 500

60. :nth-child vs eq() x 1000
크롬은 예외
일반적으로,
:nth-child > .eq()
엘리먼트 수가 적다면,
:nth-child <= .eq()
.
.

61. :first-child
:nth-child(1)
.eq(0)
V
S

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

63. Why
chrome’s
nth-child rule
is
too slow?

65. Sorry,
I don’t know.
I’ll be back.

66. Thanks.