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| @media print { | |
| /* Your styles here */ | |
| } | |
| @page { | |
| size: 210mm 297mm; | |
| outline: 1pt dotted; | |
| margin: 0; | |
| padding-top: 0; | |
| } |
| <!-- HEAD SECTION --> | |
| <!-- IE Edge Meta Tag --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <!-- Viewport --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> |
| /* bling.js */ | |
| window.$ = document.querySelectorAll.bind(document); | |
| Node.prototype.on = window.on = function (name, fn) { | |
| this.addEventListener(name, fn); | |
| } | |
| NodeList.prototype.__proto__ = Array.prototype; |
| function memoize(func, resolver) { | |
| var memoized = function() { | |
| var cache = memoized.cache; | |
| var key = resolver ? | |
| resolver.apply(this, arguments) : | |
| arguments[0]; | |
| if (cache.has(key)) { | |
| return cache.get(key); | |
| } |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>{{{ $pageTitle }}}</title> | |
| <!-- Bootstrap --> | |
| <link href="../assets/bootstrap/css/bootstrap.css" rel="stylesheet"> |
| var mediaJSON = { "categories" : [ { "name" : "Movies", | |
| "videos" : [ | |
| { "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org", | |
| "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ], | |
| "subtitle" : "By Blender Foundation", | |
| "thumb" : "images/BigBuckBunny.jpg", | |
| "title" : "Big Buck Bunny" | |
| }, | |
| { "description" : "The first Blender Open Movie from 2006", | |
| "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ], |
| // Returns a function, that, as long as it continues to be invoked, will not | |
| // be triggered. The function will be called after it stops being called for | |
| // N milliseconds. If `immediate` is passed, trigger the function on the | |
| // leading edge, instead of the trailing. | |
| var debounce = function(func, wait, immediate) { | |
| var timeout; | |
| return function() { | |
| var context = this, args = arguments; | |
| var later = function() { | |
| timeout = null; |
I feel the need to have a little rant about MooTools and ES7 and the whole 'Array.contains' hoo-hah.
When MooTools came out in 2006, the most popular framework was Prototype. As the name suggests, it extended prototypes, as did MooTools. People still referred to making websites with JavaScript as 'DHTML', there was no trim method on strings, there wasn't even a forEach method on arrays. JavaScript was a crippled language. IE6 ruled the waves.
MooTools, Prototype, Dojo, Base2 - they made the language usable, even fun, to work with. By using an incredible feature of JavaScript, prototypical inheritance, we were able to add features to the language that made it palatable.
Be it simple methods like number.toInt, string.trim, array.forEach, or familiar programming constructs such as Class, MooTools and its ilk took JavaScript from something impossible to work with to something that you could properly use to build awesome sites, and even apps - Microsoft, IE and desktop ruled everything, and the concept of a 'we
