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
| /* open up chrome dev tools (Menu > More tools > Developer tools) | |
| * go to network tab, refresh the page, wait for images to load (on some sites you may have to scroll down to the images for them to start loading) | |
| * right click/ctrl click on any entry in the network log, select Copy > Copy All as HAR | |
| * open up JS console and enter: var har = [paste] | |
| * (pasting could take a while if there's a lot of requests) | |
| * paste the following JS code into the console | |
| * copy the output, paste into a text file | |
| * open up a terminal in same directory as text file, then: wget -i [that file] | |
| */ |
| #add 'node_modules' to .gitignore file | |
| git rm -r --cached node_modules | |
| git commit -m 'Remove the now ignored directory node_modules' | |
| git push origin <branch-name> |