Cheat Sheet速查表
跳转到主要内容

布局抖动与强制重排 速查表

本文根据 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’)

另请参阅