Tom Golden tbjgolden

Article: https://tom.bio/blog/don-t-use-css-minifiers-with-sass

Key benchmarks:

name	uncompressed	gzip	brotli	duration (speed)
preprocessors	-	-	-	-
sass	-27.8%	-88.8%	-91.2%	491ms (1629kB/s)
less	-28.1%	-88.8%	-91.2%	1009ms (790kB/s)
minifiers	-	-	-	-

Low-effort, high-reward browserlist config to avoid vendor prefix hell

(Stats used from 2022-06-20)

chrome >= 79, and_chr >= 81, safari >= 13, ios_saf >= 12.4, firefox >= 73

...or more generally

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

	// deep copy:
	// String, Number, undefined, null, Set, Map, typed Array, Object, Boolean, RegExp, Date, ArrayBuffer, Node
	// Functions, Properties of types: (Primitive, Symbol)
	// shallow copy (by reference):
	// WeakMap, WeakSet, Symbol
	// increased compatibility: IE, Node
	var $jscomp = $jscomp \|\| {};
	$jscomp.scope = {};
	$jscomp.ASSUME_ES5 = !1;
	$jscomp.defineProperty = $jscomp.ASSUME_ES5 \|\| "function" == typeof Object.defineProperties ? Object.defineProperty : function(a, b, c) {