paulirish

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

michaeldll

// InstancedMesh helpers
//
import {
  BufferAttribute,
  InstancedBufferGeometry,
  InstancedMesh,
  Matrix4,
  Vector3,
  Vector4,
} from "three"

sketchpunk

/** Using a faux sphere in screen space, determine the arc transform to orbit
 * the camera around a target position. A continuous orientation will
 * be provided for further calls.
 */
function arcBallTransform(
  scrSize,        // Screen size, vec2
  scrPos0,        // Starting mouse position, vec2
  scrPos1,        // Ending Mouse Positiong, vec2
  rotOrientation, // Current arc orientation, quaternion
  targetPos,      // Position to orbit around

Temzasse

import { useMemo } from "react";
import { useSearchParams } from "react-router-dom";

type ParseConfig = Record<
  string,
  | { type: "string"; defaultValue?: string }
  | { type: "number"; defaultValue?: number }
  | { parse: (value: URLSearchParams) => unknown }
>;