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

sndrs

const get = (obj = {}, path = '', defaultValue) =>
  path
    .replace(/\[(.+?)\]/g, '.$1')
    .split('.')
    .reduce((o, key) => o[key], obj) || defaultValue;


// PERFORMANCE
// It's slower than lodash (surprise surprise), but it's about 97% smaller:
// https://jsperf.com/get-object-props/4

OliverJAsh

type CancellableFetchResult = { aborted: true } | { aborted: false; responseText: string };
export type CancellableFetchReturn = {
  completePromise: Promise<CancellableFetchResult>;
  abort: Function;
};

// Returns a promise API and the original XHR for abortion.
export const cancellableFetch = (
  url: string,
  options: RequestInit = {},