Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,412 views

Published on

Writing Efecient

  • Be the first to comment

  • Be the first to like this

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>

×