2014-07-14 03:23:52 +00:00
|
|
|
---
|
|
|
|
|
title: Layout thrashing
|
2015-11-24 05:06:06 +00:00
|
|
|
category: HTML
|
2017-10-19 03:00:43 +00:00
|
|
|
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.
|
2014-07-14 03:23:52 +00:00
|
|
|
---
|
|
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
## Layout thrashing
|
|
|
|
|
{: .-one-column}
|
|
|
|
|
|
2014-07-14 03:23:52 +00:00
|
|
|
### Things that cause invalidation
|
|
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
#### Element
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
- clientHeight
|
|
|
|
|
- clientLeft
|
|
|
|
|
- clientTop
|
|
|
|
|
- clientWidth
|
|
|
|
|
- focus
|
|
|
|
|
- getBoundingClientRect
|
|
|
|
|
- getClientRects
|
|
|
|
|
- innerText
|
|
|
|
|
- offsetHeight
|
|
|
|
|
- offsetLeft
|
|
|
|
|
- offsetParent
|
|
|
|
|
- offsetTop
|
|
|
|
|
- offsetWidth
|
|
|
|
|
- outerText
|
|
|
|
|
- scrollByLines
|
|
|
|
|
- scrollByPages
|
|
|
|
|
- scrollHeight
|
|
|
|
|
- scrollIntoView
|
|
|
|
|
- scrollIntoViewIfNeeded
|
|
|
|
|
- scrollLeft
|
|
|
|
|
- scrollTop
|
|
|
|
|
- scrollWidth
|
|
|
|
|
{: .-six-column}
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
#### MouseEvent
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
- layerX
|
|
|
|
|
- layerY
|
|
|
|
|
- offsetX
|
|
|
|
|
- offsetY
|
|
|
|
|
{: .-six-column}
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
#### Window
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
- getComputedStyle
|
|
|
|
|
- scrollBy
|
|
|
|
|
- scrollTo
|
|
|
|
|
- scrollX
|
|
|
|
|
- scrollY
|
|
|
|
|
{: .-six-column}
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
#### Frame, Document & Image
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
- height
|
|
|
|
|
- width
|
|
|
|
|
{: .-six-column}
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
#### jQuery
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
- $.fn.offset
|
|
|
|
|
- $.fn.offsetParent
|
|
|
|
|
- $.fn.position
|
|
|
|
|
- $.fn.scrollLeft
|
|
|
|
|
- $.fn.scrollTop
|
|
|
|
|
- $.fn.css('...')
|
|
|
|
|
- $.fn.text('...')
|
|
|
|
|
- $(':hidden')
|
|
|
|
|
- $(':contains')
|
|
|
|
|
{: .-six-column}
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
## Also see
|
2014-07-14 03:23:52 +00:00
|
|
|
|
2017-10-19 03:00:43 +00:00
|
|
|
* <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>
|
