Steffen Dietz stffndtz

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()

	<?php

	/**
	* Output Responsive Image Tag based on ACF Image Field
	*
	* @param $image (array) ACF Image Field
	* @param $size (string) Image size name (ie. medium, large, my-custom-image-size )
	* @param $lazyload (bool) Enable/Disable lazy loading of responsive images (requires lazysizes.js to be loaded — see https://github.com/aFarkas/lazysizes)
	* @param $classes (array) Array of class names to apply to the image
	* @author Eivind Borgersen for Hyphen

	<?php
	// create srcset images for kirby
	function img($image, $options = array()) {
	// defaults
	$defaults = array(
	"alt" => $image->title()->or(''),
	"widths" => [100, 100, 100],
	"class" => "",
	"lazy" => false,
	);