This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)
Given the code
class HashTable { | |
constructor(size) { | |
this.data = new Array(size); | |
} | |
// Hash Function | |
_hash(key) { | |
let hash = 0; | |
for(let i = 0; i < key.length; i++) { | |
hash = (hash + key.charCodeAt(i) * i) % this.data.length; |
/** | |
* Returns an array with all DOM elements affected by an event. | |
* The function serves as a polyfill for | |
* [`Event.composedPath()`](https://dom.spec.whatwg.org/#dom-event-composedpath). | |
* | |
* @category Event | |
* @param {Event} evt The triggered event. | |
* @return {Array.<HTMLElement>} The DOM elements affected by the event. | |
* | |
* @example |
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