Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
https://www.robingruenke.com/journal/blogging/tools/how-my-journal-is-build.html

Robin Gruenke eimfach

💭
https://www.robingruenke.com/journal/blogging/tools/how-my-journal-is-build.html
View GitHub Profile
@eimfach
eimfach / README.md
Created May 25, 2021 — forked from yang-wei/README.md
SOLID Principles of Object Oriented and Agile Design
View README.md
@eimfach
eimfach / what-forces-layout.md
Created Feb 1, 2020 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

What forces layout / reflow

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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
View protips.js
// Promise.all is good for executing many promises at once
Promise.all([
promise1,
promise2
]);
// Promise.resolve is good for wrapping synchronous code
Promise.resolve().then(function () {
if (somethingIsNotRight()) {
throw new Error("I will be rejected asynchronously!");