Layout thrashing

These are CSS properties that will cause “layout thrashing”. Avoid changing them to prevent bottlenecks in your UI performance.

A cheatsheet by @rstacruz|Refreshed 7 months ago.Refresh|View source on Github

Things that cause invalidation

Things that cause invalidation

Element

  • clientHeight
  • clientLeft
  • clientTop
  • clientWidth
  • focus
  • getBoundingClientRect
  • getClientRects
  • innerText
  • offsetHeight
  • offsetLeft
  • offsetParent
  • offsetTop
  • offsetWidth
  • outerText
  • scrollByLines
  • scrollByPages
  • scrollHeight
  • scrollIntoView
  • scrollIntoViewIfNeeded
  • scrollLeft
  • scrollTop
  • scrollWidth

MouseEvent

  • layerX
  • layerY
  • offsetX
  • offsetY

Window

  • getComputedStyle
  • scrollBy
  • scrollTo
  • scrollX
  • scrollY

Frame, Document & Image

  • height
  • width

jQuery

  • $.fn.offset
  • $.fn.offsetParent
  • $.fn.position
  • $.fn.scrollLeft
  • $.fn.scrollTop
  • $.fn.css(‘…’)
  • $.fn.text(‘…’)
  • $(‘:hidden’)
  • $(‘:contains’)