| var elemDisplays = {}, | |
| // Store the iframe outside the function to reuse it | |
| iframe, | |
| iframeDoc; | |
| function defaultDisplay( nodeName ) { | |
| if ( !elemDisplays[ nodeName ] ) { | |
| // Try the classical method first, which is far faster | |
| var elem = document.createElement( nodeName ), | |
| display; |
| function extend(destination) { | |
| var prop, source; | |
| var index = 0; | |
| var length = arguments.length; | |
| while (++index < length) { | |
| source = arguments[index]; | |
| for (prop in source) { | |
| destination[prop] = source[prop]; |
| var parser = document.createElement('a'); | |
| parser.href = "http://example.com:3000/pathname/?search=test#hash"; | |
| parser.protocol; // => "http:" | |
| parser.hostname; // => "example.com" | |
| parser.port; // => "3000" | |
| parser.pathname; // => "/pathname/" | |
| parser.search; // => "?search=test" | |
| parser.hash; // => "#hash" | |
| parser.host; // => "example.com:3000" |
| // Portable & reusable Events object, not too different from what is found | |
| // in Backbone. | |
| // | |
| // (Credits @visionmedia) & Modified from: | |
| // https://raw.github.com/component/emitter/master/index.js | |
| var Events = { | |
| // Cache all callbacks. | |
| callbacks: {}, | |
| // Listen on the given `event` with `fn`. |
| // 1. | |
| // “Safe” but retain cycle. | |
| [self setCompletionBlock:^{ | |
| NSLog(@"1: %@", self->_foo); | |
| }]; | |
| // 2. | |
| // Unsafe. Could dereference nil. | |
| __weak BCThing *weakSelf = self; |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent