Dom selecting & jQuery
Upcoming SlideShare
Loading in...5
×
 

Dom selecting & jQuery

on

  • 606 views

Dom, Selectors API and jQuery Performance.

Dom, Selectors API and jQuery Performance.

Statistics

Views

Total Views
606
Views on SlideShare
590
Embed Views
16

Actions

Likes
6
Downloads
21
Comments
0

3 Embeds 16

http://mangastorytelling.tistory.com 12
http://www.slideee.com 3
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • getElementByIdgetElementsByTagNamegetElementsByClassName

Dom selecting & jQuery Dom selecting & jQuery Presentation Transcript

  • 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) Platform (Network, Storage, Graphic) WTF (Data Structures, Threading) JavaScript Core (JS Engine)
  • • 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 getElementsByTagName * @param { DOMString name } * @returns { NodeList } */
  • 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 } */
  • DOM Level 4 – 2014.02.04(working draft) http://www.w3.org/TR/2014/WD-dom- 20140204/ /* * @name getElementsByClassName * @param { DOMString elementId } * @returns { NodeList } */
  • 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> </ul> getElementById("inputBox"); getElementsByClassName("input-box")[0]; getElementsByTagName("input")[0];
  • 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=‘text’] { color : red }
  • Simple Selector ul { … } #huns { … } h1[title] { … } .huns-class { … } * { … } type selector id selector attribute selector class selector universal selector
  • 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 { Element } */
  • Selectors API http://www.w3.org/TR/selectors-api2/ /* * @name querySelectorAll * @param { DOMString selectors } * @return { NodeList } */
  • 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 { } • * { } • #content[title='home'] • #main-navigation { } • body.home #page-wrap { } • .main-navigation { } • ul li a.current { } • ul { } • ul li a { } • * { } • #content[title='home'] Key Selectors
  • 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.contents #name”) 3. ( “div.contents li #name” ) 4. ( “div.contents ul li #name” )
  • 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.contents ul li > #name”) 3. ( “div.contents ul > li > #name” )
  • 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- project/WebKit/blob/master/Source/WebCore/dom/DynamicNodeList.c pp
  • var HTMLCollection = document.getElementsByTagName("div"); for(var i = 0; i < HTMLCollection.length; i++){ document.body.appendChild( document.createElement( "div" ) ); } HTMLCollection[N] Infinite Loop
  • 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
  • var nodeList = document.querySelectorAll("div"); for(var i = 0; i < nodeList .length; i++){ document.body.appendChild( document.createElement( "div" ) ); } NodeList[N]
  • createSelectorNodeList http://trac.webkit.org/browser/trunk/WebCore/do m/SelectorNodeList.cpp?rev=41093#L61 return StaticNodeList::adopt(nodes);
  • jQuery Selector Native vs jQuery
  • In jQuery selector $( “#first” ) $( “li” ) $( “.classname” ) $( “ul li:first-child” ) getElementById getElementsByTagName getElementsByClassName querySelectorAll
  • 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 li”).last(); $( “ul li”).eq(N);
  • $( “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.