什么引起重排

[ajccom]

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

Scroll stuff

• elem.scrollBy(), elem.scrollTo()
• elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
• elem.scrollWidth, elem.scrollHeight
• elem.scrollLeft, elem.scrollTop also, setting them

Focus

• elem.focus() can trigger a double forced layout (source&l=2923)

Also…

• elem.computedRole, elem.computedName
• elem.innerText (source&l=3440))

getComputedStyle

window.getComputedStyle() will typically force style recalc

window.getComputedStyle() will force layout, as well, if any of the following is true:

1. The element is in a shadow tree
2. There are media queries (viewport-related ones). Specifically, one of the following: (source)
   • min-width, min-height, max-width, max-height, width, height
   • aspect-ratio, min-aspect-ratio, max-aspect-ratio
   • device-pixel-ratio, resolution, orientation , min-device-pixel-ratio, max-device-pixel-ratio
3. The property requested is one of the following: (source)
   • height, width
   • top, right, bottom, left
   • margin [-top, -right, -bottom, -left, or shorthand] only if the margin is fixed.
   • padding [-top, -right, -bottom, -left, or shorthand] only if the padding is fixed.
   • transform, transform-origin, perspective-origin
   • translate, rotate, scale
   • grid, grid-template, grid-template-columns, grid-template-rows
   • perspective-origin
   • These items were previously in the list but appear to not be any longer (as of Feb 2018): motion-path, motion-offset, motion-rotation, x, y, rx, ry

window

• window.scrollX, window.scrollY
• window.innerHeight, window.innerWidth
• window.getMatchedCSSRules() only forces style

Forms

• inputElem.focus()
• inputElem.select(), textareaElem.select()

Mouse events

• mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY (source)

document

• doc.scrollingElement only forces style

Range

• range.getClientRects(), range.getBoundingClientRect()

SVG

• Quite a lot; haven't made an exhaustive list , but Tony Gentilcore's 2011 Layout Triggering List pointed to a few.

contenteditable

• Lots & lots of stuff, …including copying an image to clipboard (source)

*Appendix

• Reflow only has a cost if the document has changed and invalidated the style or layout. Typically, this is because the DOM was changed (classes modified, nodes added/removed, even adding a psuedo-class like :focus).
• If layout is forced, style must be recalculated first. So forced layout triggers both operations. Their costs are very dependent on the content/situation, but typically both operations are similar in cost.
• What should you do about all this? Well, the More on forced layout section below covers everything in more detail, but the short version is:
  1. for loops that force layout & change the DOM are the worst, avoid them.
  2. Use DevTools Timeline to see where this happens. You may be surprised to see how often your app code and library code hits this.
  3. Batch your writes & reads to the DOM (via FastDOM or a virtual DOM implementation). Read your metrics at the begininng of the frame (very very start of rAF, scroll handler, etc), when the numbers are still identical to the last time layout was done.

Timeline trace of The Guardian. Outbrain is forcing layout repeatedly, probably in a loop.

Cross-browser

• The above data was built by reading the Blink source, so it's true for Chrome, Opera, and most android browsers.
• Tony Gentilcore's Layout Triggering List was for 2011 WebKit and generally aligns with the above.
• Modern WebKit's instances of forced layout are mostly consistent: updateLayoutIgnorePendingStylesheets - GitHub search - WebKit/WebKit
• Gecko's reflow appears to be requested via FrameNeedsReflow. Results: FrameNeedsReflow - mozilla-central search
• No concrete data on Edge/IE, but it should fall roughly in line, as the return values for these properties are spec'd. What would differ is the amount of clever optimization.

Browsing the Chromium source:

• forced layout (and style recalc): UpdateStyleAndLayoutIgnorePendingStylesheets - Chromium Code Search
• forced style recalc: UpdateStyleAndLayoutTreeIgnorePendingStylesheets - Chromium Code Search

CSS Triggers

CSS Triggers is a related resource and all about what operations are required to happen in the browser lifecycle as a result of setting/changing a given CSS value. It's a great resource. The above list, however, are all about what forces the purple/green/darkgreen circles synchronously from JavaScript.

More on forced layout

• Avoiding layout thrashing — Web Fundamentals
• Fixing Layout thrashing in the real world | Matt Andrews
• Timeline demo: Diagnosing forced synchronous layouts - Google Chrome
• Preventing 'layout thrashing' | Wilson Page
• wilsonpage/fastdom
• Rendering: repaint, reflow/relayout, restyle / Stoyan
• We spent a week making Trello boards load extremely fast. Here’s how we did it. - Fog Creek Blog
• Minimizing browser reflow | PageSpeed Insights | Google Developers
• Optimizing Web Content in UIWebViews and Websites on iOS
• Accelerated Rendering in Chrome
• web performance for the curious
• Jank Free

---

Updated slightly Feb 2018. Codesearch links and a few changes to relevant element properties.

来源：https://gist.githubusercontent.com/paulirish/5d52fb081b3570c81e3a/raw/05d5c8aeda72a56ddb1156a08741f138fc11bc09/what-forces-layout.md

[NancyFan]

什么导致重排【译】

在javascript调用以下属性或方法时，将会触发浏览器同步计算样式和布局。这被称为重排(reflow/layout thrashing)，也是常见的性能瓶颈。

Element元素

盒子距离相关的度量

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

滚动内容

• elem.scrollBy(), elem.scrollTo()
• elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
• elem.scrollWidth, elem.scrollHeight（只读属性）
• elem.scrollLeft, elem.scrollTop (获取或者设置都会触发重排)

焦点

• 获取焦点elem.focus()方法会触发两次重排

其它

• elem.computedRole, elem.computedName
• elem.innerText 

getComputedStyle

window.getComputedStyle() 通常会导致样式的重新计算。

此外，当满足下面任何一种情况时，window.getComputedStyle()都会导致重排：

1. 元素在shadow tree（影子树）中

2. 使用媒体查询(viewport相关的一种)。特别是查询下面的任何一个媒体属性时：

   • min-width, min-height, max-width, max-height, width, height
   • aspect-ratio, min-aspect-ratio, max-aspect-ratio
   • device-pixel-ratio, resolution, orientation , min-device-pixel-ratio, max-device-pixel-ratio

3. 获取下列属性:

   • height, width
   • top, right, bottom, left
   • margin [-top, -right, -bottom, -left,或简写]仅当margin值固定.
   • padding [-top, -right, -bottom, -left,或简写]仅当padding值固定.
   • transform, transform-origin, perspective-origin
   • translate, rotate, scale
   • grid, grid-template, grid-template-columns, grid-template-rows
   • perspective-origin
   • 以及之前被列入进来但是似乎之后不再使用的属性: motion-path, motion-offset, motion-rotation, x, y, rx, ry

window窗口

• window.scrollX, window.scrollY
• window.innerHeight, window.innerWidth
• window.getMatchedCSSRules() 仅导致样式的重新计算

Forms表单

• inputElem.focus()
• inputElem.select(), textareaElem.select()

Mouse events鼠标事件

• mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY 

document文档流

• doc.scrollingElement 仅导致样式重新计算

Range对象

• range.getClientRects(), range.getBoundingClientRect()

SVG

• 相当多，目前没有一个详尽的列表，但是可以参考中 Tony Gentilcore's 2011 Layout Triggering List 

contenteditable

• 很多行为都会触发重排,包括复制图片到剪切板

附录

• 重排只在文档改变或者布局样式失效时才会消耗资源。通常来说，这是因为DOM发生了改变(修改class,新增或移除节点,甚至添加伪类比如:focus)。
• 如果导致重排，样式则首先会被重新计算；因此，强制布局会导致两种操作（重排和重绘）。他们的性能消耗取决于内容或当时的情况，但通常这两种操作消耗的性能相似。

• 如何避免重排呢?下列提供一些解决方法:

  1. 尽量避免在for 循环中强制布局或者改变dom
  2. 使用DevTools Timeline开发工具观察分析代码
  3. 批量读写dom (通过 FastDOM or 虚拟dom实现).

各浏览器中的表现

• 以上数据是通过读取Blink源码所得，因此对于Chrome,Opera以及大多数安卓浏览器都是可用的

• Tony Gentilcore's Layout Triggering List 文章中对于2011年的WebKit与上述数据基本一致

• 现代WebKit中强制布局的实例都基本上一致。参考: updateLayoutIgnorePendingStylesheets - GitHub search - WebKit/WebKit

• Gecko内核的回流请求通过FrameNeedsReflow进行 FrameNeedsReflow - mozilla-central search

• 对于Edge / IE没有很好的数据支持，但是应该大致相符，因为这些返回值内容都已由标准所限制。结果的区别可能就在于优化方法的不同。

Chromium源码推荐

• 强制布局（以及样式的重新计算）:UpdateStyleAndLayoutIgnorePendingStylesheets- Chromium Code Search

• 强制重新计算样式:UpdateStyleAndLayoutTreeIgnorePendingStylesheets- Chromium Code Search

CSS Triggers网站

CSS Triggers是一个很好的资源网站，它提供了关于设置或者改变一个CSS值时，会导致浏览器生命周期中进行了什么操作的信息。上面列表中都是关于JavaScript中什么操作引起浏览器同步触发紫色（重排）/绿色（重绘）/深绿色（混合）的。

更多关于重排的文章

• Avoiding layout thrashing — Web Fundamentals
• Fixing Layout thrashing in the real world | Matt Andrews
• Timeline demo: Diagnosing forced synchronous layouts - Google Chrome
• Preventing 'layout thrashing' | Wilson Page
• wilsonpage/fastdom
• Rendering: repaint, reflow/relayout, restyle / Stoyan
• We spent a week making Trello boards load extremely fast. Here’s how we did it. - Fog Creek Blog
• Minimizing browser reflow | PageSpeed Insights | Google Developers
• Optimizing Web Content in UIWebViews and Websites on iOS
• Accelerated Rendering in Chrome
• web performance for the curious
• Jank Free