前端: 浏览器: reflow & repaint

[xvno]

Reflow

对Element(E)的某些改变影响到了它的layout时, 会引起E自身 & E的祖先(ancestor) & 子元素(children) & E之后的元素(elements following E)的reflow... 所以性能影响很恐怖.

引起reflow的条件

• Resizing the window
• Changing the font
• Adding or removeing a stylesheet
• Content changes, inputing text in a input box
• Activation of CSS pseudo classes, :hover, etc.
• Manipulating the class attribute
• A script manipulating the DOM
• Calculating offsetWidth / offsetHeight
• Setting a property of the style attribute

避免 or 最小化reflow带来的性能影响

针对上述条件, 尽量避免引起reflow 其他

• 换用style, 减少操作class(class影响范围越小越好, 即在DOM-tree中越低越好)
• 避免在操作style时, 多行赋值, 改为一次变更(传obj)
• 给已经把position定位为absolute 或 fixed的元素设置animation
• 避免使用tables来layout

[xvno]

Repaint