layout-thrashing: update

layout-thrashing.md

@@ -1,70 +1,83 @@
 ---
 title: Layout thrashing
 category: HTML
+layout: 2017/sheet
+description: ""
+updated: 2017-10-19
+weight: -1
+intro: |
+  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
+#### Element
 
-    clientHeight
+  - clientHeight
-    clientLeft
+  - clientLeft
-    clientTop
+  - clientTop
-    clientWidth
+  - clientWidth
-    focus
+  - focus
-    getBoundingClientRect
+  - getBoundingClientRect
-    getClientRects
+  - getClientRects
-    innerText
+  - innerText
-    offsetHeight
+  - offsetHeight
-    offsetLeft
+  - offsetLeft
-    offsetParent
+  - offsetParent
-    offsetTop
+  - offsetTop
-    offsetWidth
+  - offsetWidth
-    outerText
+  - outerText
-    scrollByLines
+  - scrollByLines
-    scrollByPages
+  - scrollByPages
-    scrollHeight
+  - scrollHeight
-    scrollIntoView
+  - scrollIntoView
-    scrollIntoViewIfNeeded
+  - scrollIntoViewIfNeeded
-    scrollLeft
+  - scrollLeft
-    scrollTop
+  - scrollTop
-    scrollWidth
+  - scrollWidth
+{: .-six-column}
 
-MouseEvent
+#### MouseEvent
 
-    layerX
+  - layerX
-    layerY
+  - layerY
-    offsetX
+  - offsetX
-    offsetY
+  - offsetY
+{: .-six-column}
 
-Window
+#### Window
 
-    getComputedStyle
+  - getComputedStyle
-    scrollBy
+  - scrollBy
-    scrollTo
+  - scrollTo
-    scrollX
+  - scrollX
-    scrollY
+  - scrollY
+{: .-six-column}
 
-Frame, Document & Image
+#### Frame, Document & Image
 
-    height
+  - height
-    width
+  - width
+{: .-six-column}
 
-jQuery
+#### jQuery
 
-    $.fn.offset
+  - $.fn.offset
-    $.fn.offsetParent
+  - $.fn.offsetParent
-    $.fn.position
+  - $.fn.position
-    $.fn.scrollLeft
+  - $.fn.scrollLeft
-    $.fn.scrollTop
+  - $.fn.scrollTop
-    $.fn.css('...')
+  - $.fn.css('...')
-    $.fn.text('...')
+  - $.fn.text('...')
-    $(':hidden')
+  - $(':hidden')
-    $(':contains')
+  - $(':contains')
+{: .-six-column}
 
-### Reference
+## Also see
 
- * http://www.kellegous.com/j/2013/01/26/layout-performance/
+ * <http://www.kellegous.com/j/2013/01/26/layout-performance/>
- * https://gist.github.com/desandro/4657744
+ * <https://gist.github.com/desandro/4657744>
- * 
+ * <http://stackoverflow.com/questions/17199958/why-does-setting-textcontent-cause-layout-thrashing>
- http://stackoverflow.com/questions/17199958/why-does-setting-textcontent-cause-layout-thrashing