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