Post on 27-Aug-2014
description
DOM Selecting & jQuery
By 김훈민NHN Technology Services Corp.
Front-End Development Teamhttp://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 APIquerySelector, 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
HTMLParser
AttachementID
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
VS
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.cpp
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/dom/SelectorNodeList.cpp?rev=41093#L61return StaticNodeList::adopt(node
s);
jQuery Selector
Native vs jQuery
In jQuery selector
$( “#first” )
$( “li” )
$( “.classname” )
$( “ul li:first-child” )
getElementById
getElementsByTagName
getElementsByClassName
querySelectorAll
jQuery
Native
VS
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”)
VS
:first-child vs .first()
<ul> <li>Hello World</li> <li>Hello World</li> <li>Hello World</li> . . .</ul>
x 1x 500x 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”)
VS
: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)”)
VS
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)
VS
: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.