-
7/31/2019 j Query Doing It Right
1/14
jQueryDoing it right.
Girish Gangadharan
@appoosa [email protected] http://giri.sh
-
7/31/2019 j Query Doing It Right
2/14
SizzleSelector engine used by jQuery created by John Resig.
N ow s p u n of f t o i t s ow n p ro j e c t http://S i zz leJS
.com
C om p l e t e l y s t a n d a lon e ( n o l i b ra ry d e p e n
d e n c i e s )
Compet i t ive per formance for most f requent ly used se
lectors O n l y 4 K B m i n i f i e d a n d g z i p p e d
Hi g h l y e x t e n s i b l e w i t h e a s y - t o- u s e A P
I
-
7/31/2019 j Query Doing It Right
3/14
Writing better selectorsSpeed up performance with better
queries
Be m ore s p e c i f i c on t h e r i g h t s i d e q u e ry
ID s e l e c t or ru l e s e v e ry t h i n g
Us e t a g n a m e s i n s e l e c t ors
Don t ov e rd o t h e s e l e c t ors
-
7/31/2019 j Query Doing It Right
4/14
Is the DOM ready?
Do you need to wait until it is?
N ot e v e ry t h i n g n e e d s t o b e d on e i n $ ( d oc u
m e n t ) . re a d y ( ) .
$(document) . ready(funct ion ( ) {/ / D o s t u f f h e r e t h
a t c a n b e d o n e o n l y a f t e r t h e D O M i s l o a d e
d
} ) ;
$ ( " a " ) . c l i c k( fu n c t i on ( ) {
/ / D o o t h e r s t u f f h e r e
} ) ;
-
7/31/2019 j Query Doing It Right
5/14
Cache is awesomeUse it as often and as much as you can
I t h e l p s l i m i t t h e n u m b e r o f t i m e s t h e DO
M n e e d s
to be t raversed to fetch an e lement .
And hence, s ign i f i cant per formance improvement .
-
7/31/2019 j Query Doing It Right
6/14
Scope is fast. Find is faster.Doesnt involve the sizzle
engine.
$( #parent ' ) . f ind( ch i ld ' ) ;
- - i s t h e s a m e a s - -
$( ch i ld ' , $ ( #parent ' ) ) ;
-
7/31/2019 j Query Doing It Right
7/14
ChainingLess code. Better readability.
$ ( ' p # e l e m e n t Id ' )
. c s s ( ' b ord e r ' , ' 3 p x d a s h e d y e l l ow ')
. css ( 'background-co lor ' , 'orange ' )
. fadeIn( ' s low' ) ;
-
7/31/2019 j Query Doing It Right
8/14
Bind() Vs Live() Vs Delegate()Understand what each does. Use
appropriately.
-
7/31/2019 j Query Doing It Right
9/14
Native calls Vs jQueryNative calls are always faster even if a
tad bit
-
7/31/2019 j Query Doing It Right
10/14
Limit DOM manipulationCreate what you need in memory. Then
update the DOM.
-
7/31/2019 j Query Doing It Right
11/14
Event delegationBind fewer events to the elements for better
performance.
$ ( ' # m y L i s t l i ) .b i n d ( ' c l ic k ' , fu n c t i
on ( ) {
/ / do s tuf f
} ) ;
$ ( ' # m y L i s t ).b i n d ( ' c l i c k ', fu n c t i on ( e
) {
var target = e . target ;
i f ( target .nodeName === 'L I ' ) {
// do stuf f
}
} ) ;
-
7/31/2019 j Query Doing It Right
12/14
Eliminate WasteNo matching elements still means jQuery has to
look for them
-
7/31/2019 j Query Doing It Right
13/14
Questions?
-
7/31/2019 j Query Doing It Right
14/14
jQueryDoing it right.
Girish Gangadharan
@appoosa [email protected] http://giri.sh
