layout-thrashing.md

   1 ---
   2 title: Layout thrashing
   3 category: HTML
   4 layout: 2017/sheet
   5 description: ""
   6 updated: 2017-10-19
   7 weight: -1
   8 intro: |
   9   These are CSS properties that will cause "layout thrashing". Avoid changing them to prevent bottlenecks in your UI performance.
  10 ---
  11
  12 ## Layout thrashing
  13 {: .-one-column}
  14
  15 ### Things that cause invalidation
  16
  17 #### Element
  18
  19   - clientHeight
  20   - clientLeft
  21   - clientTop
  22   - clientWidth
  23   - focus
  24   - getBoundingClientRect
  25   - getClientRects
  26   - innerText
  27   - offsetHeight
  28   - offsetLeft
  29   - offsetParent
  30   - offsetTop
  31   - offsetWidth
  32   - outerText
  33   - scrollByLines
  34   - scrollByPages
  35   - scrollHeight
  36   - scrollIntoView
  37   - scrollIntoViewIfNeeded
  38   - scrollLeft
  39   - scrollTop
  40   - scrollWidth
  41 {: .-six-column}
  42
  43 #### MouseEvent
  44
  45   - layerX
  46   - layerY
  47   - offsetX
  48   - offsetY
  49 {: .-six-column}
  50
  51 #### Window
  52
  53   - getComputedStyle
  54   - scrollBy
  55   - scrollTo
  56   - scrollX
  57   - scrollY
  58 {: .-six-column}
  59
  60 #### Frame, Document & Image
  61
  62   - height
  63   - width
  64 {: .-six-column}
  65
  66 #### jQuery
  67
  68   - $.fn.offset
  69   - $.fn.offsetParent
  70   - $.fn.position
  71   - $.fn.scrollLeft
  72   - $.fn.scrollTop
  73   - $.fn.css('...')
  74   - $.fn.text('...')
  75   - $(':hidden')
  76   - $(':contains')
  77 {: .-six-column}
  78
  79 ## Also see
  80
  81  * <http://www.kellegous.com/j/2013/01/26/layout-performance/>
  82  * <https://gist.github.com/desandro/4657744>
  83  * <http://stackoverflow.com/questions/17199958/why-does-setting-textcontent-cause-layout-thrashing>