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
| // playbackrate.js | |
| // https://github.com/bgrins/devtools-snippets | |
| // Increase playbackRate for all video / audio elements on the page. | |
| (function() { | |
| console.group('playbackRate'); | |
| [].forEach.call(document.querySelectorAll("video,audio"), function(media) { | |
| var splitPath = media.src.split('/'); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script> | |
| window.MediaSource = window.MediaSource || window.WebKitMediaSource; | |
| function testTypes(types) { | |
| for (var i = 0; i < types.length; ++i) | |
| console.log("MediaSource.isTypeSupported(" + types[i] + ") : " + MediaSource.isTypeSupported(types[i])); | |
| } |
| #!/usr/local/bin/ruby | |
| grep = `git grep -n #{ARGV[0]} #{ARGV[1]}` | |
| puts "\n-----------------------------------------------------------" | |
| puts "GREP RESULT" | |
| puts '-----------------------------------------------------------' | |
| puts grep | |
| files = grep.scan /.*\:\d+/ |
| /* modernizr-test.js | |
| * Daniel Ott | |
| * 3 March 2011 | |
| * Custom Tests using Modernizr's addTest API | |
| */ | |
| /* iOS | |
| * There may be times when we need a quick way to reference whether iOS is in play or not. | |
| * While a primative means, will be helpful for that. | |
| */ |
