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| /* bling.js */ | |
| window.$ = document.querySelectorAll.bind(document); | |
| Node.prototype.on = window.on = function (name, fn) { | |
| this.addEventListener(name, fn); | |
| } | |
| NodeList.prototype.__proto__ = Array.prototype; |
| // Returns a function, that, when invoked, will only be triggered once every | |
| // browser animation frame - using tram's requestAnimationFrame polyfill. | |
| // tram.js - https://github.com/bkwld/tram | |
| _.throttle = function(func) { | |
| var wait, args, context; | |
| return function () { | |
| if (wait) return; | |
| wait = true; | |
| args = arguments; | |
| context = this; |
| - var site = {title: 'site name', url: 'http:site.com', image: '/images/thumbnail-site-square.jpg', favicon: '/favicon.ico', description: 'Site Description'} | |
| each val, key in site // Open Graph metadata | |
| meta(property='og:'+'#{key}', content='#{val}') |
The following will minify your assets with grunt each time a generation write completes.
