Web Optimization Summit: Coding for Performance

Coding for Performance Parental Advisory : Hardcore Forking Action By John-David Dalton @jdalton ▪ john@fusejs.com ▪ http://allyoucanleet.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); return length; } Reduce Abstraction 2.

[object Object],[object Object],[object Object],[object Object],[object Object],4.

// 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.

// 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.

// 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 = new XMLHttpRequest(); } Weak Object Inference 8.

[object Object],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.

[object Object],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.

[object Object],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.

[object Object],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.

[object Object],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.

[object Object],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.

[object Object],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.

[object Object],// Prototype $$( ‘.foo’ ); // jQuery $( ‘.foo’ ); 19.

[object Object],// Prototype var panel = $( ‘panel’ ); panel . select( ‘.foo’ ); // jQuery var panel = $( ‘#panel’ ); panel .find( ‘.foo’ ); 20.

[object Object],// Prototype usage $(‘myTable’).observe(‘click’, function( event ) { if ( event .findElement( ‘ td ’ )) { // do stuff } }); 21.

[object Object],// code like this emit(‘I will be ’ + ‘concated by ‘ + ‘pirate magic’); // will be valmorphanize into emit(‘I will be concated by pirate magic’); 23.

Hilarity Comics by Patrick Alexander -- http://www.eegra.com/show/sub/do/browse/cat/comics/id/43

Links ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Web Optimization Summit: Coding for Performance

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Web Optimization Summit: Coding for Performance

Similar to Web Optimization Summit: Coding for Performance (20)

Recently uploaded

Recently uploaded (20)

Web Optimization Summit: Coding for Performance