diff --git a/layout-thrashing.md b/layout-thrashing.md index 47a066f6d..7f9c48ca2 100644 --- a/layout-thrashing.md +++ b/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 + * + * + *