本文根据 Devhints / Layout thrashing 翻译。代码示例及版本范围沿用原文。原文标注更新日期:2017-10-19。
这些 CSS 属性会导致“布局抖动”。请避免修改它们,以防成为 UI 性能瓶颈。
布局抖动与强制重排
导致失效的因素
元素
- clientHeight
- clientLeft
- clientTop
- clientWidth
- focus
- getBoundingClientRect
- getClientRects
- innerText
- offsetHeight
- offsetLeft
- offsetParent
- offsetTop
- offsetWidth
- outerText
- scrollByLines
- scrollByPages
- scrollHeight
- scrollIntoView
- scrollIntoViewIfNeeded
- scrollLeft
- scrollTop
- scrollWidth
鼠标事件 (MouseEvent)
- layerX
- layerY
- offsetX
- offsetY
窗口 (Window)
- getComputedStyle
- scrollBy
- scrollTo
- scrollX
- scrollY
框架 (Frame)、文档 (Document) 与图像 (Image)
- 高度
- 宽度
jQuery
- $.fn.offset
- $.fn.offsetParent
- $.fn.position
- $.fn.scrollLeft
- $.fn.scrollTop
- $.fn.css(’…’)
- $.fn.text(’…’)
- $(‘:hidden’)
- $(‘:contains’)