Your SlideShare is downloading. ×
0
DOM Selecting &
jQuery
By 김훈민
NHN Technology Services Corp.
Front-End Development Team
http://huns.me
DOM API
Document Object Model
Huns.me
http://huns.me
JavaScript & DOM
Webkit & Webkit2
(Embedding API)
Bindings
(JS API, Objective-C API)
Web Core
(HTML, CSS, DOM, ETC)
Platfo...
• DOM Level 1 ~ 3
• DOM Level 4(Working Draft)
DOM API
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 getElementsByT...
DOM Level 2 – 2000.11.13
http://www.w3.org/TR/2000/REC-DOM-Level-2-
Core-20001113/core.html
/*
* @name getElementById
* @p...
DOM Level 4 – 2014.02.04(working draft)
http://www.w3.org/TR/2014/WD-dom-
20140204/
/*
* @name getElementsByClassName
* @p...
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>
<...
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
ul li > input[type=...
Simple Selector
ul { … }
#huns { … }
h1[title] { … }
.huns-class { … }
* { … }
type selector
id selector
attribute selecto...
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 { ...
Selectors API
http://www.w3.org/TR/selectors-api2/
/*
* @name querySelectorAll
* @param { DOMString selectors }
* @return ...
Selectors API
http://www.w3.org/TR/selectors-api2/
DOM4에 포함될 예정
Selectors API
Performance
Searching, Parsing
Style rules
Style
Rule
CSS
Parser
DOM
Tree
HTML
Parser
Attachement
ID
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 { }
• * ...
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.cont...
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.cont...
Right to Left Test
http://jsperf.com/right-to-left-css-parsing-test2/3
querySelectorAll
getElementsByTagName
V
S
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-...
var HTMLCollection = document.getElementsByTagName("div");
for(var i = 0; i < HTMLCollection.length; i++){
document.body.a...
querySelectorAll
Query Parsing Time
http://www.w3.org/TR/selectors-api2/#findelements
https://github.com/isis-
project/Web...
var nodeList = document.querySelectorAll("div");
for(var i = 0; i < nodeList .length; i++){
document.body.appendChild( doc...
createSelectorNodeList
http://trac.webkit.org/browser/trunk/WebCore/do
m/SelectorNodeList.cpp?rev=41093#L61
return StaticN...
jQuery Selector
Native vs jQuery
In jQuery selector
$( “#first” )
$( “li” )
$( “.classname” )
$( “ul li:first-child” )
getElementById
getElementsByTagName
...
jQuery
Native
V
S
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
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:last-child”)
$( “ul li:nth-child(N)”)
$( “ul li”).first();
$( “ul ...
$( “ul li”).first()
$( “ul li:first-child”)
V
S
:first-child vs .first()
<ul>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
.
.
.
</ul>
x 1
x 500
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()
$( “ul li:last-child”)
V
S
:last-child vs .last() x 1
:last-child vs .last() x 500
일반적으로,
:last-child > .last()
엘리먼트 수가 적다면,
:last-child <= .last()
:last-child vs .last() x 1000
$( “ul li”).eq(N)
$( “ul li:nth-child(N)”)
V
S
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
:nth-child(1)
.eq(0)
V
S
: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.
Dom selecting & jQuery
Upcoming SlideShare
Loading in...5
×

Dom selecting & jQuery

1,104

Published on

Dom, Selectors API and jQuery Performance.

Published in: Software, Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,104
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
58
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • getElementByIdgetElementsByTagNamegetElementsByClassName
  • Transcript of "Dom selecting & jQuery"

    1. 1. DOM Selecting & jQuery By 김훈민 NHN Technology Services Corp. Front-End Development Team http://huns.me
    2. 2. DOM API Document Object Model Huns.me http://huns.me
    3. 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. 4. • DOM Level 1 ~ 3 • DOM Level 4(Working Draft) DOM API http://www.w3.org/DOM/DOMTR
    5. 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. 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. 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. 8. Which one is the fastest?
    9. 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. 10. DOM API Performance Benchmark http://jsperf.com/dom-api-performance-test
    11. 11. 사용 목적이 다르고, DOM 복잡도에 따라서 성능이 달라질 수 있기 때문에 단순 비교는 무의미 어쨌든, getElementById가 가장 빠르다.
    12. 12. Selectors API querySelector, querySelectorAll
    13. 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. 14. Simple Selector ul { … } #huns { … } h1[title] { … } .huns-class { … } * { … } type selector id selector attribute selector class selector universal selector
    15. 15. Compound selector ul li #huns { … }
    16. 16. Complex selector ul > li #huns { … } Combinator
    17. 17. Selector…? ul li > input[type=‘text’] ?
    18. 18. Selectors API http://www.w3.org/TR/selectors-api2/ /** * @name querySelector * @param { DOMString selectors } * @return { Element } */
    19. 19. Selectors API http://www.w3.org/TR/selectors-api2/ /* * @name querySelectorAll * @param { DOMString selectors } * @return { NodeList } */
    20. 20. Selectors API http://www.w3.org/TR/selectors-api2/ DOM4에 포함될 예정
    21. 21. Selectors API Performance Searching, Parsing
    22. 22. Style rules Style Rule CSS Parser DOM Tree HTML Parser Attachement ID CLASS TYPE(TAG) UNIVERSAL
    23. 23. Style rules • #huns • .classname • ul • * ID ClASS TYPE(TAG) UNIVERSAL
    24. 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. 25. Selectors API performance 일반적으로 Key Selector를 기준으로 봤을 때, ID > CLASS > TAG > UNIVERSAL 순으로 빠르다.
    26. 26. Right to Left section .contents #name { … } #name
    27. 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. 28. Right to Left Test http://jsperf.com/decendent-test
    29. 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. 30. Right to Left Test http://jsperf.com/right-to-left-css-parsing-test2/3
    31. 31. querySelectorAll getElementsByTagName V S
    32. 32. getElementsByTagName vs querySelectorAll http://jsperf.com/queryselectorall-vs- getelementsby
    33. 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. 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. 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. 36. var nodeList = document.querySelectorAll("div"); for(var i = 0; i < nodeList .length; i++){ document.body.appendChild( document.createElement( "div" ) ); } NodeList[N]
    37. 37. createSelectorNodeList http://trac.webkit.org/browser/trunk/WebCore/do m/SelectorNodeList.cpp?rev=41093#L61 return StaticNodeList::adopt(nodes);
    38. 38. jQuery Selector Native vs jQuery
    39. 39. In jQuery selector $( “#first” ) $( “li” ) $( “.classname” ) $( “ul li:first-child” ) getElementById getElementsByTagName getElementsByClassName querySelectorAll
    40. 40. jQuery Native V S
    41. 41. Native vs jQuery Performance getElementById(“#lg_link_msg”) querySelector(“#lg_link_msg” ) $( “#lg_link_msg” )
    42. 42. Native vs jQuery Performance http://jsperf.com/id-class-tag-universal-performance-test-on- naver-main
    43. 43. Native Native vs jQuery Performance >Native jQuery
    44. 44. Structural Pseudo Classes & jQuery 구조 가상 클래스
    45. 45. Structural Pseudo Classes…? :first-child :last-child :nth-child :only-child :empty . . 구조 가상 클래스
    46. 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. 47. $( “ul li”).first() $( “ul li:first-child”) V S
    48. 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. 49. :first-child vs .first() x 1
    50. 50. :first-child vs .first() x 500
    51. 51. :first-child vs .first() x 1000 일반적으로, :first-child > .first() 엘리먼트 수가 적다면, :first-child <= .first()
    52. 52. $( “ul li”).last() $( “ul li:last-child”) V S
    53. 53. :last-child vs .last() x 1
    54. 54. :last-child vs .last() x 500
    55. 55. 일반적으로, :last-child > .last() 엘리먼트 수가 적다면, :last-child <= .last() :last-child vs .last() x 1000
    56. 56. $( “ul li”).eq(N) $( “ul li:nth-child(N)”) V S
    57. 57. jQuery.eq(N) $( … ).eq(N)는… $( … )[N] 와 비슷한 성능을 보임
    58. 58. :nth-child vs eq() x 1
    59. 59. :nth-child vs eq() x 500
    60. 60. :nth-child vs eq() x 1000 크롬은 예외 일반적으로, :nth-child > .eq() 엘리먼트 수가 적다면, :nth-child <= .eq() . .
    61. 61. :first-child :nth-child(1) .eq(0) V S
    62. 62. :nth-child vs :first-child vs .eq()
    63. 63. Why chrome’s nth-child rule is too slow?
    64. 64. Sorry, I don’t know. I’ll be back.
    65. 65. Thanks.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×