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
| { | |
| "env": { | |
| "browser": true, | |
| "node": true, | |
| "es6": true | |
| }, | |
| "plugins": ["react"], | |
| "ecmaFeatures": { |
| Latency Comparison Numbers (~2012) | |
| ---------------------------------- | |
| L1 cache reference 0.5 ns | |
| Branch mispredict 5 ns | |
| L2 cache reference 7 ns 14x L1 cache | |
| Mutex lock/unlock 25 ns | |
| Main memory reference 100 ns 20x L2 cache, 200x L1 cache | |
| Compress 1K bytes with Zippy 3,000 ns 3 us | |
| Send 1K bytes over 1 Gbps network 10,000 ns 10 us | |
| Read 4K randomly from SSD* 150,000 ns 150 us ~1GB/sec SSD |
| // Based on http://stackoverflow.com/a/10520017/1307721 and http://stackoverflow.com/a/16022728/1307721 | |
| Podium = {}; | |
| Podium.keydown = function(k) { | |
| var oEvent = document.createEvent('KeyboardEvent'); | |
| // Chromium Hack | |
| Object.defineProperty(oEvent, 'keyCode', { | |
| get : function() { |
| //return an array of objects according to key, value, or key and value matching | |
| function getObjects(obj, key, val) { | |
| var objects = []; | |
| for (var i in obj) { | |
| if (!obj.hasOwnProperty(i)) continue; | |
| if (typeof obj[i] == 'object') { | |
| objects = objects.concat(getObjects(obj[i], key, val)); | |
| } else | |
| //if key matches and value matches or if key matches and value is not passed (eliminating the case where key matches but passed value does not) | |
| if (i == key && obj[i] == val || i == key && val == '') { // |
| /* | |
| Copy this into the console of any web page that is interactive and doesn't | |
| do hard reloads. You will hear your DOM changes as different pitches of | |
| audio. | |
| I have found this interesting for debugging, but also fun to hear web pages | |
| render like UIs do in movies. | |
| */ | |
| const audioCtx = new (window.AudioContext || window.webkitAudioContext)() |
Some quick thoughts on https://twitter.com/dan_abramov/status/884892244817346560. It's not ignorant at all to ask how browser vendors approach performance. On the V8 side we've discussed bytecode precompilation challenges a few times this year. Here's my recollection of where we stand on the idea:
JavaScript engines like V8 have to work on multiple architectures. Every version of V8 is different. The architectures we target are different. A precompiled bytecode solution would require a system (e.g the server or a CDN) to generate bytecode builds for every target architecture, every version of V8 supported and every version of the JavaScript libraries or bundles bytecode is being generated for. This is because we would need to make sure every user accessing a page using that bytecode can still get the final JS successfully executed.
Consider that if a cross-browser solution to this problem was desired, the above would need to be applied to JavaScriptCore, SpiderMonkey and Chakra as well. It would need to ca
My friend Michael Jackson turned off github issues on one of his smaller projects. It got me thinking...
Maintainers getting burned out is a problem. Not just for the users of a project but the mental health of the maintainer. It's a big deal for both parties. Consumers want great tools, maintainers want to create them, but maintainers don't want to be L1 tech support, that's why they
| import {expect} from 'chai'; | |
| import App from '../app/components/App'; | |
| import a11yHelper from "./a11yHelper"; | |
| describe('Accessibility', function () { | |
| this.timeout(10000); | |
| it('Has no errors', function () { | |
| let config = {}; |