Skip to content

Instantly share code, notes, and snippets.

@davidfowl
davidfowl / .NET6Migration.md
Last active February 13, 2025 22:42
.NET 6 ASP.NET Core Migration
@davidfowl
davidfowl / MinimalAPIs.md
Last active March 4, 2025 22:18
Minimal APIs at a glance
@paulirish
paulirish / what-forces-layout.md
Last active March 10, 2025 11:13
What forces layout/reflow. The comprehensive list.

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
// Brightness math based on:
// http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;
@function brightness($color) {
// Extract color components