Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@davidfowl
davidfowl / .NET6Migration.md
Last active April 11, 2024 02:02
.NET 6 ASP.NET Core Migration
@davidfowl
davidfowl / MinimalAPIs.md
Last active April 10, 2024 04:24
Minimal APIs at a glance
@paulirish
paulirish / what-forces-layout.md
Last active April 23, 2024 06:51
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