Coding for  Performance Parental Advisory :  Hardcore Forking Action By  John-David Dalton  @jdalton  ▪  john@fusejs.com  ...
function times(iterator, context) { $R( 0, this, true ) . each( iterator, context ) ; return this; } Reduce Abstraction 1.
function times(iterator, context) { var i = -1, length = this; while ( ++i < length )  iterator.call(context, i, i); retur...
function times(iterator, context) { var i = -1, length = this; if ( context ) { while (++i < length)  iterator.call( conte...
<ul><li>Test Before Tapping Dat </li></ul><ul><ul><li>Feature Testing   (Awesomest) </li></ul></ul><ul><ul><li>Feature Det...
// true for Gecko and Webkit if ([ ][ ‘__proto__‘ ]  === Array.prototype   &&   { }[ '__proto__‘ ]  === Object.prototype )...
// Host objects can return type values that are different from their actual // data type. The objects we are concerned wit...
// true for IE return isHostType( window ,  'ActiveXObject' ); Feature Detection 7.
var xhr; // Assumed to be IE If ( document.fileSize ) {   xhr =  new ActiveXObject('Microsoft.XMLHTTP'); } else { xhr = ne...
function contains(element, descendant) { if (element. compareDocumentPosition ) { return (descendant .compareDocumentPosit...
var contains = function(element, descendant) { while ( descendant  =  descendant.parentNode ) { if (descendant === element...
var contains = function(element, descendant) { while ( descendant  =  descendant.parentNode ) { if (descendant === element...
<ul><li>But don't fork Marsellus Wallace ! </li></ul>var contains = function(element, descendant) { while ( descendant  = ...
<ul><li>Forking + Lazy Load </li></ul>plugin.getRelatedTarget =   function getRelatedTarget() { var setRelatedTarget = fun...
<ul><li>Forking + Lazy Load </li></ul>plugin.getRelatedTarget =  function getRelatedTarget() { var setRelatedTarget = func...
<ul><li>Forking + Lazy Load </li></ul>plugin.getRelatedTarget =  function getRelatedTarget() { var setRelatedTarget = func...
<ul><li>Forking + Lazy Load </li></ul>getRelatedTarget = function getRelatedTarget() { var node = this.raw && this.raw.rel...
<ul><li>Forking + Lazy Load </li></ul>plugin.getRelatedTarget =  function getRelatedTarget() { var setRelatedTarget = func...
<ul><li>Memoize </li></ul>var  cache  =  { } , reHyphenated = /-([a-z])/gi, uid = +new Date; function toUpperCase(match, l...
<ul><li>Nay Context </li></ul>// Prototype $$( ‘.foo’ ); // jQuery $( ‘.foo’ ); 19.
<ul><li>Yay Context </li></ul>// Prototype var panel =   $( ‘panel’ ); panel . select( ‘.foo’ ); // jQuery var panel =   $...
<ul><li>Event Delegation != Magic </li></ul>// Prototype usage $(‘myTable’).observe(‘click’, function( event ) { if ( even...
<ul><li>Minifiers </li></ul><ul><ul><li>Packer 3.1   (Old School, You’re my boy, Blue!) </li></ul></ul><ul><ul><li>YUI Com...
<ul><li>What’s Cool </li></ul>// code like this emit(‘I will be ’ +   ‘concated by ‘ +   ‘pirate magic’); // will be valmo...
<ul><li>Do </li></ul><ul><ul><li>Repeat use of the same variable names </li></ul></ul><ul><ul><li>Store namespaced objects...
<ul><li>Do Not </li></ul><ul><ul><li>Become anal about semi-colons </li></ul></ul><ul><ul><li>Replace all property names w...
Hilarity Comics   by Patrick Alexander -- http://www.eegra.com/show/sub/do/browse/cat/comics/id/43
Hilarity Comics   by Patrick Alexander -- http://www.eegra.com/show/sub/do/browse/cat/comics/id/43
 
Links <ul><li>http://github.com/jdalton/fusejs </li></ul><ul><li>http://developer.yahoo.com/yui/compressor/ </li></ul><ul>...
Upcoming SlideShare
Loading in …5
×

Web Optimization Summit: Coding for Performance

2,110 views

Published on

I discuss topics like method forking, lazy defining of methods, JS minifiers, dos and don'ts of minification.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,110
On SlideShare
0
From Embeds
0
Number of Embeds
515
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Web Optimization Summit: Coding for Performance

  1. 1. Coding for Performance Parental Advisory : Hardcore Forking Action By John-David Dalton @jdalton ▪ john@fusejs.com ▪ http://allyoucanleet.com
  2. 2. function times(iterator, context) { $R( 0, this, true ) . each( iterator, context ) ; return this; } Reduce Abstraction 1.
  3. 3. function times(iterator, context) { var i = -1, length = this; while ( ++i < length ) iterator.call(context, i, i); return length; } Reduce Abstraction 2.
  4. 4. function times(iterator, context) { var i = -1, length = this; if ( context ) { while (++i < length) iterator.call( context, i, i ) ; } else { while (++i < length) iterator( i, i ) ; } return length; } Reduce Abstraction 3.
  5. 5. <ul><li>Test Before Tapping Dat </li></ul><ul><ul><li>Feature Testing (Awesomest) </li></ul></ul><ul><ul><li>Feature Detection (Pretty good) </li></ul></ul><ul><ul><li>Weak Object Inference (Almost as bad as UA sniffing) </li></ul></ul><ul><ul><li>User Agent Sniffing (Just say no!) </li></ul></ul>4.
  6. 6. // true for Gecko and Webkit if ([ ][ ‘__proto__‘ ] === Array.prototype && { }[ '__proto__‘ ] === Object.prototype ) { // test if it's writable and restorable var result, list = [], backup = list['__proto__']; list['__proto__'] = { }; result = typeof list.push === 'undefined' ; list['__proto__'] = backup; return result && typeof list.push === 'function' ; } Feature Testing 5.
  7. 7. // Host objects can return type values that are different from their actual // data type. The objects we are concerned with usually return non-primitive // types of object, function, or unknown. // For example: // typeof document.createElement('div').offsetParent -> unknown // typeof document.createElement -> object // typeof Image.create -> string isHostType = (function() { var NON_HOST_TYPES = { 'boolean': 1, 'number': 1, 'string': 1, 'undefined': 1 }; return function(object, property) { var type = typeof object[property] ; return type === 'object' ? !! object[property] : ! NON_HOST_TYPES[ type ] ; }; })(); Feature Detection 6.
  8. 8. // true for IE return isHostType( window , 'ActiveXObject' ); Feature Detection 7.
  9. 9. var xhr; // Assumed to be IE If ( document.fileSize ) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } else { xhr = new XMLHttpRequest(); } Weak Object Inference 8.
  10. 10. function contains(element, descendant) { if (element. compareDocumentPosition ) { return (descendant .compareDocumentPosition(element) & 8) === 8; } if (element. contains ) { return element !== descendant && element.contains(element); } while ( descendant = descendant.parentNode ) { if (descendant == element) return true; } return false; } Fork like Rabbits 9.
  11. 11. var contains = function(element, descendant) { while ( descendant = descendant.parentNode ) { if (descendant === element) return true; } re tur n false; }; if ( isHostType(docEl, 'compareDocumentPosition') ) { contains = function(element, descendant) { /* DOCUMENT_POSITION_CONTAINS = 0x08 */ return (descendant .compareDocumentPosition(element) & 8) === 8; }; } else if ( isHostType(docEl, 'contains') ) { contains = function(element, descendant) { return element !== descendant && element.contains(descendant); }; } Fork like Robots 10.
  12. 12. var contains = function(element, descendant) { while ( descendant = descendant.parentNode ) { if (descendant === element) return true; } return false; }; if ( isHostType( docEl, 'compareDocumentPosition' ) ) { contains = function(element, descendant) { /* DOCUMENT_POSITION_CONTAINS = 0x08 */ return (descendant .compareDocumentPosition(element) & 8) === 8; }; } else if ( isHostType(docEl, 'contains') ) { contains = function(element, descendant) { return element !== descendant && element.contains(descendant); }; } Fork like Hobbits 11.
  13. 13. <ul><li>But don't fork Marsellus Wallace ! </li></ul>var contains = function(element, descendant) { while ( descendant = descendant.parentNode ) { if (descendant === element) return true; } return false; }; if ( isHostObject(docEl, 'compareDocumentPosition') ) { contains = function(element, descendant) { /* DOCUMENT_POSITION_CONTAINS = 0x08 */ return (descendant .compareDocumentPosition(element) & 8) === 8; }; } else if ( isHostType ( docEl, 'contains' ) ) { contains = function(element, descendant) { return element !== descendant && element.contains(descendant); }; } 12.
  14. 14. <ul><li>Forking + Lazy Load </li></ul>plugin.getRelatedTarget = function getRelatedTarget() { var setRelatedTarget = function(object, value) { object.getRelatedTarget = createGetter('getRelatedTarget', value); return value; }, getRelatedTarget = function getRelatedTarget() { var node = this.raw && this.raw.relatedTarget; return setRelatedTarget(this, node && fromElement(node)); }; // fired events have no raw if (!this.raw) { return setRelatedTarget(this, null); } // for IE if ( typeof this.raw.relatedTarget === 'undefined’ ) { getRelatedTarget = function getRelatedTarget() { var node = null, event = this.raw; switch (event && event.type) { case 'mouseover': node = fromElement(event.fromElement); case 'mouseout': node = fromElement(event.toElement); } return setRelatedTarget(this, node); }; } plugin. getRelatedTarget = getRelatedTarget; return this.getRelatedTarget(); }; 13.
  15. 15. <ul><li>Forking + Lazy Load </li></ul>plugin.getRelatedTarget = function getRelatedTarget() { var setRelatedTarget = function(object, value) { object.getRelatedTarget = createGetter( 'getRelatedTarget ' , value ); return value; }, getRelatedTarget = function getRelatedTarget() { var node = this.raw && this.raw.relatedTarget; return setRelatedTarget(this, node && fromElement(node)); }; // fired events have no raw if (!this.raw) { return setRelatedTarget(this, null); } // for IE if (typeof this.raw.relatedTarget === 'undefined') { getRelatedTarget = function getRelatedTarget() { var node = null, event = this.raw; switch (event && event.type) { case 'mouseover': node = fromElement(event.fromElement); case 'mouseout': node = fromElement(event.toElement); } return setRelatedTarget(this, node); }; } 14.
  16. 16. <ul><li>Forking + Lazy Load </li></ul>plugin.getRelatedTarget = function getRelatedTarget() { var setRelatedTarget = function(object, value) { object.getRelatedTarget = createGetter('getRelatedTarget', value); return value; }, getRelatedTarget = function getRelatedTarget() { var node = this.raw && this.raw.relatedTarget; return setRelatedTarget( this , node && fromElement(node) ) ; }; // fired events have no raw if (!this.raw) { return setRelatedTarget(this, null); } // for IE if (typeof this.raw.relatedTarget === 'undefined') { getRelatedTarget = function getRelatedTarget() { var node = null, event = this.raw; switch (event && event.type) { case 'mouseover': node = fromElement(event.fromElement); case 'mouseout': node = fromElement(event.toElement); } return setRelatedTarget(this, node); }; } 15.
  17. 17. <ul><li>Forking + Lazy Load </li></ul>getRelatedTarget = function getRelatedTarget() { var node = this.raw && this.raw.relatedTarget; return setRelatedTarget(this, node && fromElement(node)); }; // fired events have no raw if (!this.raw) { return setRelatedTarget(this, null); } // for IE if ( typeof this.raw.relatedTarget === 'undefined' ) { getRelatedTarget = function getRelatedTarget() { var node = null, event = this.raw; switch (event && event.type) { case 'mouseover': node = fromElement(event.fromElement); case 'mouseout': node = fromElement(event.toElement); } return setRelatedTarget(this, node); }; } plugin.getRelatedTarget = getRelatedTarget; 16.
  18. 18. <ul><li>Forking + Lazy Load </li></ul>plugin.getRelatedTarget = function getRelatedTarget() { var setRelatedTarget = function(object, value) { object.getRelatedTarget = createGetter('getRelatedTarget', value); return value; }, getRelatedTarget = function getRelatedTarget() { var node = this.raw && this.raw.relatedTarget; return setRelatedTarget(this, node && fromElement(node)); }; // fired events have no raw if (!this.raw) { return setRelatedTarget(this, null); } // for IE if ( typeof this.raw.relatedTarget === 'undefined’ ) { getRelatedTarget = function getRelatedTarget() { var node = null, event = this.raw; switch (event && event.type) { case 'mouseover': node = fromElement(event.fromElement); case 'mouseout': node = fromElement(event.toElement); } return setRelatedTarget(this, node); }; } plugin. getRelatedTarget = getRelatedTarget ; return this.getRelatedTarget(); }; 17.
  19. 19. <ul><li>Memoize </li></ul>var cache = { } , reHyphenated = /-([a-z])/gi, uid = +new Date; function toUpperCase(match, letter) { return letter.toUpperCase(); } function camelCase(string) { var key = uid + string; return cache[ key ] || (cache[ key ] = string.replace( reHyphenated, toUpperCase )) ; } 18.
  20. 20. <ul><li>Nay Context </li></ul>// Prototype $$( ‘.foo’ ); // jQuery $( ‘.foo’ ); 19.
  21. 21. <ul><li>Yay Context </li></ul>// Prototype var panel = $( ‘panel’ ); panel . select( ‘.foo’ ); // jQuery var panel = $( ‘#panel’ ); panel .find( ‘.foo’ ); 20.
  22. 22. <ul><li>Event Delegation != Magic </li></ul>// Prototype usage $(‘myTable’).observe(‘click’, function( event ) { if ( event .findElement( ‘ td ’ )) { // do stuff } }); 21.
  23. 23. <ul><li>Minifiers </li></ul><ul><ul><li>Packer 3.1 (Old School, You’re my boy, Blue!) </li></ul></ul><ul><ul><li>YUI Compressor (Been around the block) </li></ul></ul><ul><ul><li>Closure Compiler (Googtastic) </li></ul></ul><ul><ul><li>JSMin (Ported to lots of languages) </li></ul></ul>22.
  24. 24. <ul><li>What’s Cool </li></ul>// code like this emit(‘I will be ’ + ‘concated by ‘ + ‘pirate magic’); // will be valmorphanize into emit(‘I will be concated by pirate magic’); 23.
  25. 25. <ul><li>Do </li></ul><ul><ul><li>Repeat use of the same variable names </li></ul></ul><ul><ul><li>Store namespaced objects in variables </li></ul></ul><ul><ul><li>Use variable lists </li></ul></ul><ul><ul><li>Avoid compiled functions </li></ul></ul>24.
  26. 26. <ul><li>Do Not </li></ul><ul><ul><li>Become anal about semi-colons </li></ul></ul><ul><ul><li>Replace all property names with variables </li></ul></ul><ul><ul><li>Use short non-descriptive variable names </li></ul></ul><ul><ul><li>Tug on Superman’s cape </li></ul></ul>25.
  27. 27. Hilarity Comics by Patrick Alexander -- http://www.eegra.com/show/sub/do/browse/cat/comics/id/43
  28. 28. Hilarity Comics by Patrick Alexander -- http://www.eegra.com/show/sub/do/browse/cat/comics/id/43
  29. 30. Links <ul><li>http://github.com/jdalton/fusejs </li></ul><ul><li>http://developer.yahoo.com/yui/compressor/ </li></ul><ul><li>http://code.google.com/closure/compiler/ http://www.crockford.com/javascript/jsmin.html http://github.com/rgrove/jsmin-php/ </li></ul><ul><li>http://base2.googlecode.com/svn/trunk/src/apps/packer/packer.html </li></ul><ul><li>http://code.google.com/p/base2/source/browse/#svn/trunk/src/apps/packer </li></ul><ul><li>Twitter: </li></ul><ul><li>@jdalton </li></ul><ul><li>@fusejs </li></ul><ul><li>Email: </li></ul><ul><li>[email_address] </li></ul>

×