Your SlideShare is downloading. ×
Dom selecting & jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Dom selecting & jQuery

980
views

Published on

Dom, Selectors API and jQuery Performance. …

Dom, Selectors API and jQuery Performance.

Published in: Software, Technology

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
980
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
56
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • getElementByIdgetElementsByTagNamegetElementsByClassName
  • Transcript

    • 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?
    • 64. Sorry, I don’t know. I’ll be back.
    • 65. Thanks.