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
| // usage: | |
| // <di-three-js-viewer three-js-object="device3DModel"></di-three-js-viewer> | |
| app.directive('diThreeJsViewer', [function() { | |
| function createThreeJsCanvas(parentElement, object) { | |
| var width = 400; | |
| var height = 400; | |
| var scene = new THREE.Scene(); |
Douglas Crockford, author of JavaScript: The Good parts, recently gave a talk called The Better Parts, where he demonstrates how he creates objects in JavaScript nowadays. He doesn't call his approach anything, but I will refer to it as Crockford Classless.
Crockford Classless is completely free of class, new, this, prototype and even Crockfords own invention Object.create.
I think it's really, really sleek, and this is what it looks like:
function dog(spec) {
| Copyright (c) 2010-2015 Giulia Alfonsi <electric.g@gmail.com> | |
| Permission is hereby granted, free of charge, to any person | |
| obtaining a copy of this software and associated documentation | |
| files (the "Software"), to deal in the Software without | |
| restriction, including without limitation the rights to use, | |
| copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| copies of the Software, and to permit persons to whom the | |
| Software is furnished to do so, subject to the following | |
| conditions: |