1
0
mirror of https://github.com/onkelbeh/cheatsheets.git synced 2025-10-16 15:38:44 +02:00
cheatsheets/layout-thrashing.md
Rico Sta. Cruz 511de900ba
Formatting updates (#2133)
- Update some sheets which have very long sections
- Remove `layout: 2017/sheet` (everything has the same layout now)
- Remove outdated sheets
2024-04-03 18:30:24 +11:00

1.4 KiB

title, category, description, updated, weight, intro
title category description updated weight intro
Layout thrashing HTML 2017-10-19 -1 These are CSS properties that will cause "layout thrashing". Avoid changing them to prevent bottlenecks in your UI performance.

Layout thrashing

{: .-one-column}

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 {: .-six-column}

MouseEvent

  • layerX
  • layerY
  • offsetX
  • offsetY {: .-six-column}

Window

  • getComputedStyle
  • scrollBy
  • scrollTo
  • scrollX
  • scrollY {: .-six-column}

Frame, Document & Image

  • height
  • width {: .-six-column}

jQuery

  • $.fn.offset
  • $.fn.offsetParent
  • $.fn.position
  • $.fn.scrollLeft
  • $.fn.scrollTop
  • $.fn.css('...')
  • $.fn.text('...')
  • $(':hidden')
  • $(':contains') {: .-six-column}

Also see