Dom selecting & jQuery

1,965 views
1,553 views

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,965
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
60
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • getElementByIdgetElementsByTagNamegetElementsByClassName
  • 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.

    ×