Html Reflow and Layout Thrashing

• What forces layout / reflow: All the properties and methods when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout.
• ON LAYOUT & WEB PERFORMANCE
• Preventing 'layout thrashing'

What cause the browser reflow:

Element

• 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

• height
• width

How to fix

• quick fix: re-order the execution so that we can batch the DOM reads and DOM writes together.
• requestAnimationFrame (raf): an example show that raf can prevent layout thrashing. But it still need to manually re-order the execution. And in raf function the layout thrashing problem still exist.
• FastDom: isolation read and write jobs.
• virtual dom