Writing Efficient JavaScript Code Prem Nawaz Khan
What is this Talk about? <ul><li>Not an introduction to JavaScript </li></ul><ul><li>This is about telling you what worked...
Optimization <ul><li>Premature optimization is the root of all evil.  — Donald Knuth </li></ul><ul><li>Do not worry about ...
Some Basics <ul><li>Make your code understandable </li></ul><ul><li>Strict to PayPal JavaScript coding standards </li></ul...
Standards <ul><li>Valid code is good code </li></ul><ul><li>Good code is secure code (most cases) </li></ul><ul><li>Good c...
Comments <ul><li>Comments are messages from developer to developer </li></ul><ul><li>“Good code explains itself” is a myth...
Comments (Contd.) <ul><li>Testing blocks of code </li></ul><ul><li>getRadioSelected:function (radioGroup) </li></ul><ul><l...
Comments (Contd.) <ul><li>getRadioSelected:function (radioGroup) </li></ul><ul><li>{  /** / var selected = &quot;&quot;; f...
Comments (Contd.) <ul><li>getRadioSelected:function (radioGroup) </li></ul><ul><li>{  /** / var selected = &quot;&quot;; f...
JS Optimization <ul><li>Let’s Optimize some JavaScript… </li></ul>
Shortcuts <ul><li>var cow = new Object(); </li></ul><ul><li>cow.colour = ‘white and black’; </li></ul><ul><li>cow.breed = ...
Shortcuts (Contd.) <ul><li>var lunch = new Array(); </li></ul><ul><li>lunch[0]=’Dosa’; </li></ul><ul><li>lunch[1]=’Roti’; ...
Shortcuts (Contd.) <ul><li>var direction; if (x > 100) { direction = 1; } else  { direction = -1; } is same as </li></ul><...
Shortcuts (Contd.) <ul><li>function getWidth(clientWidth) </li></ul><ul><li>{ </li></ul><ul><li>var width; </li></ul><ul><...
Common subexpression removal <ul><li>Consider: </li></ul><ul><li>var s = “hello, world”; </li></ul><ul><li>for (var i = 0;...
Cache Function Pointers <ul><li>Consider: </li></ul><ul><ul><li>function doMyDuty(collection) </li></ul></ul><ul><ul><li>{...
Cache Function Pointers (Contd.) <ul><li>The global lookup for every iteration can be </li></ul><ul><li>avoided by rewriti...
Global variables are evil <ul><li>Crawling up the scope chain </li></ul><ul><li>Memory de-allocation only at end </li></ul...
Global variables are evil (Contd.) <ul><li>var a = 1; </li></ul><ul><li>(function() { </li></ul><ul><ul><li>var a = 2; </l...
Global variables are evil (Contd.) <ul><li>var a = 1; </li></ul><ul><li>(function() { </li></ul><ul><ul><li>var a = 2; </l...
Global variables are evil (Contd.) <ul><li>var a = 1; </li></ul><ul><li>(function() { </li></ul><ul><ul><li>//var a = 2; <...
Avoid try/catch inside loops <ul><li>The try/catch block creates a local scope and creates the exception object at runtime...
Avoid try/catch inside loops (Contd.) <ul><li>Right way: </li></ul><ul><li>try { </li></ul><ul><li>for ( // ... )  { </li>...
JavaScript & DOM <ul><li>DOM  </li></ul><ul><li>Different browsers perform differently  </li></ul><ul><li>Browserscope- It...
JavaScript & DOM <ul><li>The bottleneck tends to be the DOM interface. </li></ul><ul><li>There is a significant cost every...
JavaScript & DOM <ul><li>Each touch can result in a reflow computation, which is expensive. </li></ul><ul><li>It is faster...
JavaScript & DOM <ul><li>Replace HTML faster than innerHTML   </li></ul><ul><li>function replaceHtml(el, html) { </li></ul...
Updating DOM <ul><li>Before:- </li></ul><ul><li>function foo() { </li></ul><ul><li>for (var count = 0; count < 1000; count...
Updating DOM (Contd). <ul><li>After:- </li></ul><ul><li>function foo() { </li></ul><ul><li>var inner = ''; </li></ul><ul><...
Cache Property access  <ul><li>Before:- </li></ul><ul><li>For example, when making several changes to styles for an elemen...
Cache property access (Contd.) <ul><li>After:- </li></ul><ul><li>var d = this.iframe; </li></ul><ul><li>e = d.style; //Cac...
Cache property access (Contd.) <ul><li>This is better than the other 2 </li></ul><ul><li>var d = this.iframe, </li></ul><u...
Cache property access (Contd.) <ul><li>BEST </li></ul><ul><li>YUD.addClass(this.iframe,&quot;myClass&quot;); </li></ul><ul...
Minimize Dom Access  <ul><li>Before </li></ul><ul><li>if (YUD.get(&quot;RetireSMEI&quot;) && YUD.get(&quot;RetireSMEI&quot...
Call back functions   <ul><li>Consider: </li></ul><ul><li>var callback = new Function(“// ... “); </li></ul><ul><li>foo(so...
Call back functions   <ul><li>A common way for one to stumble upon increasing memory problems is to pass an object's metho...
Some YUI tips   <ul><li>1.)  YUI addClass, addListener accepts array of input elements </li></ul><ul><li>Before </li></ul>...
Some YUI tips   <ul><li>2.)  getElementsByClassName(className, tagName, rootNode): Returns an array of elements that have ...
Some YUI tips   <ul><li>3.)  Use replaceClass instead of removing and adding class Before:- YUD.removeClass('goToMyAccount...
Smart Listeners   <ul><li>Use Event Delegation when   you have to dump content via Ajax and attach events to the content e...
Smart Listeners   <ul><li>Event Bubbling -> Events propagates from Bottom to Top a.k.a. Child to Ancestor  </li></ul><ul><...
AJAX <ul><li>Ajax ? asynchronous doesn’t mean fast </li></ul><ul><li>Use GET over post </li></ul><ul><li>Use json -> small...
Summary <ul><li>Common subexpression removal </li></ul><ul><li>Use shortcuts wherever possible </li></ul><ul><li>Cache Fun...
<ul><li>Questions /Suggestions  ??? </li></ul><ul><li>Mail to pkhan@paypal.com </li></ul>
Upcoming SlideShare
Loading in …5
×

Effecient javascript

1,379 views
1,283 views

Published on

Writing Efecient

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,379
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Effecient javascript

  1. 1. Writing Efficient JavaScript Code Prem Nawaz Khan
  2. 2. What is this Talk about? <ul><li>Not an introduction to JavaScript </li></ul><ul><li>This is about telling you what worked for me and might as well work for you. </li></ul><ul><li>Some collection of ideas and tips over a period of time </li></ul>
  3. 3. Optimization <ul><li>Premature optimization is the root of all evil. — Donald Knuth </li></ul><ul><li>Do not worry about optimization until you have the application working correctly. </li></ul><ul><li>If it isn’t right, it doesn’t matter if it is fast. </li></ul><ul><li>Clean, correct code is easier to optimize. </li></ul><ul><li>Sometimes restructuring or redesign is required. </li></ul>
  4. 4. Some Basics <ul><li>Make your code understandable </li></ul><ul><li>Strict to PayPal JavaScript coding standards </li></ul><ul><li>Comment as much as needed </li></ul><ul><li>Use shortcut notations </li></ul><ul><li>Allow for configuration </li></ul>
  5. 5. Standards <ul><li>Valid code is good code </li></ul><ul><li>Good code is secure code (most cases) </li></ul><ul><li>Good code is easy to Optmize </li></ul><ul><li>http://webdev.paypal.com/standards/coding-standards/javascript-standards </li></ul>
  6. 6. Comments <ul><li>Comments are messages from developer to developer </li></ul><ul><li>“Good code explains itself” is a myth </li></ul><ul><li>Comment as much as needed – but no need to do story telling </li></ul><ul><li>// Breaks when line break is removed </li></ul><ul><li>Use /* comments */ </li></ul>
  7. 7. Comments (Contd.) <ul><li>Testing blocks of code </li></ul><ul><li>getRadioSelected:function (radioGroup) </li></ul><ul><li>{ /**/ var selected = &quot;&quot;; for (var i=0; i< radioGroup.length; i++) { </li></ul><ul><li>if (radioGroup[i].checked) { selected = radioGroup[i].value; </li></ul><ul><li>} } </li></ul><ul><li>return selected; </li></ul><ul><li>/**/ </li></ul><ul><li>/** / </li></ul><ul><li>for (var i = 0,j=radioGroup.length; i < j; i++) </li></ul><ul><li>{ if (radioGroup[i].checked) { return radioGroup[i].value } </li></ul><ul><li>} return ''; /**/ </li></ul><ul><li>}, </li></ul>
  8. 8. Comments (Contd.) <ul><li>getRadioSelected:function (radioGroup) </li></ul><ul><li>{ /** / var selected = &quot;&quot;; for (var i=0; i< radioGroup.length; i++) { </li></ul><ul><li>if (radioGroup[i].checked) { selected = radioGroup[i].value; </li></ul><ul><li>} } </li></ul><ul><li>return selected; </li></ul><ul><li>/**/ </li></ul><ul><li>/** / </li></ul><ul><li>for (var i = 0,j=radioGroup.length; i < j; i++) </li></ul><ul><li>{ if (radioGroup[i].checked) { return radioGroup[i].value } </li></ul><ul><li>} return ''; /**/ </li></ul><ul><li>}, </li></ul>
  9. 9. Comments (Contd.) <ul><li>getRadioSelected:function (radioGroup) </li></ul><ul><li>{ /** / var selected = &quot;&quot;; for (var i=0; i< radioGroup.length; i++) { </li></ul><ul><li>if (radioGroup[i].checked) { selected = radioGroup[i].value; </li></ul><ul><li>} } </li></ul><ul><li>return selected; </li></ul><ul><li>/**/ </li></ul><ul><li>/**/ </li></ul><ul><li>for (var i = 0,j=radioGroup.length; i < j; i++) </li></ul><ul><li>{ if (radioGroup[i].checked) { return radioGroup[i].value } </li></ul><ul><li>} return ''; /**/ </li></ul><ul><li>}, </li></ul>
  10. 10. JS Optimization <ul><li>Let’s Optimize some JavaScript… </li></ul>
  11. 11. Shortcuts <ul><li>var cow = new Object(); </li></ul><ul><li>cow.colour = ‘white and black’; </li></ul><ul><li>cow.breed = ‘Jersey’; </li></ul><ul><li>cow.legs = 4; </li></ul><ul><li>is same as </li></ul><ul><li>var cow = </li></ul><ul><li>{ </li></ul><ul><li>colour:‘white and black’, </li></ul><ul><li>breed:‘Jersey’, </li></ul><ul><li>legs:4 </li></ul><ul><li>}; </li></ul>
  12. 12. Shortcuts (Contd.) <ul><li>var lunch = new Array(); </li></ul><ul><li>lunch[0]=’Dosa’; </li></ul><ul><li>lunch[1]=’Roti’; </li></ul><ul><li>lunch[2]=’Rice’; </li></ul><ul><li>lunch[3]=’idli’; </li></ul><ul><li>is same as </li></ul><ul><li>var lunch = [ </li></ul><ul><li>‘ Dosa’, </li></ul><ul><li>‘ Roti’, </li></ul><ul><li>‘ Rice’, </li></ul><ul><li>‘ idli’ </li></ul><ul><li>]; </li></ul>
  13. 13. Shortcuts (Contd.) <ul><li>var direction; if (x > 100) { direction = 1; } else { direction = -1; } is same as </li></ul><ul><li>var direction = (x > 100) ? 1 : -1; </li></ul><ul><li>/* Avoid nesting these! */ </li></ul>
  14. 14. Shortcuts (Contd.) <ul><li>function getWidth(clientWidth) </li></ul><ul><li>{ </li></ul><ul><li>var width; </li></ul><ul><li>if(typeof clientWidth != 'undefined') </li></ul><ul><li>{ </li></ul><ul><li>width=clientWidth; </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li> width=100; } </li></ul><ul><li>} </li></ul><ul><li>is same as </li></ul><ul><li>function getWidth(clientWidth) </li></ul><ul><li>{ </li></ul><ul><li>var width = clientWidth || 100; </li></ul><ul><li>} </li></ul>
  15. 15. Common subexpression removal <ul><li>Consider: </li></ul><ul><li>var s = “hello, world”; </li></ul><ul><li>for (var i = 0; i < s.length; i++) { </li></ul><ul><li>// ... </li></ul><ul><li>} </li></ul><ul><li>Better way to write: </li></ul><ul><li>var s = “hello, world”, i, n; </li></ul><ul><li>for (i = 0, n = s.length; i < n; i++) { </li></ul><ul><li>// ... </li></ul><ul><li>} </li></ul>
  16. 16. Cache Function Pointers <ul><li>Consider: </li></ul><ul><ul><li>function doMyDuty(collection) </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>var i, n = collection.length; </li></ul></ul><ul><ul><li>for (i = 0; i < n; i++) </li></ul></ul><ul><ul><li>doStuff(collection[i]); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Here doStuff is a function outside the scope of </li></ul><ul><li>doMyDuty() </li></ul>
  17. 17. Cache Function Pointers (Contd.) <ul><li>The global lookup for every iteration can be </li></ul><ul><li>avoided by rewriting the doMyDuty as: </li></ul><ul><li>function doMyDuty(collection) </li></ul><ul><li>{ </li></ul><ul><ul><li>var i, n = collection.length, </li></ul></ul><ul><ul><li>fcn = doStuff; </li></ul></ul><ul><ul><li>for (i = 0; i < n; i++) </li></ul></ul><ul><ul><li>fcn(collection[i]); </li></ul></ul><ul><li>} </li></ul>
  18. 18. Global variables are evil <ul><li>Crawling up the scope chain </li></ul><ul><li>Memory de-allocation only at end </li></ul><ul><li>Can be overridden </li></ul>
  19. 19. Global variables are evil (Contd.) <ul><li>var a = 1; </li></ul><ul><li>(function() { </li></ul><ul><ul><li>var a = 2; </li></ul></ul><ul><ul><li>function b(){ </li></ul></ul><ul><ul><li>var a = 3; </li></ul></ul><ul><ul><li>alert(a); </li></ul></ul><ul><li>} </li></ul><ul><li> b(); </li></ul><ul><li>})(); // 3 </li></ul>
  20. 20. Global variables are evil (Contd.) <ul><li>var a = 1; </li></ul><ul><li>(function() { </li></ul><ul><ul><li>var a = 2; </li></ul></ul><ul><ul><li>function b(){ </li></ul></ul><ul><ul><li>//var a = 3; </li></ul></ul><ul><ul><li>alert(a); </li></ul></ul><ul><li>} </li></ul><ul><li> b(); </li></ul><ul><li>})(); // 3 </li></ul>
  21. 21. Global variables are evil (Contd.) <ul><li>var a = 1; </li></ul><ul><li>(function() { </li></ul><ul><ul><li>//var a = 2; </li></ul></ul><ul><ul><li>function b(){ </li></ul></ul><ul><ul><li>//var a = 3; </li></ul></ul><ul><ul><li>alert(a); </li></ul></ul><ul><li>} </li></ul><ul><li> b(); </li></ul><ul><li>})(); // 3 </li></ul>
  22. 22. Avoid try/catch inside loops <ul><li>The try/catch block creates a local scope and creates the exception object at runtime that lives in that scope. </li></ul><ul><li>Consider: </li></ul><ul><li>for ( // ... ) { </li></ul><ul><li>try </li></ul><ul><li>{ // ... </li></ul><ul><li>} catch (e) { // ...} </li></ul><ul><li>} </li></ul>
  23. 23. Avoid try/catch inside loops (Contd.) <ul><li>Right way: </li></ul><ul><li>try { </li></ul><ul><li>for ( // ... ) { </li></ul><ul><li>// ... </li></ul><ul><li>} </li></ul><ul><li>} catch (e) { // ... } </li></ul>
  24. 24. JavaScript & DOM <ul><li>DOM </li></ul><ul><li>Different browsers perform differently </li></ul><ul><li>Browserscope- It is a community-driven project for profiling web browsers. </li></ul><ul><li>http://www.browserscope.org/ </li></ul>
  25. 25. JavaScript & DOM <ul><li>The bottleneck tends to be the DOM interface. </li></ul><ul><li>There is a significant cost every time you touch the DOM tree. </li></ul><ul><li>document.getElementsByTagName('*').length in firebug console gives number of DOM elements in that page. Reduce the number of DOM elements as much as possible. </li></ul>
  26. 26. JavaScript & DOM <ul><li>Each touch can result in a reflow computation, which is expensive. </li></ul><ul><li>It is faster to manipulate new nodes before they are attached to the tree. </li></ul><ul><li>Touching unattached nodes avoids the reflow cost. </li></ul><ul><li>Setting innerHTML does an enormous amount of work, but browsers are really good at it, and it only touches the DOM once. </li></ul><ul><li>http://www.quirksmode.org/dom/innerhtml.html </li></ul>
  27. 27. JavaScript & DOM <ul><li>Replace HTML faster than innerHTML </li></ul><ul><li>function replaceHtml(el, html) { </li></ul><ul><li>var oldEl = typeof el === &quot;string&quot; ? document.getElementById(el) : el; </li></ul><ul><li>/*@cc_on // Pure innerHTML is slightly faster in IE </li></ul><ul><li>oldEl.innerHTML = html; </li></ul><ul><li>return oldEl; </li></ul><ul><li>@*/ </li></ul><ul><li>var newEl = oldEl.cloneNode(false); </li></ul><ul><li>newEl.innerHTML = html; </li></ul><ul><li>oldEl.parentNode.replaceChild(newEl, oldEl); </li></ul><ul><li>/* Since we just removed the old element from the DOM, return a reference </li></ul><ul><li>to the new element, which can be used to restore variable references. */ </li></ul><ul><li>return newEl; </li></ul><ul><li>}; </li></ul><ul><li>Eg. http://dev.paypal.com/~pkhan/examples/replaceHTML.html Source : http://blog.stevenlevithan.com/archives/faster-than-innerhtml </li></ul>
  28. 28. Updating DOM <ul><li>Before:- </li></ul><ul><li>function foo() { </li></ul><ul><li>for (var count = 0; count < 1000; count++) { </li></ul><ul><li>document.body.innerHTML += 1; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  29. 29. Updating DOM (Contd). <ul><li>After:- </li></ul><ul><li>function foo() { </li></ul><ul><li>var inner = ''; </li></ul><ul><li>for (var count = 0; count < 1000; count++) { </li></ul><ul><li>inner += 1; </li></ul><ul><li>} </li></ul><ul><li>document.body.innerHTML += inner; </li></ul><ul><li>} //1000 times faster  </li></ul><ul><li>Demo :- http://dev.paypal.com/~pkhan/examples/Domtouch.html </li></ul>
  30. 30. Cache Property access <ul><li>Before:- </li></ul><ul><li>For example, when making several changes to styles for an element: </li></ul><ul><li>this.iframe.style.top = xy[1] +&quot;px&quot;;   </li></ul><ul><li>this.iframe.style.left = xy[0] +&quot;px&quot;; </li></ul><ul><li>this.iframe.style.height = elem.clientHeight +&quot;px&quot;; </li></ul><ul><li>this.iframe.style.width = elem.clientWidth +&quot;px&quot;; </li></ul><ul><li>this.iframe.style.visibility = &quot;visible&quot;; </li></ul><ul><li>this.iframe.style.zIndex = &quot;1&quot;; </li></ul>
  31. 31. Cache property access (Contd.) <ul><li>After:- </li></ul><ul><li>var d = this.iframe; </li></ul><ul><li>e = d.style; //Cache style </li></ul><ul><li>e.top = xy[1] +&quot;px&quot;;   </li></ul><ul><li>e.left = xy[0] +&quot;px&quot;; </li></ul><ul><li>e.height = elem.clientHeight +&quot;px&quot;; </li></ul><ul><li>e.width = elem.clientWidth +&quot;px&quot;; </li></ul><ul><li>e.visibility = &quot;visible&quot;; </li></ul><ul><li>e.zIndex = &quot;1&quot;; </li></ul>
  32. 32. Cache property access (Contd.) <ul><li>This is better than the other 2 </li></ul><ul><li>var d = this.iframe, </li></ul><ul><li>style; </li></ul><ul><li>style='top:'+xy[1] +'px;left:'+xy[0] +'px;height:'+ elem.clientHeight +'px;width:'+elem.clientHeight +'px;visibility:visible;z-Index:1;'; </li></ul><ul><li>if (typeof d.style.cssText != “undefined”) { </li></ul><ul><li>d.style.cssText = style; </li></ul><ul><li>} else { </li></ul><ul><li>d.setAttribute(“style”, style); </li></ul><ul><li>} </li></ul>
  33. 33. Cache property access (Contd.) <ul><li>BEST </li></ul><ul><li>YUD.addClass(this.iframe,&quot;myClass&quot;); </li></ul><ul><li>Need not change the JavaScript code to change the Look & Feel </li></ul>
  34. 34. Minimize Dom Access <ul><li>Before </li></ul><ul><li>if (YUD.get(&quot;RetireSMEI&quot;) && YUD.get(&quot;RetireSMEI&quot;).checked) showEbayForm = 1; </li></ul><ul><li>Better: </li></ul><ul><li>var RetireSMEI=YUD.get(&quot;RetireSMEI&quot;); </li></ul><ul><li>if (RetireSMEI && RetireSMEI.checked) showEbayForm = 1; </li></ul>
  35. 35. Call back functions <ul><li>Consider: </li></ul><ul><li>var callback = new Function(“// ... “); </li></ul><ul><li>foo(somedata, callback); </li></ul><ul><li>Better way to write: </li></ul><ul><li>var callback = function () { // ... }; </li></ul><ul><li>foo(somedata, callback); </li></ul><ul><li>Still better ( if you don't need to reuse) c allback(): foo(somedata, function () { /// ... }); </li></ul>
  36. 36. Call back functions <ul><li>A common way for one to stumble upon increasing memory problems is to pass an object's method as a callback: YUE.addListener(&quot;recent_select&quot;, 'change', this.pushEmail); // sets wrong |this|! Use: </li></ul><ul><li>YUE.addListener(&quot;recent_select&quot;, 'change', function(e){PAYPAL.love.p2p.pushEmail(e)}); </li></ul><ul><li>Ref: https://developer.mozilla.org/en/DOM/element.addEventListener </li></ul>
  37. 37. Some YUI tips <ul><li>1.) YUI addClass, addListener accepts array of input elements </li></ul><ul><li>Before </li></ul><ul><li>YUE.addListener(&quot;expandImg&quot;, &quot;click&quot;, PAYPAL.Beloved.Salsa.toggleBalanceDetails); YUE.addListener(&quot;collapseImg&quot;, &quot;click&quot;, PAYPAL.Beloved.Salsa.toggleBalanceDetails); YUE.addListener(&quot;expandLink&quot;, &quot;click&quot;, PAYPAL.Beloved.Salsa.toggleBalanceDetails); YUE.addListener(&quot;collapseLink&quot;, &quot;click&quot;, PAYPAL.Beloved.Salsa.toggleBalanceDetails); </li></ul><ul><li>Better YUE.addListener([(&quot;expandImg&quot;, &quot;collapseImg&quot;, &quot;expandLink&quot;, &quot;collapseLink“],click,function(e){(&quot;collapseLink&quot;, PAYPAL.Beloved.Salsa.toggleBalanceDetails(e)); </li></ul>
  38. 38. Some YUI tips <ul><li>2.) getElementsByClassName(className, tagName, rootNode): Returns an array of elements that have the class name applied. Can be optionally scoped by tagName and/or a root node to increase performance. Before:- </li></ul><ul><li>var pu=YUD.getElementsByClassName('pu'); </li></ul><ul><li>Better :- var pu=YUD.getElementsByClassName('pu','input','purchasetabs'); Even better:- var pu=YUD.get(&quot;purchasetabs&quot;).getElementsByTagName(&quot;input&quot;); </li></ul>
  39. 39. Some YUI tips <ul><li>3.) Use replaceClass instead of removing and adding class Before:- YUD.removeClass('goToMyAccount', 'hide'); // The above will take more time for removal (through profiling ) YUD.addClass('goToMyAccount', 'show'); </li></ul><ul><li>Better: YUD.replaceClass('goToMyAccount', 'hide‘,’show’); </li></ul><ul><li>//Does a regex replace </li></ul>
  40. 40. Smart Listeners <ul><li>Use Event Delegation when you have to dump content via Ajax and attach events to the content elements or when u have many similar events that need to be triggered within child elements, or if you have a DHTML heavy page with node created and deleted all the time, this technique is really useful Event Capture ->Events propagates from Top to Bottom a.k.a. Ancestor to Child target .addEventListener( type , listener , useCapture ); //false by default https://developer.mozilla.org/En/DOM:element.addEventListener Event Capturing doesn't work in IE. And so in YUI. Because attachevent doesn’t have the third parameter bSuccess = object.attachEvent(sEvent, fpNotify) Eg. http:// dev.paypal.com/~pkhan/examples/EventCapture.html </li></ul>
  41. 41. Smart Listeners <ul><li>Event Bubbling -> Events propagates from Bottom to Top a.k.a. Child to Ancestor </li></ul><ul><li>Before :- </li></ul><ul><li>var lis=getElementsByTagName(&quot;li&quot;); </li></ul><ul><li>YAHOO.util.Event.addListener(lis, &quot;mouseover&quot;, callback); </li></ul><ul><li>Event Delegation:- </li></ul><ul><li>YAHOO.util.Event.addListener(&quot;container&quot;, &quot;mouseover&quot;, callback); </li></ul><ul><li>Example: http://dev.paypal.com/~pkhan/examples/EventBubbling.html http://dev.paypal.com/~pkhan/examples/UsageBubbling.html </li></ul><ul><li>Live example:- </li></ul><ul><li>https://cms.paypal.com/us/cgi-bin/marketingweb?cmd=_render-content&content_ID=marketing_us/send_money </li></ul>
  42. 42. AJAX <ul><li>Ajax ? asynchronous doesn’t mean fast </li></ul><ul><li>Use GET over post </li></ul><ul><li>Use json -> small, native </li></ul><ul><li>Use gzip </li></ul>
  43. 43. Summary <ul><li>Common subexpression removal </li></ul><ul><li>Use shortcuts wherever possible </li></ul><ul><li>Cache Function Pointers </li></ul><ul><li>Avoid globals </li></ul><ul><li>Avoid try/catch inside loops </li></ul><ul><li>Replace HTML faster than innerHTML </li></ul><ul><li>Minimize DOM objects </li></ul><ul><li>Reduce, Cache DOM Access </li></ul><ul><li>Incorrect this in callback functions </li></ul><ul><li>Add same listener to multiple elements </li></ul><ul><li>Optimize getElementsByClassName </li></ul><ul><li>Use YUI replace Class </li></ul><ul><li>Use event delegation wherever appropriate </li></ul><ul><li>Use GET, Gzip, JSON for Ajax </li></ul>
  44. 44. <ul><li>Questions /Suggestions ??? </li></ul><ul><li>Mail to pkhan@paypal.com </li></ul>

×