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