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
| /* Move to the next open line up or down (made to emulate line empty line jumping in Vim/Emacs). | |
| Open keybindings via Preferences -> Key Bindings - User and past in between the [] brackets. */ | |
| { | |
| "keys": ["ctrl+up"], | |
| "command": "move", | |
| "args": {"by": "stops", "empty_line": true, "forward": false} | |
| }, | |
| { | |
| "keys": ["ctrl+down"], | |
| "command": "move", |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
| // src/amd/prologue.js | |
| define(function() { | |
| // lib/handlebars/base.js | |
| /*jshint eqnull:true*/ | |
| var Handlebars = {}; | |
| Handlebars.VERSION = "1.0.beta.5"; |
| // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
| // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
| // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel | |
| // MIT license | |
| (function() { | |
| var lastTime = 0; | |
| var vendors = ['ms', 'moz', 'webkit', 'o']; |