Casey Williams caseywilliams

[
  // ===================================================
  // window navigation
  {
    "key": "ctrl+h",
    "command": "workbench.action.navigateLeft"
  },
  {
    "key": "ctrl+l",

    __  __                 ______           _                                       __
   / / / /___ _      __   / ____/___ _   __(_)________  ____  ____ ___  ___  ____  / /______
  / /_/ / __ \ | /| / /  / __/ / __ \ | / / / ___/ __ \/ __ \/ __ `__ \/ _ \/ __ \/ __/ ___/
 / __  / /_/ / |/ |/ /  / /___/ / / / |/ / / /  / /_/ / / / / / / / / /  __/ / / / /_(__  )
/_/ /_/\____/|__/|__/  /_____/_/ /_/|___/_/_/   \____/_/ /_/_/ /_/ /_/\___/_/ /_/\__/____/

    __  __                             __
   / / / /___ _____  ____  ___  ____  / /
  / /_/ / __ `/ __ \/ __ \/ _ \/ __ \/ /

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

	https://danluu.com/web-bloat/
	https://danluu.com/octopress-speedup/
	https://tonsky.me/blog/pwa/
	https://hpbn.co/
	https://idlewords.com/talks/website_obesity.htm
	https://blog.codinghorror.com/an-exercise-program-for-the-fat-web/
	https://developers.google.com/speed
	https://mobile.twitter.com/danluu/status/1252792626257866754 (Google AV1 announcement)
	https://developers.google.com/search/blog#speed-and-google-search (1st link from Google Pagespeed Insights, "Read the latest Google Search Central blog posts about performance & speed."
	https://calendar.perfplanet.com/2020/the-mythical-fast-web-page/