Dom selecting & jQuery

  • 834 views
Uploaded on

Dom, Selectors API and jQuery Performance. …

Dom, Selectors API and jQuery Performance.

More in: Software , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
834
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
42
Comments
0
Likes
6

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.